npm - @anker-in/headless-ui - Versions diffs - 1.1.74 → 1.1.76 - Mend

@anker-in/headless-ui 1.1.74 → 1.1.76

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 (216) hide show

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as m}from"react/jsx-runtime";import he,{useImperativeHandle as ge,useRef as h,useState as g,useEffect as Q}from"react";import{Heading as w,Picture as S,Text as M,Link as U}from"../../components/index.js";import{cn as s,getLocalizedPath as X}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{motion as Y,AnimatePresence as ee}from"framer-motion";const ye="image",ke="image_with_text",te=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("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"})}),ie=he.forwardRef(({data:ae,className:oe},le)=>{const{title:I,subtitle:L,desc:_,descIcon:P,image:v,padImage:D,mobileImage:z,theme:se="dark",items:E=[],layout:re="left",mediaType:ne="image",datalist:r=[],video:H,padVideo:j,mobVideo:R,button:u,textAlign:l="left"}=ae,i=re,{locale:W="us"}=_e(),V=h(null),y=h(null),k=h(null),N=h(null),C=h(null),[p,de]=g(0),A=h([]),[q,me]=g({left:0,width:0}),[f,$]=g(""),[B,F]=g(""),[O,Z]=g(""),n=r.length>0,b=ne==="video";be(V,{componentType:ye,componentName:ke,componentTitle:I,componentDescription:L}),ge(le,()=>V.current),Q(()=>{if(r.length>0){const t=A.current[p];if(t){const{offsetLeft:o,offsetWidth:a}=t;me({left:o,width:a})}}},[p,r.length]);const[G,pe]=g(!1);we(C,{once:!0,threshold:.01,callback:()=>{pe(!0)}}),Q(()=>{if(!G||!b)return;let t="",o="",a="";if(n&&r[p]){const c=r[p];t=c.video?.url||"",o=c.padVideo?.url||t,a=c.mobVideo?.url||t}else t=H?.url||"",o=j?.url||t,a=R?.url||t;t&&$(t),o&&F(o),a&&Z(a),setTimeout(()=>{[y.current?.querySelector("video"),k.current?.querySelector("video"),N.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[G,b,n,p,r,H?.url,j?.url,R?.url]);const ce=(t,o)=>{if(de(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),b&&n&&r[t]){const a=r[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&F(a.padVideo.url),a.mobVideo?.url&&Z(a.mobVideo.url),setTimeout(()=>{[y.current?.querySelector("video"),k.current?.querySelector("video"),N.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},xe=()=>!T||!u?.text?null:e("div",{className:s("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left","laptop:hidden":i==="top"||i==="bottom"}),children:e(U,{href:X(u.link||"",W),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:te,children:u.text})}),d=E.length>0,T=!!u,J=()=>{if(n&&r[p]){const t=r[p];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return v?`${v?.url},${D?.url||v?.url} 1024, ${z?.url||v?.url} 768`:""},K=()=>{if(n){const c=r[p],x=c.image?.url,ue=c.imgPad?.url||x,fe=c.imageMob?.url||x;return e(ee,{mode:"wait",children:e(Y.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:m("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:y,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:k,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:B||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:N,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:fe,src:O||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=v?.url,o=D?.url||t,a=z?.url||t;return m("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:y,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:k,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:B||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:N,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:O||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return m("section",{ref:V,"data-ui-component-id":"ImageWithText",className:s("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!n,"flex-col":!n&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!n&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":n,"aiui-dark":se==="dark"},oe),children:[n&&m("div",{className:s("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[m("div",{className:"image-with-text__header",children:[e(w,{as:"h3",size:4,html:I,className:"image-with-text__title"}),e(M,{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]"})]}),e("div",{className:s("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:m("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:q.left,width:q.width}}),r.map((t,o)=>e("div",{ref:a=>{A.current[o]=a},onClick:a=>ce(o,a),className:s("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]",p===o?"image-with-text__tab--active text-black":"text-white"),children:e(w,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!n&&m("div",{className:s("image-with-text__content flex flex-col",{"justify-center":!T,"justify-between":T,"w-full laptop:w-fit":d,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[m("div",{className:s("image-with-text__main-content",{"flex flex-col":T}),children:[m("div",{className:s("image-with-text__header",{"items-end justify-between gap-16 hidden laptop:flex":(i==="top"||i==="bottom")&&u?.text}),children:[m("div",{className:"image-with-text__title-wrapper flex flex-col",children:[e(w,{as:"h2",size:4,html:I,className:s("image-with-text__title",{"w-full":d,"text-left":d&&l==="left","text-center":d&&l==="center"})}),L&&e(M,{as:"p",size:d?4:3,html:L,className:s("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!d,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":d,"text-left":d&&l==="left","text-center":d&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(U,{href:X(u.link||"",W),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:te,children:u.text})]}),!d&&(_||P)&&m("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[P&&e("img",{src:P,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),_&&e(w,{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]"})]}),d&&e("div",{className:s("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:E.map((t,o)=>m("div",{className:s("image-with-text__item",{"text-center":l==="center"}),children:[m("div",{className:s("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(S,{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"}),e(w,{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})]}),e(M,{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]"})]},o))})]}),xe()]}),e("div",{ref:C,className:s("image-with-text__media-wrapper",{"w-[60%] 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":d,"laptop:basis-[63%] desktop:basis-[57%]":d&&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]":n,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:n?b?K():e(ee,{mode:"wait",children:e(Y.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:e(S,{source:J(),alt:r[p].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]"})},r[p].image?.url)}):b?K():e(S,{source:J(),className:s("image-with-text__image rounded-box laptop:rounded-box")})})]})});ie.displayName="ImageWithText";var De=ve(ie);export{De as default};
+"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import he,{useImperativeHandle as ge,useRef as h,useState as g,useEffect as Q}from"react";import{Heading as w,Picture as S,Text as M,Link as U}from"../../components/index.js";import{cn as s,getLocalizedPath as X}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{motion as Y,AnimatePresence as ee}from"framer-motion";const ye="image",ke="image_with_text",te=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("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"})}),ie=he.forwardRef(({data:ae,className:oe},le)=>{const{title:I,subtitle:L,desc:_,descIcon:P,image:v,padImage:D,mobileImage:z,theme:se="dark",items:E=[],layout:re="left",mediaType:ne="image",datalist:r=[],video:H,padVideo:j,mobVideo:R,button:u,textAlign:l="left"}=ae,i=re,{locale:W="us"}=_e(),V=h(null),y=h(null),k=h(null),N=h(null),C=h(null),[p,me]=g(0),A=h([]),[q,de]=g({left:0,width:0}),[f,$]=g(""),[B,F]=g(""),[O,Z]=g(""),n=r.length>0,b=ne==="video";be(V,{componentType:ye,componentName:ke,componentTitle:I,componentDescription:L}),ge(le,()=>V.current),Q(()=>{if(r.length>0){const t=A.current[p];if(t){const{offsetLeft:o,offsetWidth:a}=t;de({left:o,width:a})}}},[p,r.length]);const[G,pe]=g(!1);we(C,{once:!0,threshold:.01,callback:()=>{pe(!0)}}),Q(()=>{if(!G||!b)return;let t="",o="",a="";if(n&&r[p]){const c=r[p];t=c.video?.url||"",o=c.padVideo?.url||t,a=c.mobVideo?.url||t}else t=H?.url||"",o=j?.url||t,a=R?.url||t;t&&$(t),o&&F(o),a&&Z(a),setTimeout(()=>{[y.current?.querySelector("video"),k.current?.querySelector("video"),N.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[G,b,n,p,r,H?.url,j?.url,R?.url]);const ce=(t,o)=>{if(me(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),b&&n&&r[t]){const a=r[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&F(a.padVideo.url),a.mobVideo?.url&&Z(a.mobVideo.url),setTimeout(()=>{[y.current?.querySelector("video"),k.current?.querySelector("video"),N.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},xe=()=>!T||!u?.text?null:e("div",{className:s("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left","laptop:hidden":i==="top"||i==="bottom"}),children:e(U,{href:X(u.link||"",W),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:te,children:u.text})}),m=E.length>0,T=!!u,J=()=>{if(n&&r[p]){const t=r[p];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return v?`${v?.url},${D?.url||v?.url} 1024, ${z?.url||v?.url} 768`:""},K=()=>{if(n){const c=r[p],x=c.image?.url,ue=c.imgPad?.url||x,fe=c.imageMob?.url||x;return e(ee,{mode:"wait",children:e(Y.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:d("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:y,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:k,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:B||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:N,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:fe,src:O||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=v?.url,o=D?.url||t,a=z?.url||t;return d("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:y,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:k,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:B||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:N,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:O||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return d("section",{ref:V,"data-ui-component-id":"ImageWithText",className:s("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!n,"flex-col":!n&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!n&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":n,"aiui-dark":se==="dark"},oe),children:[n&&d("div",{className:s("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[d("div",{className:"image-with-text__header",children:[e(w,{as:"h3",size:4,html:I,className:"image-with-text__title"}),e(M,{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]"})]}),e("div",{className:s("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:d("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:q.left,width:q.width}}),r.map((t,o)=>e("div",{ref:a=>{A.current[o]=a},onClick:a=>ce(o,a),className:s("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]",p===o?"image-with-text__tab--active text-black":"text-white"),children:e(w,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!n&&d("div",{className:s("image-with-text__content flex flex-col",{"justify-center":!T,"justify-between":T,"w-full laptop:w-fit":m,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[d("div",{className:s("image-with-text__main-content",{"flex flex-col":T}),children:[d("div",{className:s("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&u?.text}),children:[d("div",{className:"image-with-text__title-wrapper flex flex-col",children:[e(w,{as:"h2",size:4,html:I,className:s("image-with-text__title",{"w-full":m,"text-left":m&&l==="left","text-center":m&&l==="center"})}),L&&e(M,{as:"p",size:m?4:3,html:L,className:s("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&l==="left","text-center":m&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(U,{href:X(u.link||"",W),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:te,children:u.text})]}),!m&&(_||P)&&d("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[P&&e("img",{src:P,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),_&&e(w,{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]"})]}),m&&e("div",{className:s("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:E.map((t,o)=>d("div",{className:s("image-with-text__item",{"text-center":l==="center"}),children:[d("div",{className:s("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(S,{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"}),e(w,{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})]}),e(M,{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]"})]},o))})]}),xe()]}),e("div",{ref:C,className:s("image-with-text__media-wrapper",{"w-[60%] 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":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&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]":n,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:n?b?K():e(ee,{mode:"wait",children:e(Y.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:e(S,{source:J(),alt:r[p].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]"})},r[p].image?.url)}):b?K():e(S,{source:J(),className:s("image-with-text__image rounded-box laptop:rounded-box")})})]})});ie.displayName="ImageWithText";var De=ve(ie);export{De as default};
 //# sourceMappingURL=ImageWithText.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us' } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    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          'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\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 && (\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 && (\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                'items-end justify-between gap-16 hidden laptop:flex':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'w-full': hasItems,\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          'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
+  "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    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          'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\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 && (\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 && (\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 flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'w-full': hasItems,\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          'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "Link", "cn", "getLocalizedPath", "withLayout", "useExposure", "useIntersectionObserverDelay", "useAiuiContext", "motion", "AnimatePresence", "componentType", "componentName", "ArrowRight", "ImageWithText", "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", "ImageWithText_default"]
 }

package/dist/esm/biz-components/Ksp/index.d.ts CHANGED Viewed

@@ -7,14 +7,26 @@ export interface KspCardItem {
     title?: string;
     /** 描述 */
     desc?: string;
-    /** 桌面端图片 URL */
-    image?: Media;
-    /** 移动端图片 URL */
+    /** 移动端图片 */
     mobImage?: Media;
-    /** 桌面端视频 URL */
-    video?: Media;
-    /** 移动端视频 URL */
+    /** 移动端视频 */
     mobVideo?: Media;
+    /** 平板端图片 (≥768px) */
+    tabletImage?: Media;
+    /** 平板端视频 (≥768px) */
+    tabletVideo?: Media;
+    /** 小桌面端图片 (≥1025px) */
+    laptopImage?: Media;
+    /** 小桌面端视频 (≥1025px) */
+    laptopVideo?: Media;
+    /** 桌面端图片 (≥1440px) */
+    desktopImage?: Media;
+    /** 桌面端视频 (≥1440px) */
+    desktopVideo?: Media;
+    /** 大桌面端图片 */
+    image?: Media;
+    /** 大桌面端视频 */
+    video?: Media;
 }
 /**
  * KSP 数据结构
@@ -27,6 +39,31 @@ export interface KspData {
     /** 主题，默认 light */
     theme?: Theme;
 }
+/**
+ * Ksp 组件语义化类名配置
+ */
+export interface KspClassNames {
+    /** 整体容器类名 */
+    root?: string;
+    /** 主标题类名 */
+    title?: string;
+    /** 卡片布局容器类名 */
+    layout?: string;
+    /** 单个卡片类名 */
+    card?: string;
+    /** 卡片视频类名 */
+    cardVideo?: string;
+    /** 卡片图片类名 */
+    cardImage?: string;
+    /** 卡片图片 img 元素类名 */
+    cardImageImg?: string;
+    /** 卡片内容区类名 */
+    cardContent?: string;
+    /** 卡片标题类名 */
+    cardTitle?: string;
+    /** 卡片描述类名 */
+    cardDesc?: string;
+}
 /**
  * Ksp 组件 Props
  */
@@ -35,6 +72,8 @@ export interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'class
     data: KspData;
     /** 自定义类名 */
     className?: string;
+    /** 语义化类名配置 */
+    classNames?: KspClassNames;
 }
 declare const _default: any;
 export default _default;

package/dist/esm/biz-components/Ksp/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as x,jsx as t,jsxs as d}from"react/jsx-runtime";import{Heading as w,Picture as n,Text as b}from"../../components/index.js";import{cn as k}from"../../helpers/utils.js";import{withLayout as r}from"../../shared/Styles.js";const g=({title:e,desc:s,image:p,mobImage:a,video:c,mobVideo:l,className:h,theme:o})=>d("div",{className:k("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":o==="dark"},h),children:[c&&l?d(x,{children:[t("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:p?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),t("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:l?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center"})]}):(p||a)&&t(n,{source:p?.url&&a?.url?`${p.url} 1920, ${a.url} 767`:p?.url||a?.url,alt:p?.alt||a?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),d("div",{className:"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",children:[t(w,{size:3,html:e,className:"ksp-card-title tablet:block hidden w-full break-all"}),t(w,{size:2,html:e,className:"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all"}),t(b,{size:2,html:s,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]"})]})]}),i={4:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},5:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},7:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},8:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},9:{0:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",8:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"}},m=(e,s)=>i[s]?.[e]||"";function u({data:e,className:s,...p}){const{title:a,items:c,theme:l="light"}=e;return d("section",{...p,"data-ui-component-id":"ksp",className:k("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":l==="dark"},s),children:[t(w,{as:"h1",size:4,html:a,className:"ksp-title laptop:text-center text-left text-white"}),t("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:c.map((h,o)=>t(g,{...h,className:m(o,c.length)},o))})]})}var y=r(u);export{y as default};
+"use client";import{jsx as s,jsxs as M}from"react/jsx-runtime";import{useMediaQuery as y}from"react-responsive";import{Heading as C,Picture as A,Text as H}from"../../components/index.js";import{cn as t}from"../../helpers/utils.js";import{withLayout as O}from"../../shared/Styles.js";const R=({title:d,desc:w,mobImage:e,mobVideo:m,tabletImage:h,tabletVideo:n,laptopImage:c,laptopVideo:k,desktopImage:p,desktopVideo:g,image:l,video:u,className:z,theme:L,classNames:a})=>{const N=y({query:"(max-width: 767px)"}),K=y({query:"(min-width: 768px) and (max-width: 1024px)"}),T=y({query:"(min-width: 1025px) and (max-width: 1439px)"}),j=()=>N?m||n||k||g||u:K?n||k||g||u:T?k||g||u:g||u,D=()=>N?e||h||c||p||l:K?h||c||p||l:T?c||p||l:p||l,v=j(),P=D(),I=()=>{const o=[],f=l?.url||p?.url,r=p?.url||l?.url,i=c?.url||r,b=h?.url||i,x=e?.url||b;return f&&o.push(f),r&&r!==f&&o.push(`${r} 1920`),i&&i!==r&&o.push(`${i} 1440`),b&&b!==i&&o.push(`${b} 1025`),x&&x!==b&&o.push(`${x} 768`),o.length>0?o.join(", "):void 0},$=!!v?.url,q=!!(e?.url||h?.url||c?.url||p?.url||l?.url);return M("div",{className:t("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":L==="dark"},z,a?.card),children:[$?s("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:v?.url,poster:P?.url,className:t("ksp-card-video absolute bottom-0 w-full object-cover",a?.cardVideo)}):q&&s(A,{source:I(),alt:P?.alt||"",className:t("ksp-card-image size-full",a?.cardImage),imgClassName:t("size-full object-cover object-bottom",a?.cardImageImg)}),M("div",{className:t("ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",a?.cardContent),children:[s(C,{size:3,html:d,className:t("ksp-card-title tablet:block hidden w-full",a?.cardTitle)}),s(C,{size:2,html:d,className:t("ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full",a?.cardTitle)}),s(H,{size:2,html:w,className:t("ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",a?.cardDesc)})]})]})},V={4:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},5:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},7:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},8:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},9:{0:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",8:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"}},E=(d,w)=>V[w]?.[d]||"";function F({data:d,className:w,classNames:e,...m}){const{title:h,items:n,theme:c="light"}=d;return M("section",{...m,"data-ui-component-id":"ksp",className:t("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},w,e?.root),children:[s(C,{as:"h1",size:4,html:h,className:t("ksp-title laptop:text-center text-left",e?.title)}),s("div",{className:t("ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3",e?.layout),children:n.map((k,p)=>s(R,{...k,className:E(p,n.length),classNames:e},p))})]})}var Y=O(F);export{Y as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Ksp/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u4E3B\u9898 */\n  theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={\n              image?.url && mobImage?.url ? `${image.url} 1920, ${mobImage.url} 767` : image?.url || mobImage?.url\n            }\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image size-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n        <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n        <Heading\n          size={2}\n          html={title}\n          className=\"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all\"\n        />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className, ...rest }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      {...rest}\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n      <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n        {items.map((item, index) => (\n          <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "theme", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "rest", "items", "item", "Ksp_default"]
+  "sourcesContent": ["'use client'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n  mobImage?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 */\n  mobVideo?: Media\n\n  /** \u5E73\u677F\u7AEF\u56FE\u7247 (\u2265768px) */\n  tabletImage?: Media\n  /** \u5E73\u677F\u7AEF\u89C6\u9891 (\u2265768px) */\n  tabletVideo?: Media\n\n  /** \u5C0F\u684C\u9762\u7AEF\u56FE\u7247 (\u22651025px) */\n  laptopImage?: Media\n  /** \u5C0F\u684C\u9762\u7AEF\u89C6\u9891 (\u22651025px) */\n  laptopVideo?: Media\n\n  /** \u684C\u9762\u7AEF\u56FE\u7247 (\u22651440px) */\n  desktopImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 (\u22651440px) */\n  desktopVideo?: Media\n  /** \u5927\u684C\u9762\u7AEF\u56FE\u7247 */\n  image?: Media\n  /** \u5927\u684C\u9762\u7AEF\u89C6\u9891 */\n  video?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6\u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E\n */\nexport interface KspClassNames {\n  /** \u6574\u4F53\u5BB9\u5668\u7C7B\u540D */\n  root?: string\n  /** \u4E3B\u6807\u9898\u7C7B\u540D */\n  title?: string\n  /** \u5361\u7247\u5E03\u5C40\u5BB9\u5668\u7C7B\u540D */\n  layout?: string\n  /** \u5355\u4E2A\u5361\u7247\u7C7B\u540D */\n  card?: string\n  /** \u5361\u7247\u89C6\u9891\u7C7B\u540D */\n  cardVideo?: string\n  /** \u5361\u7247\u56FE\u7247\u7C7B\u540D */\n  cardImage?: string\n  /** \u5361\u7247\u56FE\u7247 img \u5143\u7D20\u7C7B\u540D */\n  cardImageImg?: string\n  /** \u5361\u7247\u5185\u5BB9\u533A\u7C7B\u540D */\n  cardContent?: string\n  /** \u5361\u7247\u6807\u9898\u7C7B\u540D */\n  cardTitle?: string\n  /** \u5361\u7247\u63CF\u8FF0\u7C7B\u540D */\n  cardDesc?: string\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n  classNames?: KspClassNames\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n  classNames?: KspClassNames\n}\n\nconst ImageCard = ({\n  title,\n  desc,\n  // \u65B0\u7684\u65AD\u70B9\u5A92\u4F53\u5C5E\u6027\n  mobImage,\n  mobVideo,\n  tabletImage,\n  tabletVideo,\n  laptopImage,\n  laptopVideo,\n  desktopImage,\n  desktopVideo,\n  // \u4FDD\u7559\u65E7\u5C5E\u6027\u4F5C\u4E3A\u5927\u5C4F\u9ED8\u8BA4\u503C\n  image,\n  video,\n  className,\n  theme,\n  classNames,\n}: ImageCardProps) => {\n  // \u54CD\u5E94\u5F0F\u65AD\u70B9\u68C0\u6D4B\n  const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n  const isTablet = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n  const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n  // desktop \u53CA\u4EE5\u4E0A\u4F7F\u7528\u9ED8\u8BA4\n\n  // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u89C6\u9891\u6E90\uFF08\u5E26 fallback\uFF09\n  const getCurrentVideo = (): Media | undefined => {\n    if (isMobile) return mobVideo || tabletVideo || laptopVideo || desktopVideo || video\n    if (isTablet) return tabletVideo || laptopVideo || desktopVideo || video\n    if (isLaptop) return laptopVideo || desktopVideo || video\n    return desktopVideo || video\n  }\n\n  // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u5C01\u9762\u56FE\n  const getCurrentPoster = (): Media | undefined => {\n    if (isMobile) return mobImage || tabletImage || laptopImage || desktopImage || image\n    if (isTablet) return tabletImage || laptopImage || desktopImage || image\n    if (isLaptop) return laptopImage || desktopImage || image\n    return desktopImage || image\n  }\n\n  const currentVideo = getCurrentVideo()\n  const currentPoster = getCurrentPoster()\n\n  // \u6784\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6E90\n  const buildImageSource = (): string | undefined => {\n    const sources: string[] = []\n    const lgDesktop = image?.url || desktopImage?.url\n    const desktop = desktopImage?.url || image?.url\n    const laptop = laptopImage?.url || desktop\n    const tablet = tabletImage?.url || laptop\n    const mobile = mobImage?.url || tablet\n\n    if (lgDesktop) sources.push(lgDesktop)\n    if (desktop && desktop !== lgDesktop) sources.push(`${desktop} 1920`)\n    if (laptop && laptop !== desktop) sources.push(`${laptop} 1440`)\n    if (tablet && tablet !== laptop) sources.push(`${tablet} 1025`)\n    if (mobile && mobile !== tablet) sources.push(`${mobile} 768`)\n\n    return sources.length > 0 ? sources.join(', ') : undefined\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u89C6\u9891\n  const hasVideo = !!currentVideo?.url\n\n  // \u5224\u65AD\u662F\u5426\u6709\u4EFB\u4F55\u56FE\u7247\n  const hasAnyImage = !!(mobImage?.url || tabletImage?.url || laptopImage?.url || desktopImage?.url || image?.url)\n\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className,\n        classNames?.card\n      )}\n    >\n      {hasVideo ? (\n        <video\n          playsInline\n          autoPlay\n          muted\n          loop\n          src={currentVideo?.url}\n          poster={currentPoster?.url}\n          className={cn('ksp-card-video absolute bottom-0 w-full object-cover', classNames?.cardVideo)}\n        />\n      ) : (\n        hasAnyImage && (\n          <Picture\n            source={buildImageSource()}\n            alt={currentPoster?.alt || ''}\n            className={cn('ksp-card-image size-full', classNames?.cardImage)}\n            imgClassName={cn('size-full object-cover object-bottom', classNames?.cardImageImg)}\n          />\n        )\n      )}\n      <div className={cn('ksp-card-content desktop:p-6 lg-desktop:p-8 p-4', classNames?.cardContent)}>\n        <Heading\n          size={3}\n          html={title}\n          className={cn('ksp-card-title tablet:block hidden w-full', classNames?.cardTitle)}\n        />\n        <Heading\n          size={2}\n          html={title}\n          className={cn(\n            'ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full',\n            classNames?.cardTitle\n          )}\n        />\n        <Text\n          size={2}\n          html={desc}\n          className={cn(\n            'ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            classNames?.cardDesc\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className, classNames, ...rest }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      {...rest}\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className,\n        classNames?.root\n      )}\n    >\n      <Heading\n        as=\"h1\"\n        size={4}\n        html={title}\n        className={cn('ksp-title laptop:text-center text-left', classNames?.title)}\n      />\n      <div\n        className={cn(\n          'ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3',\n          classNames?.layout\n        )}\n      >\n        {items.map((item, index) => (\n          <ImageCard\n            key={index}\n            {...item}\n            className={getCardLayoutClass(index, items.length)}\n            classNames={classNames}\n          />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMediaQuery", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "mobImage", "mobVideo", "tabletImage", "tabletVideo", "laptopImage", "laptopVideo", "desktopImage", "desktopVideo", "image", "video", "className", "theme", "classNames", "isMobile", "isTablet", "isLaptop", "getCurrentVideo", "getCurrentPoster", "currentVideo", "currentPoster", "buildImageSource", "sources", "lgDesktop", "desktop", "laptop", "tablet", "mobile", "hasVideo", "hasAnyImage", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "rest", "items", "item", "Ksp_default"]
 }

package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Ne,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as u,useRef as n,useMemo as ge,useEffect as P,forwardRef as ve,useImperativeHandle as ye}from"react";import{debounce as xe}from"lodash";import{cn as a}from"../../helpers/utils.js";import{withLayout as be}from"../../shared/Styles.js";import Q from"../../components/button.js";import{VideoModal as he}from"../VideoModal/index.js";import{convertLexicalToHTML as W}from"@payloadcms/richtext-lexical/html";import{useInView as we}from"react-intersection-observer";import{useExposure as He}from"../../hooks/useExposure.js";import X from"../../helpers/ScrollLoadVideo.js";import{gsap as _}from"gsap";import{SplitText as Te}from"gsap/dist/SplitText";import{ScrollTrigger as Z}from"gsap/dist/ScrollTrigger";const ke="media_player_base",Me="video",A=({defaultConverters:f})=>({...f,text:k=>{const{node:t}=k;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ee=ve(({className:f="",id:k,onBtnClick:t,data:{title:g,videoTitle:v,btnText:y,youtubeId:S,video:V,mobileVideo:te,theme:$,img:B,shape:C,titleAnimation:x="fade-in",...re},...D},oe)=>{const{sticky:s}=re,[j,F]=u(!1),[q,ne]=u(0),[se,le]=u(0),[b,ie]=u(0),[U,M]=u(!1),h=n(null),Y=n(null),r=n(null),w=n(null),O=n(null),H=n(null),N=n(null),L=n(null),{ref:ae,inView:l}=we();ye(oe,()=>r.current);const T=typeof g=="string"?g:g&&W({data:g,converters:A}),R=typeof v=="string"?v:v&&W({data:v,converters:A});P(()=>{l?(h.current?.play(),F(!0)):(h.current?.pause(),F(!1))},[l]);const z=xe(()=>{if(r.current){const c=r.current.getBoundingClientRect(),i=window.innerHeight,d=window.scrollY||window.pageYOffset,o=c.bottom+d,p=document.documentElement.scrollHeight-o;ne(p>i?i:p)}if(r.current){const c=r.current.clientHeight,i=window.innerHeight;le(c+i)}},600);P(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),P(()=>{function c(){if(!w.current||x!=="fade-in")return;const d=w.current?.clientHeight||80;H.current=new Te(w.current,{type:"words",wordsClass:"word"});const o=H.current.words;_.set(o,{opacity:0}),N.current=Z.create({trigger:r.current,start:"top center-=10%",end:`top+=${d*1.5+80}px center-=10%`,scrub:!0,onUpdate:G=>{const p=G.progress,J=o.length,de=1/J,K=.5;o.forEach((pe,ue)=>{const me=ue/J*(1-K),fe=de*(1+K);let I=(p-me)/fe;I=Math.max(0,Math.min(I,1)),_.set(pe,{opacity:I})}),_.set(Y.current,{opacity:p})}})}function i(){L.current=Z.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:d=>{const o=d.progress;console.log("progress__",o),ie(o)}})}return l&&(c(),i()),()=>{H.current&&H.current.revert(),N.current&&N.current.kill(),L.current&&L.current.kill()}},[x,l]),He(O,{componentType:Me,componentName:ke,componentTitle:R});const ce=ge(()=>l&&b>0&&b<.9?3:l?2:1,[b,l]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return m(Ne,{children:[s&&e("div",{...D,ref:r,className:a("relative z-10",E,{"aiui-dark":$==="dark","rounded-box":C==="rounded"},f),children:e("div",{ref:ae,children:!x&&m("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!j&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),R&&j&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:R}}),y&&e(Q,{variant:"link",className:a("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{M(!0),t&&t?.()},children:y})]})})}),m("div",{...s?{}:D,style:s?{marginBottom:`-${q}px`,marginTop:`-${se}px`,zIndex:ce}:{},className:a("relative",f),children:[e("div",{className:"sticky top-0 ",children:m("div",{id:k,className:a("relative overflow-hidden",s?"h-screen w-full":E,{"aiui-dark":$==="dark","rounded-box":C==="rounded"}),children:[x==="fade-in"&&T&&e("div",{children:e("div",{ref:w,className:"media-player-base-title lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}})}),y&&e("div",{className:"flex items-center justify-center",children:e(Q,{variant:"link",className:a("media-player-base-button member-equity-button-secondary text-btn-primary-foreground z-20 translate-y-10"),onClick:()=>{M(!0),t&&t?.()},children:y})}),m("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-b*100}vh`},children:[e(X,{videoRef:h,poster:B?.url||"",src:V?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(X,{videoRef:h,poster:B?.url||"",src:te?.url||V?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),s&&e("div",{className:a(s&&"relative box-content block",E),style:s?{height:`${q}px`}:{},ref:O})]}),U&&S&&e(he,{visible:U,youTubeId:S,onCloseModal:()=>M(!1)})]})});ee.displayName="MediaPlayerBase";var je=be(ee);export{je as default};
+"use client";import{Fragment as Ne,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as v,useRef as r,useMemo as ye,useEffect as _,forwardRef as xe,useImperativeHandle as he}from"react";import{debounce as be}from"lodash";import{cn as i}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import X from"../../components/button.js";import{VideoModal as He}from"../VideoModal/index.js";import{convertLexicalToHTML as Z}from"@payloadcms/richtext-lexical/html";import{useInView as Te}from"react-intersection-observer";import{useExposure as ke}from"../../hooks/useExposure.js";import A from"../../helpers/ScrollLoadVideo.js";import{gsap as d}from"gsap";import{SplitText as ee}from"gsap/dist/SplitText";import{ScrollTrigger as S}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Le="video";d.registerPlugin(S,ee);const te=({defaultConverters:y})=>({...y,text:L=>{const{node:t}=L;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),re=xe(({className:y="",id:L,onBtnClick:t,data:{title:x,videoTitle:h,btnText:b,youtubeId:V,video:$,mobileVideo:ne,theme:B,img:C,shape:D,titleAnimation:w="fade-in",...oe},...F},se)=>{const{sticky:n}=oe,[j,q]=v(!1),[U,le]=v(0),[ie,ae]=v(0),[H,ce]=v(0),[Y,N]=v(!1),T=r(null),O=r(null),o=r(null),k=r(null),G=r(null),M=r(null),u=r(null),R=r(null),z=r(null),{ref:de,inView:l}=Te();he(se,()=>o.current);const m=typeof x=="string"?x:x&&Z({data:x,converters:te}),J=typeof h=="string"?h:h&&Z({data:h,converters:te});_(()=>{l?(T.current?.play(),q(!0)):(T.current?.pause(),q(!1))},[l]);const I=be(()=>{if(o.current){const f=o.current.getBoundingClientRect(),a=window.innerHeight,g=window.scrollY||window.pageYOffset,s=f.bottom+g,c=document.documentElement.scrollHeight-s;le(c>a?a:c)}if(o.current){const f=o.current.clientHeight,a=window.innerHeight;ae(f+a)}},600);_(()=>(I(),window.addEventListener("resize",I),()=>{window.removeEventListener("resize",I)}),[]),_(()=>{function f(){if(!k.current||w!=="fade-in")return;const g=k.current?.clientHeight||80;M.current=new ee(k.current,{type:"words",wordsClass:"word"});const s=M.current.words;d.set(s,{opacity:0}),u.current&&d.set(u.current,{opacity:0}),R.current=S.create({trigger:o.current,start:"top center-=10%",end:`top+=${g*1.5+80}px center-=10%`,scrub:!0,onUpdate:K=>{const c=K.progress,Q=s.length,ue=1/Q,W=.5;s.forEach((me,fe)=>{const ge=fe/Q*(1-W),ve=ue*(1+W);let P=(c-ge)/ve;P=Math.max(0,Math.min(P,1)),d.set(me,{opacity:P})}),d.set(O.current,{opacity:c}),u.current&&d.set(u.current,{opacity:c>=.6?1:0})}})}function a(){z.current=S.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const s=g.progress;console.log("progress__",s),ce(s)}})}return l&&(f(),a()),()=>{M.current&&M.current.revert(),R.current&&R.current.kill(),z.current&&z.current.kill()}},[w,l]),ke(G,{componentType:Le,componentName:Me,componentTitle:m});const pe=ye(()=>l&&H>0&&H<.9?3:l?2:1,[H,l]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(Ne,{children:[n&&e("div",{...F,ref:o,className:i("pointer-events-none relative z-10",E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},y),children:e("div",{ref:de,children:!w&&p("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[m&&!j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),J&&j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:J}}),b&&e(X,{variant:"link",className:i("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]})})}),p("div",{...n?{}:F,style:n?{marginBottom:`-${U}px`,marginTop:`-${ie}px`,zIndex:pe}:{zIndex:5},className:i("relative",y),children:[e("div",{className:"sticky top-0 ",children:p("div",{id:L,className:i("relative overflow-hidden",n?"h-screen w-full":E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[w==="fade-in"&&p("div",{className:i("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",n?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[m&&e("div",{ref:k,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),b&&e(X,{ref:u,variant:"link",className:i("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]}),p("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-H*100}vh`},children:[e(A,{videoRef:T,poster:C?.url||"",src:$?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(A,{videoRef:T,poster:C?.url||"",src:ne?.url||$?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:O,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),n&&e("div",{className:i(n&&"pointer-events-none relative box-content block",E),style:n?{height:`${U}px`}:{},ref:G})]}),Y&&V&&e(He,{visible:Y,youTubeId:V,onCloseModal:()=>N(!1)})]})});re.displayName="MediaPlayerBase";var je=we(re);export{je as default};
 //# sourceMappingURL=index.js.map