npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1762494080693 → 1.0.26-alpha.1762495505276 - Mend

@anker-in/headless-ui 1.0.26-alpha.1762494080693 → 1.0.26-alpha.1762495505276

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

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var pe=Object.create;var k=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var ce=(a,s)=>{for(var r in s)k(a,r,{get:s[r],enumerable:!0})},q=(a,s,r,v)=>{if(s&&typeof s=="object"||typeof s=="function")for(let x of re(s))!ne.call(a,x)&&x!==r&&k(a,x,{get:()=>s[x],enumerable:!(v=de(s,x))||v.enumerable});return a};var he=(a,s,r)=>(r=a!=null?pe(xe(a)):{},q(s||!a||!a.__esModule?k(r,"default",{value:a,enumerable:!0}):r,a)),ge=a=>q(k({},"__esModule",{value:!0}),a);var _e={};ce(_e,{default:()=>fe});module.exports=ge(_e);var e=require("react/jsx-runtime"),i=he(require("react")),m=require("../../components/index.js"),g=require("../../helpers/utils.js"),G=require("../../shared/Styles.js"),J=require("../../hooks/useExposure.js"),y=require("../../hooks/useIntersectionObserver.js"),_=require("framer-motion");const ue="image",ve="image_with_text",B=i.default.forwardRef(({data:a,className:s},r)=>{const{title:v,subtitle:x,desc:b,descIcon:N,image:w,padImage:V,mobileImage:E,theme:T="dark",items:H=[],imagePosition:K,layout:Q,mediaType:U="image",datalist:n=[],video:S,padVideo:W,mobVideo:z,poster:X,padPoster:Y,mobPoster:Z}=a,o=Q||K||"left",I=(0,i.useRef)(null),P=(0,i.useRef)(null),D=(0,i.useRef)(null),L=(0,i.useRef)(null),[c,ee]=(0,i.useState)(0),R=(0,i.useRef)([]),[j,te]=(0,i.useState)({left:0,width:0}),[f,ie]=(0,i.useState)(""),[A,ae]=(0,i.useState)(""),[$,oe]=(0,i.useState)("");(0,J.useExposure)(I,{componentType:ue,componentName:ve,componentTitle:v,componentDescription:x}),(0,i.useImperativeHandle)(r,()=>I.current),(0,i.useEffect)(()=>{if(n.length>0){const t=R.current[c];if(t){const{offsetLeft:d,offsetWidth:u}=t;te({left:d,width:u})}}},[c,n.length]),(0,y.useIntersectionObserverDelay)(P,{once:!0,threshold:.1,callback:()=>{S?.url&&ie(S.url)}}),(0,y.useIntersectionObserverDelay)(D,{once:!0,threshold:.1,callback:()=>{W?.url&&ae(W.url)}}),(0,y.useIntersectionObserverDelay)(L,{once:!0,threshold:.1,callback:()=>{z?.url&&oe(z.url)}});const le=(t,d)=>{ee(t),d.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},p=n.length>0,F=U==="video",l=H.length>0,C=()=>{if(p&&n[c]){const t=n[c];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return w?`${w.url},${V?.url||w.url} 1024, ${E?.url||w.url} 768`:""},O=()=>{if(p){const h=n[c],M=h.poster?.url||h.image?.url,se=h.padPoster?.url||h.imgPad?.url||M,me=h.mobPoster?.url||h.imageMob?.url||M;return(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:M,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:se,src:A||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:me,src:$||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},h.video?.url||h.image.url)})}const t=X?.url||w?.url,d=Y?.url||V?.url||t,u=Z?.url||E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:d,src:A||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:u,src:$||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return(0,e.jsxs)("section",{ref:I,"data-ui-component-id":"ImageWithText",className:(0,g.cn)("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&(o==="top"||o==="bottom"),"flex-col laptop:flex-row":!p&&(o==="left"||o==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"image-with-text--dark text-white":T==="dark","image-with-text--light text-[#1f1f1f]":T==="light","aiui-dark":l&&T==="dark"},s),children:[p&&(0,e.jsxs)("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(m.Heading,{as:"h3",size:4,html:v,className:"image-with-text__title"}),(0,e.jsx)(m.Text,{as:"p",size:1,html:b,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:j.left,width:j.width}}),n.map((t,d)=>(0,e.jsx)("div",{ref:u=>{R.current[d]=u},onClick:u=>le(d,u),className:(0,g.cn)("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",c===d?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(m.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},d))]})})]}),!p&&(0,e.jsxs)("div",{className:(0,g.cn)("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":l,"order-1 laptop:order-2":l&&o==="left","order-1":l&&o==="right"||!l&&(o==="top"||o==="left"),"order-2":!l&&(o==="bottom"||o==="right")}),children:[(0,e.jsx)(m.Heading,{as:"h2",size:4,html:v,className:(0,g.cn)("image-with-text__title",{"w-full text-left":l})}),x&&(0,e.jsx)(m.Text,{as:"p",size:l?4:3,html:x,className:(0,g.cn)("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!l,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":l})}),!l&&(b||N)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[N&&(0,e.jsx)("img",{src:N,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),b&&(0,e.jsx)(m.Heading,{as:"h4",size:5,html:b,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),l&&(0,e.jsx)("div",{className:"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:H.map((t,d)=>(0,e.jsxs)("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,e.jsxs)("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[(0,e.jsx)("img",{src:t.icon,alt:"icon",className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),(0,e.jsx)(m.Heading,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(m.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},d))})]}),(0,e.jsx)("div",{className:(0,g.cn)("image-with-text__media-wrapper",{"order-1":!p&&(o==="top"||o==="left"),"order-2":!p&&(o==="bottom"||o==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":l,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="right","relative w-full flex-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]":p}),children:p?F?O():(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(m.Picture,{source:C(),alt:n[c].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},n[c].image.url)}):F?O():(0,e.jsx)(m.Picture,{source:C(),className:(0,g.cn)("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!l})})})]})});B.displayName="ImageWithText";var fe=(0,G.withLayout)(B);
+"use strict";"use client";var pe=Object.create;var k=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var ce=(a,m)=>{for(var r in m)k(a,r,{get:m[r],enumerable:!0})},q=(a,m,r,v)=>{if(m&&typeof m=="object"||typeof m=="function")for(let x of re(m))!ne.call(a,x)&&x!==r&&k(a,x,{get:()=>m[x],enumerable:!(v=de(m,x))||v.enumerable});return a};var he=(a,m,r)=>(r=a!=null?pe(xe(a)):{},q(m||!a||!a.__esModule?k(r,"default",{value:a,enumerable:!0}):r,a)),ge=a=>q(k({},"__esModule",{value:!0}),a);var _e={};ce(_e,{default:()=>fe});module.exports=ge(_e);var e=require("react/jsx-runtime"),i=he(require("react")),s=require("../../components/index.js"),g=require("../../helpers/utils.js"),G=require("../../shared/Styles.js"),J=require("../../hooks/useExposure.js"),y=require("../../hooks/useIntersectionObserver.js"),_=require("framer-motion");const ue="image",ve="image_with_text",B=i.default.forwardRef(({data:a,className:m},r)=>{const{title:v,subtitle:x,desc:b,descIcon:N,image:w,padImage:V,mobileImage:E,theme:T="dark",items:H=[],imagePosition:K,layout:Q,mediaType:U="image",datalist:n=[],video:S,padVideo:W,mobVideo:z,poster:X,padPoster:Y,mobPoster:Z}=a,o=Q||K||"left",I=(0,i.useRef)(null),P=(0,i.useRef)(null),D=(0,i.useRef)(null),L=(0,i.useRef)(null),[c,ee]=(0,i.useState)(0),R=(0,i.useRef)([]),[j,te]=(0,i.useState)({left:0,width:0}),[f,ie]=(0,i.useState)(""),[A,ae]=(0,i.useState)(""),[$,oe]=(0,i.useState)("");(0,J.useExposure)(I,{componentType:ue,componentName:ve,componentTitle:v,componentDescription:x}),(0,i.useImperativeHandle)(r,()=>I.current),(0,i.useEffect)(()=>{if(n.length>0){const t=R.current[c];if(t){const{offsetLeft:d,offsetWidth:u}=t;te({left:d,width:u})}}},[c,n.length]),(0,y.useIntersectionObserverDelay)(P,{once:!0,threshold:.1,callback:()=>{S?.url&&ie(S.url)}}),(0,y.useIntersectionObserverDelay)(D,{once:!0,threshold:.1,callback:()=>{W?.url&&ae(W.url)}}),(0,y.useIntersectionObserverDelay)(L,{once:!0,threshold:.1,callback:()=>{z?.url&&oe(z.url)}});const le=(t,d)=>{ee(t),d.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},p=n.length>0,F=U==="video",l=H.length>0,C=()=>{if(p&&n[c]){const t=n[c];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return w?`${w.url},${V?.url||w.url} 1024, ${E?.url||w.url} 768`:""},O=()=>{if(p){const h=n[c],M=h.poster?.url||h.image?.url,se=h.padPoster?.url||h.imgPad?.url||M,me=h.mobPoster?.url||h.imageMob?.url||M;return(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:M,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:se,src:A||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:me,src:$||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},h.video?.url||h.image.url)})}const t=X?.url||w?.url,d=Y?.url||V?.url||t,u=Z?.url||E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:d,src:A||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:u,src:$||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return(0,e.jsxs)("section",{ref:I,"data-ui-component-id":"ImageWithText",className:(0,g.cn)("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&(o==="top"||o==="bottom"),"flex-col laptop:flex-row":!p&&(o==="left"||o==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"image-with-text--dark text-white":T==="dark","image-with-text--light text-[#1f1f1f]":T==="light","aiui-dark":l&&T==="dark"},m),children:[p&&(0,e.jsxs)("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(s.Heading,{as:"h3",size:4,html:v,className:"image-with-text__title"}),(0,e.jsx)(s.Text,{as:"p",size:1,html:b,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:j.left,width:j.width}}),n.map((t,d)=>(0,e.jsx)("div",{ref:u=>{R.current[d]=u},onClick:u=>le(d,u),className:(0,g.cn)("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",c===d?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(s.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},d))]})})]}),!p&&(0,e.jsxs)("div",{className:(0,g.cn)("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":l,"order-1 laptop:order-2":l&&o==="left","order-1":l&&o==="right"||!l&&(o==="top"||o==="left"),"order-2":!l&&(o==="bottom"||o==="right")}),children:[(0,e.jsx)(s.Heading,{as:"h2",size:4,html:v,className:(0,g.cn)("image-with-text__title",{"w-full text-left":l})}),x&&(0,e.jsx)(s.Text,{as:"p",size:l?4:3,html:x,className:(0,g.cn)("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!l,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":l})}),!l&&(b||N)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[N&&(0,e.jsx)("img",{src:N,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),b&&(0,e.jsx)(s.Heading,{as:"h4",size:5,html:b,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),l&&(0,e.jsx)("div",{className:"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:H.map((t,d)=>(0,e.jsxs)("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,e.jsxs)("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[(0,e.jsx)(s.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),(0,e.jsx)(s.Heading,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(s.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},d))})]}),(0,e.jsx)("div",{className:(0,g.cn)("image-with-text__media-wrapper",{"order-1":!p&&(o==="top"||o==="left"),"order-2":!p&&(o==="bottom"||o==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":l,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":l&&o==="right","relative w-full flex-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]":p}),children:p?F?O():(0,e.jsx)(_.AnimatePresence,{mode:"wait",children:(0,e.jsx)(_.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(s.Picture,{source:C(),alt:n[c].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},n[c].image.url)}):F?O():(0,e.jsx)(s.Picture,{source:C(),className:(0,g.cn)("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!l})})})]})});B.displayName="ImageWithText";var fe=(0,G.withLayout)(B);
 //# sourceMappingURL=ImageWithText.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.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 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    imagePosition,\n    layout,\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    poster,\n    padPoster,\n    mobPoster,\n  } = data\n\n  // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n  const effectiveLayout = layout || imagePosition || 'left'\n\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\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  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  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (video?.url) {\n        setLoadedDesktopVideoSrc(video.url)\n      }\n    },\n  })\n\n  // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(tabletVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (padVideo?.url) {\n        setLoadedTabletVideoSrc(padVideo.url)\n      }\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobVideo?.url) {\n        setLoadedMobileVideoSrc(mobVideo.url)\n      }\n    },\n  })\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\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  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n      const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n      const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.mobPoster?.url || 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 overflow-hidden rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n    const desktopPoster = poster?.url || image?.url\n    const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n    const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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',\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          '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          'image-with-text--dark text-white': theme === 'dark',\n          'image-with-text--light text-[#1f1f1f]': theme === 'light',\n          'aiui-dark': hasItems && theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n            />\n          </div>\n\n          <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n            <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] 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 relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\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 justify-center', {\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full items-start laptop:w-fit': hasItems,\n            // order\u63A7\u5236\n            'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n            'order-1': (hasItems && effectiveLayout === 'right') || (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n            'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          })}\n        >\n          <Heading\n            as={'h2'}\n            size={4}\n            html={title}\n            className={cn('image-with-text__title', {\n              'w-full text-left': hasItems,\n            })}\n          />\n          {subtitle && (\n            <Text\n              as={'p'}\n              size={hasItems ? 4 : 3}\n              html={subtitle}\n              className={cn('image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]', {\n                'laptop:mt-[16px]': !hasItems,\n                'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n              })}\n            />\n          )}\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 src={descIcon} alt=\"icon\" className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\" />\n              )}\n              {desc && (\n                <Heading\n                  as={'h4'}\n                  size={5}\n                  html={desc}\n                  className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n                />\n              )}\n            </div>\n          )}\n\n          {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && (\n            <div className=\"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n              {items.map((item: ImageWithTextItem, index: number) => (\n                <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n                  <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n                    <img\n                      src={item.icon}\n                      alt=\"icon\"\n                      className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n                    />\n                    <Heading\n                      size={5}\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 -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        className={cn('image-with-text__media-wrapper', {\n          // \u57FA\u7840\u6A21\u5F0F\n          'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n          'order-2': !isTabMode && (effectiveLayout === 'bottom' || 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': hasItems,\n          'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full flex-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        })}\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-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\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\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n            })}\n          />\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 } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.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 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    imagePosition,\n    layout,\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    poster,\n    padPoster,\n    mobPoster,\n  } = data\n\n  // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n  const effectiveLayout = layout || imagePosition || 'left'\n\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\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  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  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (video?.url) {\n        setLoadedDesktopVideoSrc(video.url)\n      }\n    },\n  })\n\n  // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(tabletVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (padVideo?.url) {\n        setLoadedTabletVideoSrc(padVideo.url)\n      }\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobVideo?.url) {\n        setLoadedMobileVideoSrc(mobVideo.url)\n      }\n    },\n  })\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\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  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n      const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n      const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.mobPoster?.url || 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 overflow-hidden rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n    const desktopPoster = poster?.url || image?.url\n    const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n    const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\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 hidden h-full w-full object-cover lg-desktop:block\"\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 hidden tablet:block lg-desktop: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 block tablet:hidden\"\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',\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          '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          'image-with-text--dark text-white': theme === 'dark',\n          'image-with-text--light text-[#1f1f1f]': theme === 'light',\n          'aiui-dark': hasItems && theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n            />\n          </div>\n\n          <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n            <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] 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 relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\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 justify-center', {\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full items-start laptop:w-fit': hasItems,\n            // order\u63A7\u5236\n            'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n            'order-1':\n              (hasItems && effectiveLayout === 'right') ||\n              (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n            'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          })}\n        >\n          <Heading\n            as={'h2'}\n            size={4}\n            html={title}\n            className={cn('image-with-text__title', {\n              'w-full text-left': hasItems,\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 mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n                {\n                  'laptop:mt-[16px]': !hasItems,\n                  'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                }\n              )}\n            />\n          )}\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 h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n                />\n              )}\n              {desc && (\n                <Heading\n                  as={'h4'}\n                  size={5}\n                  html={desc}\n                  className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n                />\n              )}\n            </div>\n          )}\n\n          {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && (\n            <div className=\"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n              {items.map((item: ImageWithTextItem, index: number) => (\n                <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n                  <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n                    <Picture\n                      source={item.icon?.url}\n                      alt={item.icon?.alt}\n                      className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n                    />\n                    <Heading\n                      size={5}\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 -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        className={cn('image-with-text__media-wrapper', {\n          // \u57FA\u7840\u6A21\u5F0F\n          'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n          'order-2': !isTabMode && (effectiveLayout === 'bottom' || 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          'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full flex-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        })}\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-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\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\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n            })}\n          />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
   "names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
 }

package/dist/cjs/biz-components/ImageWithText/types.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { Media, Theme } from '../../types/props.js';
 export interface ImageWithTextItem {
     /** 功能图标 */
-    icon: string;
+    icon: Media;
     /** 功能标题 */
     text: string;
     /** 功能描述 */

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

@@ -1,2 +1,2 @@
-"use strict";var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var g=(i,e,d,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!r.call(i,t)&&t!==d&&o(i,t,{get:()=>e[t],enumerable:!(a=m(e,t))||a.enumerable});return i};var p=i=>g(o({},"__esModule",{value:!0}),i);var M={};module.exports=p(M);
+"use strict";var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var p=(i,e,d,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!r.call(i,t)&&t!==d&&o(i,t,{get:()=>e[t],enumerable:!(a=m(e,t))||a.enumerable});return i};var g=i=>p(o({},"__esModule",{value:!0}),i);var M={};module.exports=g(M);
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/types.ts"],
-  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n  /** \u529F\u80FD\u56FE\u6807 */\n  icon: string\n  /** \u529F\u80FD\u6807\u9898 */\n  text: string\n  /** \u529F\u80FD\u63CF\u8FF0 */\n  desc: string\n}\n\nexport interface ImageWithTextTabItem {\n  /**\n   * \u684C\u9762\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n   */\n  image: Media\n  /**\n   * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n   */\n  imgPad?: Media\n  /**\n   * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n   */\n  imageMob?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  video?: Media\n  /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  padVideo?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  mobVideo?: Media\n  /**\n   * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n   * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n   */\n  poster?: Media\n  /**\n   * @deprecated \u63A8\u8350\u4F7F\u7528 imgPad \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n   * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n   */\n  padPoster?: Media\n  /**\n   * @deprecated \u63A8\u8350\u4F7F\u7528 imageMob \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n   * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n   */\n  mobPoster?: Media\n  /** Tab \u6807\u9898 */\n  title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\n\nexport interface ImageWithTextProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n    desc?: string\n    /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n    descIcon?: string\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n    theme?: Theme\n    /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n    layout?: LayoutPosition\n    /** @deprecated \u4F7F\u7528 layout \u4EE3\u66FF\u3002\u56FE\u7247\u4F4D\u7F6E\uFF08\u5411\u540E\u517C\u5BB9\u7528\uFF09 */\n    imagePosition?: 'left' | 'right'\n    /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n    mediaType?: MediaType\n    /**\n     * PC\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n     */\n    image?: Media\n    /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    video?: Media\n    /**\n     * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n     */\n    padImage?: Media\n    /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    padVideo?: Media\n    /**\n     * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n     */\n    mobileImage?: Media\n    /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    mobVideo?: Media\n    /**\n     * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n     * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n     */\n    poster?: Media\n    /**\n     * @deprecated \u63A8\u8350\u4F7F\u7528 padImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n     * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n     */\n    padPoster?: Media\n    /**\n     * @deprecated \u63A8\u8350\u4F7F\u7528 mobileImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n     * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n     */\n    mobPoster?: Media\n    /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n    items?: ImageWithTextItem[]\n    /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n    datalist?: ImageWithTextTabItem[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n  /** \u529F\u80FD\u56FE\u6807 */\n  icon: Media\n  /** \u529F\u80FD\u6807\u9898 */\n  text: string\n  /** \u529F\u80FD\u63CF\u8FF0 */\n  desc: string\n}\n\nexport interface ImageWithTextTabItem {\n  /**\n   * \u684C\u9762\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n   */\n  image: Media\n  /**\n   * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n   */\n  imgPad?: Media\n  /**\n   * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n   */\n  imageMob?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  video?: Media\n  /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  padVideo?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  mobVideo?: Media\n  /**\n   * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n   * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n   */\n  poster?: Media\n  /**\n   * @deprecated \u63A8\u8350\u4F7F\u7528 imgPad \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n   * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n   */\n  padPoster?: Media\n  /**\n   * @deprecated \u63A8\u8350\u4F7F\u7528 imageMob \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n   * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n   */\n  mobPoster?: Media\n  /** Tab \u6807\u9898 */\n  title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\n\nexport interface ImageWithTextProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n    desc?: string\n    /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n    descIcon?: string\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n    theme?: Theme\n    /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n    layout?: LayoutPosition\n    /** @deprecated \u4F7F\u7528 layout \u4EE3\u66FF\u3002\u56FE\u7247\u4F4D\u7F6E\uFF08\u5411\u540E\u517C\u5BB9\u7528\uFF09 */\n    imagePosition?: 'left' | 'right'\n    /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n    mediaType?: MediaType\n    /**\n     * PC\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n     */\n    image?: Media\n    /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    video?: Media\n    /**\n     * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n     */\n    padImage?: Media\n    /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    padVideo?: Media\n    /**\n     * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n     */\n    mobileImage?: Media\n    /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    mobVideo?: Media\n    /**\n     * @deprecated \u63A8\u8350\u4F7F\u7528 image \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n     * \u684C\u9762\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n     */\n    poster?: Media\n    /**\n     * @deprecated \u63A8\u8350\u4F7F\u7528 padImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n     * \u5E73\u677F\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n     */\n    padPoster?: Media\n    /**\n     * @deprecated \u63A8\u8350\u4F7F\u7528 mobileImage \u5B57\u6BB5\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\n     * \u79FB\u52A8\u7AEF\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF0C\u5411\u540E\u517C\u5BB9\uFF09\n     */\n    mobPoster?: Media\n    /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n    items?: ImageWithTextItem[]\n    /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n    datalist?: ImageWithTextTabItem[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Media } from '../../types/props.js';
 /**
  * KSP 卡片项数据结构
  */
@@ -8,13 +9,13 @@ export interface KspCardItem {
     /** 描述 */
     desc?: string;
     /** 桌面端图片 URL */
-    imageUrl?: string;
+    image?: Media;
     /** 移动端图片 URL */
-    mobImageUrl?: string;
+    mobImage?: Media;
     /** 桌面端视频 URL */
-    videoUrl?: string;
+    video?: Media;
     /** 移动端视频 URL */
-    mobVideoUrl?: string;
+    mobVideo?: Media;
 }
 /**
  * KSP 数据结构

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

@@ -1,2 +1,2 @@
-"use strict";var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var w=(a,p)=>{for(var l in p)m(a,l,{get:p[l],enumerable:!0})},f=(a,p,l,t)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of k(p))!h.call(a,o)&&o!==l&&m(a,o,{get:()=>p[o],enumerable:!(t=n(p,o))||t.enumerable});return a};var b=a=>f(m({},"__esModule",{value:!0}),a);var v={};w(v,{default:()=>g});module.exports=b(v);var e=require("react/jsx-runtime"),i=require("../../components/index.js"),d=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const s=({title:a,desc:p,imageUrl:l,mobImageUrl:t,videoUrl:o,mobVideoUrl:r,className:c})=>(0,e.jsxs)("div",{className:(0,d.cn)("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",c),children:[o&&r?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o,poster:l,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:r,poster:t,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(l||t)&&(0,e.jsx)(i.Picture,{source:`${l}, ${t} 768`,className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,e.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,html:a,className:"ksp-card-title hidden w-full tablet:block"}),(0,e.jsx)(i.Heading,{size:2,html:a,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,e.jsx)(i.Text,{size:2,html:p,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function N({data:a,className:p}){const{title:l,items:t}=a;return(0,e.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,d.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]",p),children:[(0,e.jsx)(i.Heading,{as:"h1",size:4,html:l,className:"ksp-title text-left text-white laptop:text-center"}),(0,e.jsxs)("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[(0,e.jsxs)("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),(0,e.jsx)(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),(0,e.jsx)(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),(0,e.jsxs)("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[(0,e.jsx)(s,{className:"h-[240px] w-[100%]",...t[0]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[1]}),(0,e.jsx)(s,{className:"w-[50%]",...t[2]})]}),(0,e.jsx)(s,{className:"max-h-[240px] w-[100%]",...t[6]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[3]}),(0,e.jsx)(s,{className:"w-[50%]",...t[4]})]}),(0,e.jsx)(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var g=(0,x.withLayout)(N);
+"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var w=(a,p)=>{for(var l in p)d(a,l,{get:p[l],enumerable:!0})},f=(a,p,l,t)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of k(p))!h.call(a,o)&&o!==l&&d(a,o,{get:()=>p[o],enumerable:!(t=n(p,o))||t.enumerable});return a};var N=a=>f(d({},"__esModule",{value:!0}),a);var v={};w(v,{default:()=>u});module.exports=N(v);var e=require("react/jsx-runtime"),i=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const s=({title:a,desc:p,image:l,mobImage:t,video:o,mobVideo:r,className:c})=>(0,e.jsxs)("div",{className:(0,m.cn)("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",c),children:[o&&r?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o?.url,poster:l?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:r?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(l||t)&&(0,e.jsx)(i.Picture,{source:l?.url||t?.url,alt:l?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,e.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,e.jsx)(i.Heading,{size:3,html:a,className:"ksp-card-title hidden w-full tablet:block"}),(0,e.jsx)(i.Heading,{size:2,html:a,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,e.jsx)(i.Text,{size:2,html:p,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function b({data:a,className:p}){const{title:l,items:t}=a;return(0,e.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,m.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]",p),children:[(0,e.jsx)(i.Heading,{as:"h1",size:4,html:l,className:"ksp-title text-left text-white laptop:text-center"}),(0,e.jsxs)("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[(0,e.jsxs)("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),(0,e.jsx)(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),(0,e.jsx)(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[(0,e.jsx)(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),(0,e.jsx)(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),(0,e.jsxs)("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[(0,e.jsx)(s,{className:"h-[240px] w-[100%]",...t[0]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[1]}),(0,e.jsx)(s,{className:"w-[50%]",...t[2]})]}),(0,e.jsx)(s,{className:"max-h-[240px] w-[100%]",...t[6]}),(0,e.jsxs)("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[(0,e.jsx)(s,{className:"w-[50%]",...t[3]}),(0,e.jsx)(s,{className:"w-[50%]",...t[4]})]}),(0,e.jsx)(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var u=(0,x.withLayout)(b);
 //# sourceMappingURL=index.js.map

package/dist/cjs/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'\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  imageUrl?: string\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImageUrl?: string\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  videoUrl?: string\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideoUrl?: string\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}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\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}\n\nconst ImageCard = ({\n  title,\n  desc,\n  imageUrl,\n  mobImageUrl,\n  videoUrl,\n  mobVideoUrl,\n  className,\n}: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n      {videoUrl && mobVideoUrl ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={videoUrl}\n            poster={imageUrl}\n            className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideoUrl}\n            poster={mobImageUrl}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (imageUrl || mobImageUrl) && (\n          <Picture\n            source={`${imageUrl}, ${mobImageUrl} 768`}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n\n    </div>\n  )\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\u9700\u8981 7 \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 *         imageUrl: '/desktop.jpg',\n *         mobImageUrl: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 7 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items } = data\n\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      {/* ipad, pc\u7AEF */}\n      <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n        <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[0]}\n          />\n          <ImageCard\n            className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[1]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[4]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[3]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[2]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n            {...items[5]}\n          />\n          <ImageCard\n            className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n            {...items[6]}\n          />\n        </div>\n      </div>\n\n      {/* \u624B\u673A\u7AEF */}\n      <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n        <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n        <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[1]} />\n          <ImageCard className=\"w-[50%]\" {...items[2]} />\n        </div>\n        <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n        <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[3]} />\n          <ImageCard className=\"w-[50%]\" {...items[4]} />\n        </div>\n        <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n      </div>\n    </section>\n  )\n}\n\n\nexport default withLayout(Ksp)"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2DQ,IAAAI,EAAA,6BA3DRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA6C3B,MAAMC,EAAY,CAAC,CACjB,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,CACF,OAEI,QAAC,OAAI,aAAW,MAAG,gEAAiEA,CAAS,EAC1F,UAAAF,GAAYC,KACX,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,EACL,OAAQF,EACR,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,EACL,OAAQF,EACR,UAAU,4HACZ,GACF,GAECD,GAAYC,OACX,OAAC,WACC,OAAQ,GAAGD,CAAQ,KAAKC,CAAW,OACnC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GAEF,EA4BJ,SAASM,EAAI,CAAE,KAAAC,EAAM,UAAAF,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAS,CAAM,EAAID,EAEzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,gGAAiGF,CAAS,EAExH,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KAErG,QAAC,OAAI,UAAU,+GACb,qBAAC,OAAI,UAAU,yDACb,oBAACD,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,GACF,GACF,KAGA,QAAC,OAAI,UAAU,gFACb,oBAACV,EAAA,CAAU,UAAU,qBAAsB,GAAGU,EAAM,CAAC,EAAG,KACxD,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,KAC5D,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,GAC9D,GACF,CAEJ,CAGA,IAAOhB,KAAQ,cAAWc,CAAG",
-  "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "imageUrl", "mobImageUrl", "videoUrl", "mobVideoUrl", "className", "Ksp", "data", "items"]
+  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } 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}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\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}\n\nconst ImageCard = ({\n  title,\n  desc,\n  image,\n  mobImage,\n  video,\n  mobVideo,\n  className,\n}: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\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 absolute bottom-0 hidden w-full laptop:inline-block\"\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 absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n\n    </div>\n  )\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\u9700\u8981 7 \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 7 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      {/* ipad, pc\u7AEF */}\n      <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n        <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[0]}\n          />\n          <ImageCard\n            className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[1]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[4]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[3]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[2]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n            {...items[5]}\n          />\n          <ImageCard\n            className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n            {...items[6]}\n          />\n        </div>\n      </div>\n\n      {/* \u624B\u673A\u7AEF */}\n      <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n        <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n        <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[1]} />\n          <ImageCard className=\"w-[50%]\" {...items[2]} />\n        </div>\n        <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n        <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[3]} />\n          <ImageCard className=\"w-[50%]\" {...items[4]} />\n        </div>\n        <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n      </div>\n    </section>\n  )\n}\n\n\nexport default withLayout(Ksp)"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DQ,IAAAI,EAAA,6BA5DRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA8C3B,MAAMC,EAAY,CAAC,CACjB,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,CACF,OAEI,QAAC,OAAI,aAAW,MAAG,gEAAiEA,CAAS,EAC1F,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GAEF,EA4BJ,SAASM,EAAI,CAAE,KAAAC,EAAM,UAAAF,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAS,CAAM,EAAID,EACzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,gGAAiGF,CAAS,EAExH,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KAErG,QAAC,OAAI,UAAU,+GACb,qBAAC,OAAI,UAAU,yDACb,oBAACD,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,iFACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,gGACT,GAAGU,EAAM,CAAC,EACb,GACF,KAEA,QAAC,OAAI,UAAU,yDACb,oBAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,KACA,OAACV,EAAA,CACC,UAAU,4HACT,GAAGU,EAAM,CAAC,EACb,GACF,GACF,KAGA,QAAC,OAAI,UAAU,gFACb,oBAACV,EAAA,CAAU,UAAU,qBAAsB,GAAGU,EAAM,CAAC,EAAG,KACxD,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,KAC5D,QAAC,OAAI,UAAU,mFACb,oBAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,KAC7C,OAACV,EAAA,CAAU,UAAU,UAAW,GAAGU,EAAM,CAAC,EAAG,GAC/C,KACA,OAACV,EAAA,CAAU,UAAU,yBAA0B,GAAGU,EAAM,CAAC,EAAG,GAC9D,GACF,CAEJ,CAGA,IAAOhB,KAAQ,cAAWc,CAAG",
+  "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "Ksp", "data", "items"]
 }

package/dist/cjs/biz-components/MarqueeReview/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 /**
  * 评论项数据结构
  */
@@ -7,7 +7,7 @@ export interface ReviewItem {
     /** 评论者名称 */
     name: string;
     /** 评论者头像 URL */
-    avatar: string;
+    avatar: Media;
     /** 评论内容 */
     comment: string;
     /** 评分(1-5星) */

package/dist/cjs/biz-components/MarqueeReview/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var k=(t,a)=>{for(var s in a)n(t,s,{get:a[s],enumerable:!0})},N=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of w(a))!u.call(t,p)&&p!==s&&n(t,p,{get:()=>a[p],enumerable:!(i=g(a,p))||i.enumerable});return t};var C=t=>N(n({},"__esModule",{value:!0}),t);var R={};k(R,{default:()=>M});module.exports=C(R);var e=require("react/jsx-runtime"),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const c=9,b=3,y=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(s,i)=>t.slice(i*a,(i+1)*a)),L=()=>(0,e.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),T=({item:t})=>(0,e.jsxs)("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[(0,e.jsxs)("div",{className:"flex justify-between",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(l.Text,{size:4,html:t.name,className:"hidden laptop:block"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"block laptop:hidden"}),(0,e.jsx)("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,s)=>(0,e.jsx)(L,{},s))})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[(0,e.jsx)(l.AvatarImage,{src:t.avatar,alt:"avatar"}),(0,e.jsx)(l.AvatarFallback,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)(l.Heading,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function I({data:t,className:a}){const{title:s,subtitle:i,items:p=[],theme:h="light"}=t,f=y(p.length<c?[...p,...p.slice(c-p.length)]:p,b).slice(0,3).map(o=>[...o,...o]);return(0,e.jsxs)("section",{className:(0,m.cn)("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":h==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:s,className:"w-full text-left laptop:text-center"}),(0,e.jsx)(l.Text,{size:2,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,e.jsx)("div",{className:(0,m.cn)("mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:f.map((o,r)=>(0,e.jsx)("div",{className:(0,m.cn)("animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit",{"top-10":r===0||r===2,"hidden desktop:flex":r===1,"hidden tablet:flex":r===2}),children:o.map((d,v)=>(0,e.jsx)(T,{item:d},v))},r))})]})}var M=(0,x.withLayout)(I);
+"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var k=(t,a)=>{for(var s in a)n(t,s,{get:a[s],enumerable:!0})},N=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of u(a))!w.call(t,p)&&p!==s&&n(t,p,{get:()=>a[p],enumerable:!(i=g(a,p))||i.enumerable});return t};var C=t=>N(n({},"__esModule",{value:!0}),t);var R={};k(R,{default:()=>I});module.exports=C(R);var e=require("react/jsx-runtime"),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const c=9,b=3,y=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(s,i)=>t.slice(i*a,(i+1)*a)),L=()=>(0,e.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),M=({item:t})=>(0,e.jsxs)("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[(0,e.jsxs)("div",{className:"flex justify-between",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(l.Text,{size:4,html:t.name,className:"hidden laptop:block"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"block laptop:hidden"}),(0,e.jsx)("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,s)=>(0,e.jsx)(L,{},s))})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[(0,e.jsx)(l.AvatarImage,{src:t.avatar?.url,alt:t.avatar?.alt||""}),(0,e.jsx)(l.AvatarFallback,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)(l.Heading,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function T({data:t,className:a}){const{title:s,subtitle:i,items:p=[],theme:d="light"}=t,h=y(p.length<c?[...p,...p.slice(c-p.length)]:p,b).slice(0,3).map(o=>[...o,...o]);return(0,e.jsxs)("section",{className:(0,m.cn)("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":d==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:s,className:"w-full text-left laptop:text-center"}),(0,e.jsx)(l.Text,{size:2,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,e.jsx)("div",{className:(0,m.cn)("mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:h.map((o,r)=>(0,e.jsx)("div",{className:(0,m.cn)("animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit",{"top-10":r===0||r===2,"hidden desktop:flex":r===1,"hidden tablet:flex":r===2}),children:o.map((f,v)=>(0,e.jsx)(M,{item:f},v))},r))})]})}var I=(0,x.withLayout)(T);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MarqueeReview/index.tsx"],
-  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: string\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n          <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n          <AvatarImage src={item.avatar} alt=\"avatar\" />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section className={cn('flex flex-col items-center justify-center py-3 text-info-primary',  className, { 'aiui-dark': theme === 'dark' })}>\n      <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDI,IAAAI,EAAA,6BAtDJC,EAAmE,qCACnEC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,OACf,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,QAAC,OAAI,UAAU,uLACb,qBAAC,OAAI,UAAU,uBACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,OAAI,UAAU,kBACZ,aAAI,MAAMA,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,OAC3C,OAACC,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,KACA,QAAC,UAAO,KAAK,QAAQ,UAAU,sDAC7B,oBAAC,eAAY,IAAKG,EAAK,OAAQ,IAAI,SAAS,KAC5C,OAAC,kBAAiB,UAAAA,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,KACA,OAAC,OACC,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIA,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,SACE,QAAC,WAAQ,aAAW,MAAG,mEAAqEG,EAAW,CAAE,YAAaI,IAAU,MAAO,CAAC,EACtI,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMH,EAAO,UAAU,sCAAsC,KACvF,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,8KACZ,KACA,OAAC,OACC,aAAW,MACT,2HACF,EAEC,SAAAG,EAAW,IAAI,CAACF,EAAOT,OACtB,OAAC,OAEC,aAAW,MAAG,mEAAoE,CAChF,SAAUA,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,OAChB,OAACV,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOZ,KAAQ,cAAWgB,CAAa",
+  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } 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\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: Media\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n          <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n          <AvatarImage src={item.avatar?.url} alt={item.avatar?.alt || ''} />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section\n      className={cn('flex flex-col items-center justify-center py-3 text-info-primary', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDI,IAAAI,EAAA,6BAtDJC,EAAmE,qCACnEC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,OACf,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,QAAC,OAAI,UAAU,uLACb,qBAAC,OAAI,UAAU,uBACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,OAAI,UAAU,kBACZ,aAAI,MAAMA,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,OAC3C,OAACC,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,KACA,QAAC,UAAO,KAAK,QAAQ,UAAU,sDAC7B,oBAAC,eAAY,IAAKG,EAAK,QAAQ,IAAK,IAAKA,EAAK,QAAQ,KAAO,GAAI,KACjE,OAAC,kBAAiB,UAAAA,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,KACA,OAAC,OACC,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIA,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,SACE,QAAC,WACC,aAAW,MAAG,mEAAoEG,EAAW,CAC3F,YAAaI,IAAU,MACzB,CAAC,EAED,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMH,EAAO,UAAU,sCAAsC,KACvF,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,8KACZ,KACA,OAAC,OACC,aAAW,MACT,2HACF,EAEC,SAAAG,EAAW,IAAI,CAACF,EAAOT,OACtB,OAAC,OAEC,aAAW,MAAG,mEAAoE,CAChF,SAAUA,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,OAChB,OAACV,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOZ,KAAQ,cAAWgB,CAAa",
   "names": ["MarqueeReview_exports", "__export", "MarqueeReview_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex"]
 }

package/dist/cjs/biz-components/MediaPlayerSticky/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var ne=Object.create;var v=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(s,t)=>{for(var r in t)v(s,r,{get:t[r],enumerable:!0})},E=(s,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ie(t))!ce.call(s,n)&&n!==r&&v(s,n,{get:()=>t[n],enumerable:!(l=le(t,n))||l.enumerable});return s};var c=(s,t,r)=>(r=s!=null?ne(oe(s)):{},E(t||!s||!s.__esModule?v(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>E(v({},"__esModule",{value:!0}),s);var ye={};ue(ye,{default:()=>fe});module.exports=de(ye);var e=require("react/jsx-runtime"),a=c(require("react")),S=require("es-toolkit"),L=require("react-intersection-observer"),m=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),$=c(require("../Slogan/index.js")),Y=require("../VideoModal/YouTubePlayer.js"),u=require("../../components/gird.js"),q=require("../../components/container.js"),F=c(require("../BrandEquity/index.js")),I=c(require("../MemberEquity/index.js")),j=c(require("../Spacer/index.js")),G=c(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),V=c(require("../../helpers/ScrollLoadVideo.js"));const P=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),k=({children:s,spaceY:t,className:r})=>{const l=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(q.Container,{spaceY:t,className:(0,m.cn)("!bg-transparent",r),children:(0,e.jsxs)(u.Grid,{children:[!l&&(0,e.jsx)(u.GridItem,{span:1}),(0,e.jsx)(u.GridItem,{span:l?12:10,children:s}),!l&&(0,e.jsx)(u.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const l=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:l,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(n=>{switch(n.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(F.default,{data:n,style:n?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(I.default,{data:n,className:"w-full",style:n?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:n,style:n?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:l,mobVideo:n,mobImg:f,img:y,isYouTube:O,youtubePcId:R,youtubeMobileId:Q,video:g,theme:M,shape:W,components:_}})=>{const H=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:A,inView:d}=(0,L.useInView)(),[ve,D]=(0,a.useState)(0),[T,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),i=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:P});typeof l=="string"||l&&(0,x.convertLexicalToHTML)({data:l,converters:P});const[ee,te]=(0,a.useState)(0),[o,re]=(0,a.useState)(!1),z=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{re(z)},[z]);const w=(0,S.debounce)(()=>{if(b.current){const h=b.current.getBoundingClientRect(),p=o?window.screen.height:window.innerHeight,se=window.scrollY||window.pageYOffset,ae=h.bottom+se,C=document.documentElement.scrollHeight-ae;te(C>p?p:C),D(p)}},2e3);return(0,a.useEffect)(()=>{d&&!T&&(H.current?.play(),J(!0))},[d,T]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function h(){const p=o?window.screen.height:window.innerHeight;i.current&&(i.current.scrollTrigger?.kill(),i.current.kill(),i.current=null),i.current=G.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${p*1.8}px bottom`,scrub:.3,invalidateOnRefresh:!0},defaults:{ease:"none",force3D:!0}}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{yPercent:100,duration:1},"<")}return d&&h(),()=>{i.current&&(i.current.scrollTrigger?.kill(),i.current.kill(),i.current=null)}},[d,o,t]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20 h-screen w-full",s,{"aiui-dark":M==="dark","rounded-box":W==="rounded"}),ref:X,children:(0,e.jsx)("div",{ref:A,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:(0,e.jsx)(k,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)($.default,{className:"sticky-title antialiased",data:{title:Z||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:b,style:{marginBottom:`-${ee}px`,zIndex:d?2:1},className:(0,m.cn)(t,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[O?(0,e.jsx)(Y.YouTubePlayer,{youTubeId:o&&Q||R}):g?.url&&(0,e.jsx)(V.default,{videoRef:H,poster:o&&f?.url?f?.url:y?.url,src:o&&n?.url?n?.url:g?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{U(!0)}}),y?.url&&(!g?.url||K)&&(0,e.jsx)("img",{src:o&&f?.url?f?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(pe,{components:_}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var fe=(0,B.withLayout)(me);
+"use strict";"use client";var ne=Object.create;var v=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(s,t)=>{for(var r in t)v(s,r,{get:t[r],enumerable:!0})},E=(s,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ie(t))!ce.call(s,n)&&n!==r&&v(s,n,{get:()=>t[n],enumerable:!(l=le(t,n))||l.enumerable});return s};var c=(s,t,r)=>(r=s!=null?ne(oe(s)):{},E(t||!s||!s.__esModule?v(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>E(v({},"__esModule",{value:!0}),s);var ye={};ue(ye,{default:()=>fe});module.exports=de(ye);var e=require("react/jsx-runtime"),a=c(require("react")),S=require("es-toolkit"),L=require("react-intersection-observer"),m=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),$=c(require("../Slogan/index.js")),Y=require("../VideoModal/YouTubePlayer.js"),u=require("../../components/gird.js"),q=require("../../components/container.js"),F=c(require("../BrandEquity/index.js")),I=c(require("../MemberEquity/index.js")),j=c(require("../Spacer/index.js")),G=c(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),V=c(require("../../helpers/ScrollLoadVideo.js"));const P=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),k=({children:s,spaceY:t,className:r})=>{const l=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(q.Container,{spaceY:t,className:(0,m.cn)("!bg-transparent",r),children:(0,e.jsxs)(u.Grid,{children:[!l&&(0,e.jsx)(u.GridItem,{span:1}),(0,e.jsx)(u.GridItem,{span:l?12:10,children:s}),!l&&(0,e.jsx)(u.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const l=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:l,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(n=>{switch(n.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(F.default,{data:n,style:n?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(I.default,{data:n,className:"w-full",style:n?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:n,style:n?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:l,mobVideo:n,mobImg:f,img:y,isYouTube:O,youtubePcId:R,youtubeMobileId:Q,video:g,theme:M,shape:W,components:_}})=>{const H=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:A,inView:d}=(0,L.useInView)(),[ve,D]=(0,a.useState)(0),[T,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),i=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:P});typeof l=="string"||l&&(0,x.convertLexicalToHTML)({data:l,converters:P});const[ee,te]=(0,a.useState)(0),[o,re]=(0,a.useState)(!1),z=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{re(z)},[z]);const w=(0,S.debounce)(()=>{if(b.current){const h=b.current.getBoundingClientRect(),p=o?window.screen.height:window.innerHeight,se=window.scrollY||window.pageYOffset,ae=h.bottom+se,C=document.documentElement.scrollHeight-ae;te(C>p?p:C),D(p)}},2e3);return(0,a.useEffect)(()=>{d&&!T&&(H.current?.play(),J(!0))},[d,T]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function h(){const p=o?window.screen.height:window.innerHeight;i.current&&(i.current.scrollTrigger?.kill(),i.current.kill(),i.current=null),i.current=G.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${p*1.9}px bottom`,scrub:.5,invalidateOnRefresh:!0},defaults:{ease:"none",force3D:!0}}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{yPercent:100,duration:1},"<")}return d&&h(),()=>{i.current&&(i.current.scrollTrigger?.kill(),i.current.kill(),i.current=null)}},[d,o,t]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20 h-screen w-full",s,{"aiui-dark":M==="dark","rounded-box":W==="rounded"}),ref:X,children:(0,e.jsx)("div",{ref:A,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:(0,e.jsx)(k,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)($.default,{className:"sticky-title antialiased",data:{title:Z||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:b,style:{marginBottom:`-${ee}px`,zIndex:d?2:1},className:(0,m.cn)(t,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[O?(0,e.jsx)(Y.YouTubePlayer,{youTubeId:o&&Q||R}):g?.url&&(0,e.jsx)(V.default,{videoRef:H,poster:o&&f?.url?f?.url:y?.url,src:o&&n?.url?n?.url:g?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{U(!0)}}),y?.url&&(!g?.url||K)&&(0,e.jsx)("img",{src:o&&f?.url?f?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(pe,{components:_}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var fe=(0,B.withLayout)(me);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  ({\n    className = '',\n    id,\n    data: {\n      title,\n      videoTitle,\n      mobVideo,\n      mobImg,\n      img,\n      isYouTube,\n      youtubePcId,\n      youtubeMobileId,\n      video,\n      theme,\n      shape,\n      components,\n    },\n  }) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const tlRef = useRef<gsap.core.Timeline | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n        tlRef.current = gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.3,\n              invalidateOnRefresh: true,\n            },\n            defaults: { ease: 'none', force3D: true },\n          })\n          .to(`.${id} .sticky-cover`, { backdropFilter: 'blur(8px)', duration: 0.4 })\n          .to(`#${id} .media-content`, { yPercent: 100, duration: 1 }, '<')\n      }\n      if (inView) {\n        gsapResize()\n      }\n      return () => {\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n      }\n    }, [inView, isMobile, id])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]')}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)', willChange: 'backdrop-filter' }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  ({\n    className = '',\n    id,\n    data: {\n      title,\n      videoTitle,\n      mobVideo,\n      mobImg,\n      img,\n      isYouTube,\n      youtubePcId,\n      youtubeMobileId,\n      video,\n      theme,\n      shape,\n      components,\n    },\n  }) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const tlRef = useRef<gsap.core.Timeline | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n        tlRef.current = gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.9}px bottom`,\n              scrub: 0.5,\n              invalidateOnRefresh: true,\n            },\n            defaults: { ease: 'none', force3D: true },\n          })\n          .to(`.${id} .sticky-cover`, { backdropFilter: 'blur(8px)', duration: 0.4 })\n          .to(`#${id} .media-content`, { yPercent: 100, duration: 1 }, '<')\n      }\n      if (inView) {\n        gsapResize()\n      }\n      return () => {\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n      }\n    }, [inView, isMobile, id])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]')}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)', willChange: 'backdrop-filter' }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
   "mappings": "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",
   "names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_es_toolkit", "import_react_intersection_observer", "import_utils", "import_Styles", "import_Slogan", "import_YouTubePlayer", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "React", "id", "components", "mediaPlayerStickyRef", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "tlRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "gsap", "Slogan", "ScrollLoadVideo"]
 }

package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { MediaSceneSwitcherProps } from './types.js';
+import 'swiper/css';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
+}, "ref"> & import("react").RefAttributes<any>>;
+export default _default;