@anker-in/headless-ui 1.0.25 → 1.0.26-alpha.111003

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var ee=Object.create;var w=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var le=(t,r)=>{for(var s in r)w(t,s,{get:r[s],enumerable:!0})},q=(t,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ae(r))!oe.call(t,a)&&a!==s&&w(t,a,{get:()=>r[a],enumerable:!(l=te(r,a))||l.enumerable});return t};var V=(t,r,s)=>(s=t!=null?ee(re(t)):{},q(r||!t||!t.__esModule?w(s,"default",{value:t,enumerable:!0}):s,t)),se=t=>q(w({},"__esModule",{value:!0}),t);var pe={};le(pe,{default:()=>ie});module.exports=se(pe);var e=require("react/jsx-runtime"),o=V(require("react")),x=V(require("gsap")),h=require("gsap/dist/ScrollTrigger"),z=require("react-responsive"),A=require("react-intersection-observer"),Q=V(require("../../helpers/ScrollLoadVideo.js")),n=require("../../components/index.js"),d=require("../../helpers/index.js"),Z=require("../../shared/Styles.js"),G=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js"),J=require("../../components/button.js"),K=require("../VideoModal/index.js");const p="image",c="hero_banner",ne=({size:t="base"})=>{const{width:r,height:s}=J.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},F=o.default.forwardRef(({data:t,className:r},s)=>{const{title:l,subtitle:a,pcImage:R,padImage:O,mobileImage:I,pcVideo:P,padVideo:M,mobileVideo:y,isShowVideo:W,primaryButton:m,secondaryButton:i,theme:X="light",size:L="default",caption:k=[],blockLink:S}=t,C=(0,z.useMediaQuery)({query:"(max-width: 768px)"}),E=(0,z.useMediaQuery)({query:"(max-width: 1024px)"}),[U,D]=(0,o.useState)(!1),{ref:Y,inView:_}=(0,A.useInView)(),N=(0,o.useRef)(null),T=(0,o.useRef)(null),B=(0,o.useRef)(null),g=(0,o.useRef)(null),u=(0,o.useRef)(null);return(0,G.useExposure)(u,{componentType:p,componentName:c,componentTitle:l,componentDescription:a}),(0,o.useImperativeHandle)(s,()=>u.current),(0,o.useEffect)(()=>{x.default.registerPlugin(h.ScrollTrigger);function H(){if(!g.current)return;const v=u.current?.clientHeight||100;window.innerHeight<=v?N.current=h.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const f=b.progress*40-20;x.default.set(g.current,{yPercent:f})}}):(B.current=h.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:b=>{const f=b.progress*20-20;x.default.set(g.current,{yPercent:f})}}),T.current=h.ScrollTrigger.create({trigger:u.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:b=>{const f=b.progress*20;x.default.set(g.current,{yPercent:f})}}))}return _&&H(),()=>{N.current&&N.current.kill(),B.current&&B.current.kill(),T.current&&T.current.kill()}},[_]),(0,e.jsx)("div",{ref:Y,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:u,className:(0,d.cn)(X==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":L==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":L==="sm"},r),children:[S&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,$.trackUrlRef)(S,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":l}),(0,e.jsx)("div",{ref:g,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:W?(0,e.jsx)(Q.default,{poster:C?y?.url:E?M?.url||y?.url:P?.url,src:C?y?.url:E?M?.url||y?.url:P?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:R?.alt||"",source:`${R?.url||""} , ${O?.url??(I?.url||"")} 1024, ${I?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[l&&(0,e.jsx)(n.Heading,{as:"h2",size:5,className:(0,d.cn)("hero-banner-title"),html:l}),a&&(0,e.jsx)(n.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i?.isShowPlayVideoButton&&i?.playVideoButtonText?(0,e.jsxs)(n.Button,{onClick:()=>D(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.playVideoButtonText}`,children:[i?.playVideoButtonText," ",(0,e.jsx)(ne,{size:"lg"})]}):i?.text?(0,e.jsxs)(n.Button,{"aria-label":l??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,$.trackUrlRef)(i?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.text}`,children:[i?.text,(0,e.jsx)("span",{className:"sr-only",children:l??a})]}):null,m&&m.text&&(0,e.jsx)(n.Button,{"aria-label":l??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,$.trackUrlRef)(m.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${m?.text}`,children:m.text})]})]}),k.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:k.map((H,v)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(n.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:H.title}),v<k.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},v))}),U&&(0,e.jsx)(K.VideoModal,{visible:U,videoUrl:i?.videoUrl?.url,youTubeId:i?.youtubeId,onCloseModal:()=>D(!1)})]})})});F.displayName="HeroBanner";var ie=(0,Z.withLayout)(F);
+"use strict";"use client";var le=Object.create;var $=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ce=(t,r)=>{for(var s in r)$(t,s,{get:r[s],enumerable:!0})},F=(t,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ne(r))!pe.call(t,a)&&a!==s&&$(t,a,{get:()=>r[a],enumerable:!(l=se(r,a))||l.enumerable});return t};var k=(t,r,s)=>(s=t!=null?le(ie(t)):{},F(r||!t||!t.__esModule?$(s,"default",{value:t,enumerable:!0}):s,t)),ue=t=>F($({},"__esModule",{value:!0}),t);var ge={};ce(ge,{default:()=>me});module.exports=ue(ge);var e=require("react/jsx-runtime"),o=k(require("react")),v=k(require("gsap")),y=require("gsap/dist/ScrollTrigger"),R=require("react-responsive"),A=require("react-intersection-observer"),Q=k(require("../../helpers/ScrollLoadVideo.js")),n=require("../../components/index.js"),Z=k(require("./Countdown.js")),d=require("../../helpers/index.js"),G=require("../../shared/Styles.js"),J=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),K=require("../../components/button.js"),O=require("../VideoModal/index.js");const p="image",c="hero_banner",de=({size:t="base"})=>{const{width:r,height:s}=K.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},q=o.default.forwardRef(({data:t,className:r},s)=>{const{title:l,subtitle:a,endDate:P,endDate_tz:W,dateFormat:X,pcImage:T,padImage:M,mobileImage:w,pcVideo:Y,padVideo:ee,mobileVideo:C,isShowVideo:te,primaryButton:b,secondaryButton:i,theme:ae="light",size:B="default",caption:z=[],blockLink:L,iconArray:re}=t,D=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),S=(0,R.useMediaQuery)({query:"(max-width: 1024px)"}),[E,U]=(0,o.useState)(!1),{ref:oe,inView:_}=(0,A.useInView)(),H=(0,o.useRef)(null),V=(0,o.useRef)(null),I=(0,o.useRef)(null),f=(0,o.useRef)(null),u=(0,o.useRef)(null);return(0,J.useExposure)(u,{componentType:p,componentName:c,componentTitle:l,componentDescription:a}),(0,o.useImperativeHandle)(s,()=>u.current),(0,o.useEffect)(()=>{v.default.registerPlugin(y.ScrollTrigger);function m(){if(!f.current)return;const g=u.current?.clientHeight||100;window.innerHeight<=g?H.current=y.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const x=h.progress*40-20;v.default.set(f.current,{yPercent:x})}}):(I.current=y.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const x=h.progress*20-20;v.default.set(f.current,{yPercent:x})}}),V.current=y.ScrollTrigger.create({trigger:u.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const x=h.progress*20;v.default.set(f.current,{yPercent:x})}}))}return _&&m(),()=>{H.current&&H.current.kill(),I.current&&I.current.kill(),V.current&&V.current.kill()}},[_]),(0,e.jsx)("div",{ref:oe,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:u,className:(0,d.cn)(ae==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":B==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":B==="sm"},r),children:[L&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,N.trackUrlRef)(L,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":l}),(0,e.jsx)("div",{ref:f,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:te?(0,e.jsx)(Q.default,{poster:D?w?.url:S?M?.url||w?.url:T?.url,src:D?C?.url:S?ee?.url||C?.url:Y?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:T?.alt||"",source:`${T?.url||""} , ${M?.url??(w?.url||"")} 1024, ${w?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[l&&(0,e.jsx)(n.Heading,{as:"h2",size:B==="sm"?4:5,className:(0,d.cn)("hero-banner-title"),html:l}),a&&(0,e.jsx)(n.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(Z.default,{endDate:P,endDate_tz:W,dateFormat:X})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i?.isShowPlayVideoButton&&i?.playVideoButtonText?(0,e.jsxs)(n.Button,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.playVideoButtonText}`,children:[i?.playVideoButtonText," ",(0,e.jsx)(de,{size:"lg"})]}):i?.text?(0,e.jsxs)(n.Button,{"aria-label":l??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,N.trackUrlRef)(i?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.text}`,children:[i?.text,(0,e.jsx)("span",{className:"sr-only",children:l??a})]}):null,b&&b.text&&(0,e.jsx)(n.Button,{"aria-label":l??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,N.trackUrlRef)(b.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${b?.text}`,children:b.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:re?.map((m,g)=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:m?.pcImage?.alt||"",source:m?.pcImage?.url})},g))})]}),z.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:z.map((m,g)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(n.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:m.title}),g<z.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},g))}),E&&(0,e.jsx)(O.VideoModal,{visible:E,videoUrl:i?.videoUrl?.url,youTubeId:i?.youtubeId,onCloseModal:()=>U(!1)})]})})});q.displayName="HeroBanner";var me=(0,G.withLayout)(q);
 //# sourceMappingURL=HeroBanner.js.map

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\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  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left max-w-[686px]\">\n            {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "c", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\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  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left max-w-[686px]\">\n            {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map((icon, index) => (\n              <div key={index} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_Countdown", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "Countdown", "icon", "index", "c"]
 }

package/dist/cjs/biz-components/HeroBanner/types.d.ts

@@ -6,6 +6,13 @@ export interface HeroBannerProps {
         title: string;
         /** 副标题/描述文本 */
         subtitle: string;
+        /** 结束时间（ISO 字符串） */
+        endDate?: string;
+        /** 结束时间时区（如: America/Los_Angeles） */
+        endDate_tz?: string;
+        dateFormat?: string;
+        /** 图标列表 */
+        iconArray?: Array<any>;
         pcImage: Media;
         padImage?: Media;
         mobileImage: Media;

package/dist/cjs/biz-components/HeroBanner/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
-  "sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n    subtitle: string\n    pcImage: Media\n    padImage?: Media\n    mobileImage: Media\n    pcVideo?: Media\n    padVideo?: Media\n    mobileVideo?: Media\n    isShowVideo?: boolean\n    blockLink?: string\n    /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    primaryButton?: {\n      text: string\n      link?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    secondaryButton?: {\n      text: string\n      link?: string\n      isShowPlayVideoButton?: boolean\n      playVideoButtonText?: string\n      playIcon?: boolean\n      videoUrl?: Media\n      youtubeId?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u4E3B\u9898 */\n    theme?: Theme\n    /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n    size?: 'default' | 'sm'\n    /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n    caption?: Array<{\n      title: string\n    }>\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nexport interface HeroBannerProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n    subtitle: string\n    /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n    endDate?: string\n    /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n    endDate_tz?: string\n    dateFormat?: string\n    /** \u56FE\u6807\u5217\u8868 */\n    iconArray?: Array<any>\n    pcImage: Media\n    padImage?: Media\n    mobileImage: Media\n    pcVideo?: Media\n    padVideo?: Media\n    mobileVideo?: Media\n    isShowVideo?: boolean\n    blockLink?: string\n    /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    primaryButton?: {\n      text: string\n      link?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    secondaryButton?: {\n      text: string\n      link?: string\n      isShowPlayVideoButton?: boolean\n      playVideoButtonText?: string\n      playIcon?: boolean\n      videoUrl?: Media\n      youtubeId?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u4E3B\u9898 */\n    theme?: Theme\n    /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n    size?: 'default' | 'sm'\n    /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n    caption?: Array<{\n      title: string\n    }>\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/ImageTextFeature/ImageTextFeature.d.ts

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

package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var T=Object.create;var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var p in t)o(e,p,{get:t[p],enumerable:!0})},u=(e,t,p,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of y(t))!F.call(e,i)&&i!==p&&o(e,i,{get:()=>t[i],enumerable:!(x=v(t,i))||x.enumerable});return e};var j=(e,t,p)=>(p=e!=null?T(w(e)):{},u(t||!e||!e.__esModule?o(p,"default",{value:e,enumerable:!0}):p,e)),z=e=>u(o({},"__esModule",{value:!0}),e);var P={};H(P,{default:()=>L});module.exports=z(P);var a=require("react/jsx-runtime"),l=j(require("react")),m=require("../../components/index.js"),f=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js");const D="image",E="image_text_feature",c=l.default.forwardRef(({data:e,className:t},p)=>{const{title:x,subtitle:i,pcImage:r,mobileImage:h,padImage:b,items:k=[],imagePosition:s="left",theme:I="light"}=e,g=(0,l.useRef)(null);return(0,_.useExposure)(g,{componentType:D,componentName:E,componentTitle:x,componentDescription:i}),(0,l.useImperativeHandle)(p,()=>g.current),(0,a.jsxs)("section",{ref:g,"data-ui-component-id":"ImageTextFeature",className:(0,f.cn)("image-text-feature",I==="dark"?"aiui-dark":"","flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]",t),children:[(0,a.jsx)(m.Picture,{source:`${r.url}, ${b?.url||r.url} 1024, ${h.url||r.url} 768`,alt:r.alt,className:(0,f.cn)("image-text-feature__image aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0",{"image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":s==="left","image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]":s==="right"})}),(0,a.jsxs)("div",{className:(0,f.cn)("image-text-feature__content flex w-full flex-col items-start justify-center laptop:w-fit",{"order-1 laptop:order-2":s==="left","order-1":s==="right"}),children:[(0,a.jsx)(m.Heading,{size:4,html:x,as:"h3",className:"image-text-feature__title w-full text-left"}),i&&(0,a.jsx)(m.Text,{size:4,html:i,as:"p",className:"image-text-feature__subtitle mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]"}),(0,a.jsx)("div",{className:"image-text-feature__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:k.map((n,N)=>(0,a.jsxs)("div",{className:"image-text-feature__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,a.jsxs)("div",{className:"image-text-feature__item-header flex flex-row items-center gap-[8px]",children:[(0,a.jsx)("img",{src:n.icon,alt:"icon",className:"image-text-feature__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,a.jsx)(m.Heading,{size:5,as:"h6",className:"image-text-feature__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:n.text})]}),(0,a.jsx)(m.Text,{size:4,as:"p",html:n.desc,className:"image-text-feature__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},N))})]})]})});c.displayName="ImageTextFeature";var L=(0,d.withLayout)(c);
+//# sourceMappingURL=ImageTextFeature.js.map

package/dist/cjs/biz-components/ImageTextFeature/ImageTextFeature.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ImageTextFeature/ImageTextFeature.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 type { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, padImage, items = [], imagePosition = 'left', theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageTextFeature\"\n      className={cn(\n        'image-text-feature',\n        theme === 'dark' ? 'aiui-dark' : '',\n        'flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      {/* \u56FE\u7247\u533A\u57DF */}\n      <Picture\n        source={`${pcImage.url}, ${padImage?.url || pcImage.url} 1024, ${mobileImage.url || pcImage.url} 768`}\n        alt={pcImage.alt}\n        className={cn('image-text-feature__image aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0', {\n          'image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'left',\n          'image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'right',\n        })}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div\n        className={cn('image-text-feature__content flex w-full flex-col items-start justify-center laptop:w-fit', {\n          'order-1 laptop:order-2': imagePosition === 'left',\n          'order-1': imagePosition === 'right',\n        })}\n      >\n        {/* \u6807\u9898 */}\n        <Heading size={4} html={title} as=\"h3\" className=\"image-text-feature__title w-full text-left\" />\n\n        {/* \u526F\u6807\u9898 */}\n        {subtitle && (\n          <Text\n            size={4}\n            html={subtitle}\n            as=\"p\"\n            className=\"image-text-feature__subtitle mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n\n        {/* \u529F\u80FD\u5217\u8868 */}\n        <div className=\"image-text-feature__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: ImageTextFeatureItem, index: number) => (\n            <div key={index} className=\"image-text-feature__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n              <div className=\"image-text-feature__item-header flex flex-row items-center gap-[8px]\">\n                <img\n                  src={item.icon}\n                  alt=\"icon\"\n                  className=\"image-text-feature__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-text-feature__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-text-feature__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      </div>\n    </section>\n  )\n})\n\nImageTextFeature.displayName = 'ImageTextFeature'\n\nexport default withLayout(ImageTextFeature)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCM,IAAAI,EAAA,6BApCNC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmB,EAAAC,QAAM,WAAkD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMS,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,mBACrB,aAAW,MACT,qBACAD,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,oBAAC,WACC,OAAQ,GAAGI,EAAQ,GAAG,KAAKE,GAAU,KAAOF,EAAQ,GAAG,UAAUC,EAAY,KAAOD,EAAQ,GAAG,OAC/F,IAAKA,EAAQ,IACb,aAAW,MAAG,kIAAmI,CAC/I,gGAAiGI,IAAkB,OACnH,kFAAmFA,IAAkB,OACvG,CAAC,EACH,KAGA,QAAC,OACC,aAAW,MAAG,2FAA4F,CACxG,yBAA0BA,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,oBAAC,WAAQ,KAAM,EAAG,KAAMN,EAAO,GAAG,KAAK,UAAU,6CAA6C,EAG7FC,MACC,OAAC,QACC,KAAM,EACN,KAAMA,EACN,GAAG,IACH,UAAU,yHACZ,KAIF,OAAC,OAAI,UAAU,6LACZ,SAAAI,EAAM,IAAI,CAACI,EAA4BC,OACtC,QAAC,OAAgB,UAAU,wEACzB,qBAAC,OAAI,UAAU,uEACb,oBAAC,OACC,IAAKD,EAAK,KACV,IAAI,OACJ,UAAU,4LACZ,KACA,OAAC,WACC,KAAM,EACN,GAAG,KACH,UAAU,2GAET,SAAAA,EAAK,KACR,GACF,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,KAAMA,EAAK,KACX,UAAU,uIACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDf,EAAiB,YAAc,mBAE/B,IAAOV,KAAQ,cAAWU,CAAgB",
+  "names": ["ImageTextFeature_exports", "__export", "ImageTextFeature_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ImageTextFeature", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index"]
+}

package/dist/cjs/biz-components/ImageTextFeature/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImageTextFeature.js';
+export type { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js';

package/dist/cjs/biz-components/ImageTextFeature/index.js

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var m=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var r in t)m(e,r,{get:t[r],enumerable:!0})},p=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of u(t))!g.call(e,a)&&a!==r&&m(e,a,{get:()=>t[a],enumerable:!(o=s(t,a))||o.enumerable});return e};var F=(e,t,r)=>(r=e!=null?f(I(e)):{},p(t||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),T=e=>p(m({},"__esModule",{value:!0}),e);var d={};y(d,{default:()=>x.default});module.exports=T(d);var x=F(require("./ImageTextFeature.js"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ImageTextFeature/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ImageTextFeature/index.ts"],
+  "sourcesContent": ["export { default } from './ImageTextFeature.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
+  "names": ["ImageTextFeature_exports", "__export", "__toCommonJS", "import_ImageTextFeature"]
+}

package/dist/cjs/biz-components/ImageTextFeature/types.d.ts

@@ -0,0 +1,31 @@
+import type { Media, Theme } from '../../types/props.js';
+export interface ImageTextFeatureItem {
+    /** 功能图标 */
+    icon: string;
+    /** 功能标题 */
+    text: string;
+    /** 功能描述 */
+    desc: string;
+}
+export interface ImageTextFeatureProps {
+    data: {
+        /** 主标题 */
+        title: string;
+        /** 副标题 */
+        subtitle?: string;
+        /** PC端图片 */
+        pcImage: Media;
+        /** 移动端图片 */
+        mobileImage: Media;
+        /** 平板端图片 */
+        padImage?: Media;
+        /** 功能项列表 */
+        items: ImageTextFeatureItem[];
+        /** 图片位置，默认 left */
+        imagePosition?: 'left' | 'right';
+        /** 主题，默认 light */
+        theme?: Theme;
+    };
+    /** 自定义类名 */
+    className?: string;
+}

package/dist/cjs/biz-components/ImageTextFeature/types.js

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

package/dist/cjs/biz-components/ImageTextFeature/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ImageTextFeature/types.ts"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageTextFeatureItem {\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 ImageTextFeatureProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** PC\u7AEF\u56FE\u7247 */\n    pcImage: Media\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n    mobileImage: Media\n    /** \u5E73\u677F\u7AEF\u56FE\u7247 */\n    padImage?: Media\n    /** \u529F\u80FD\u9879\u5217\u8868 */\n    items: ImageTextFeatureItem[]\n    /** \u56FE\u7247\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left */\n    imagePosition?: 'left' | 'right'\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\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/ImageWithText/ImageWithText.d.ts

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

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

@@ -0,0 +1,2 @@
+"use strict";"use client";var pe=Object.create;var y=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var he=(a,m)=>{for(var r in m)y(a,r,{get:m[r],enumerable:!0})},B=(a,m,r,v)=>{if(m&&typeof m=="object"||typeof m=="function")for(let x of xe(m))!ce.call(a,x)&&x!==r&&y(a,x,{get:()=>m[x],enumerable:!(v=re(m,x))||v.enumerable});return a};var ge=(a,m,r)=>(r=a!=null?pe(ne(a)):{},B(m||!a||!a.__esModule?y(r,"default",{value:a,enumerable:!0}):r,a)),ue=a=>B(y({},"__esModule",{value:!0}),a);var we={};he(we,{default:()=>_e});module.exports=ue(we);var e=require("react/jsx-runtime"),i=ge(require("react")),s=require("../../components/index.js"),c=require("../../helpers/utils.js"),J=require("../../shared/Styles.js"),K=require("../../hooks/useExposure.js"),N=require("../../hooks/useIntersectionObserver.js"),_=require("framer-motion");const ve="image",fe="image_with_text",G=i.default.forwardRef(({data:a,className:m},r)=>{const{title:v,subtitle:x,desc:b,descIcon:T,image:w,padImage:E,mobileImage:H,theme:I="dark",items:S=[],imagePosition:Q,layout:U,mediaType:X="image",datalist:n=[],video:W,padVideo:z,mobVideo:R,poster:Y,padPoster:Z,mobPoster:ee,cols:k=1}=a,o=U||Q||"left",P=(0,i.useRef)(null),D=(0,i.useRef)(null),L=(0,i.useRef)(null),M=(0,i.useRef)(null),[h,te]=(0,i.useState)(0),A=(0,i.useRef)([]),[$,ie]=(0,i.useState)({left:0,width:0}),[f,ae]=(0,i.useState)(""),[j,oe]=(0,i.useState)(""),[F,le]=(0,i.useState)("");(0,K.useExposure)(P,{componentType:ve,componentName:fe,componentTitle:v,componentDescription:x}),(0,i.useImperativeHandle)(r,()=>P.current),(0,i.useEffect)(()=>{if(n.length>0){const t=A.current[h];if(t){const{offsetLeft:p,offsetWidth:u}=t;ie({left:p,width:u})}}},[h,n.length]),(0,N.useIntersectionObserverDelay)(D,{once:!0,threshold:.1,callback:()=>{W?.url&&ae(W.url)}}),(0,N.useIntersectionObserverDelay)(L,{once:!0,threshold:.1,callback:()=>{z?.url&&oe(z.url)}}),(0,N.useIntersectionObserverDelay)(M,{once:!0,threshold:.1,callback:()=>{R?.url&&le(R.url)}});const se=(t,p)=>{te(t),p.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},d=n.length>0,C=X==="video",l=S.length>0,O=()=>{if(d&&n[h]){const t=n[h];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return w?`${w.url},${E?.url||w.url} 1024, ${H?.url||w.url} 768`:""},q=()=>{if(d){const g=n[h],V=g.poster?.url||g.image?.url,me=g.padPoster?.url||g.imgPad?.url||V,de=g.mobPoster?.url||g.imageMob?.url||V;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:D,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:V,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:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:me,src:j||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:M,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:F||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},g.video?.url||g.image.url)})}const t=Y?.url||w?.url,p=Z?.url||E?.url||t,u=ee?.url||H?.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:D,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:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:j||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),(0,e.jsx)("div",{ref:M,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:u,src:F||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return(0,e.jsxs)("section",{ref:P,"data-ui-component-id":"ImageWithText",className:(0,c.cn)("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!d,"flex-col":!d&&(o==="top"||o==="bottom"),"flex-col laptop:flex-row":!d&&(o==="left"||o==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":d,"image-with-text--dark text-white":I==="dark","image-with-text--light text-[#1f1f1f]":I==="light","aiui-dark":l&&I==="dark"},m),children:[d&&(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:$.left,width:$.width}}),n.map((t,p)=>(0,e.jsx)("div",{ref:u=>{A.current[p]=u},onClick:u=>se(p,u),className:(0,c.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]",h===p?"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]"})},p))]})})]}),!d&&(0,e.jsxs)("div",{className:(0,c.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,c.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,c.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||T)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[T&&(0,e.jsx)("img",{src:T,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:(0,c.cn)("image-with-text__items w-full grid gap-6",{"grid-cols-1":k===1,"grid-cols-2":k===2,"grid-cols-3":k===3,"grid-cols-4":k===4}),children:S.map((t,p)=>(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]"})]},p))})]}),(0,e.jsx)("div",{className:(0,c.cn)("image-with-text__media-wrapper",{"order-1":!d&&(o==="top"||o==="left"),"order-2":!d&&(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]":d}),children:d?C?q():(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:O(),alt:n[h].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[h].image.url)}):C?q():(0,e.jsx)(s.Picture,{source:O(),className:(0,c.cn)("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!l})})})]})});G.displayName="ImageWithText";var _e=(0,J.withLayout)(G);
+//# sourceMappingURL=ImageWithText.js.map

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

@@ -0,0 +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    cols = 1,\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\n              className={cn('image-with-text__items w-full grid gap-6', {\n                'grid-cols-1': cols === 1,\n                'grid-cols-2': cols === 2,\n                'grid-cols-3': cols === 3,\n                'grid-cols-4': cols === 4,\n              })}\n            >\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", "cols", "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/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImageWithText.js';
+export type { ImageWithTextProps } from './types.js';

package/dist/cjs/biz-components/ImageWithText/index.js

@@ -0,0 +1,2 @@
+"use strict";var x=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},m=(e,t,o,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of y(t))!g.call(e,p)&&p!==o&&r(e,p,{get:()=>t[p],enumerable:!(f=a(t,p))||f.enumerable});return e};var i=(e,t,o)=>(o=e!=null?x(d(e)):{},m(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),j=e=>m(r({},"__esModule",{value:!0}),e);var l={};h(l,{default:()=>s.default});module.exports=j(l);var s=i(require("./ImageWithText.js"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/ImageWithText/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ImageWithText/index.ts"],
+  "sourcesContent": ["export { default } from './ImageWithText.js'\nexport type { ImageWithTextProps } from './types.js'\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
+  "names": ["ImageWithText_exports", "__export", "__toCommonJS", "import_ImageWithText"]
+}

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

@@ -0,0 +1,121 @@
+import type { Media, Theme } from '../../types/props.js';
+export interface ImageWithTextItem {
+    /** 功能图标 */
+    icon: Media;
+    /** 功能标题 */
+    text: string;
+    /** 功能描述 */
+    desc: string;
+}
+export interface ImageWithTextTabItem {
+    /**
+     * 桌面端图片 URL
+     * 当 mediaType='image' 时作为展示图片
+     * 当 mediaType='video' 时作为视频封面图（优先级：poster > image）
+     */
+    image: Media;
+    /**
+     * 平板端图片 URL
+     * 当 mediaType='image' 时作为展示图片
+     * 当 mediaType='video' 时作为视频封面图（优先级：padPoster > imgPad > image）
+     */
+    imgPad?: Media;
+    /**
+     * 移动端图片 URL
+     * 当 mediaType='image' 时作为展示图片
+     * 当 mediaType='video' 时作为视频封面图（优先级：mobPoster > imageMob > image）
+     */
+    imageMob?: Media;
+    /** 桌面端视频 URL（当mediaType为video时使用） */
+    video?: Media;
+    /** 平板端视频 URL（当mediaType为video时使用） */
+    padVideo?: Media;
+    /** 移动端视频 URL（当mediaType为video时使用） */
+    mobVideo?: Media;
+    /**
+     * @deprecated 推荐使用 image 字段作为视频封面
+     * 桌面端视频封面图（向后兼容）
+     */
+    poster?: Media;
+    /**
+     * @deprecated 推荐使用 imgPad 字段作为视频封面
+     * 平板端视频封面图（向后兼容）
+     */
+    padPoster?: Media;
+    /**
+     * @deprecated 推荐使用 imageMob 字段作为视频封面
+     * 移动端视频封面图（向后兼容）
+     */
+    mobPoster?: Media;
+    /** Tab 标题 */
+    title: string;
+}
+export type MediaType = 'image' | 'video';
+export type LayoutPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface ImageWithTextProps {
+    data: {
+        /** 主标题 */
+        title: string;
+        /** 副标题/描述 */
+        subtitle?: string;
+        /** 描述文本（通常是大号高亮文本，基础模式使用） */
+        desc?: string;
+        /** 描述文本图标（基础模式使用） */
+        descIcon?: string;
+        /** 主题，默认 dark */
+        theme?: Theme;
+        /** 布局位置，默认 left。支持上下左右布局（left/right/top/bottom） */
+        layout?: LayoutPosition;
+        /** @deprecated 使用 layout 代替。图片位置（向后兼容用） */
+        imagePosition?: 'left' | 'right';
+        /** 媒体类型，默认 image。所有模式都支持 image 和 video */
+        mediaType?: MediaType;
+        /**
+         * PC端图片 URL
+         * 当 mediaType='image' 时作为展示图片
+         * 当 mediaType='video' 时作为视频封面图（优先级：poster > image）
+         */
+        image?: Media;
+        /** 桌面端视频 URL（当mediaType为video时使用） */
+        video?: Media;
+        /**
+         * 平板端图片 URL
+         * 当 mediaType='image' 时作为展示图片
+         * 当 mediaType='video' 时作为视频封面图（优先级：padPoster > padImage > image）
+         */
+        padImage?: Media;
+        /** 平板端视频 URL（当mediaType为video时使用） */
+        padVideo?: Media;
+        /**
+         * 移动端图片 URL
+         * 当 mediaType='image' 时作为展示图片
+         * 当 mediaType='video' 时作为视频封面图（优先级：mobPoster > mobileImage > image）
+         */
+        mobileImage?: Media;
+        /** 移动端视频 URL（当mediaType为video时使用） */
+        mobVideo?: Media;
+        /**
+         * @deprecated 推荐使用 image 字段作为视频封面
+         * 桌面端视频封面图（当mediaType为video时使用，向后兼容）
+         */
+        poster?: Media;
+        /**
+         * @deprecated 推荐使用 padImage 字段作为视频封面
+         * 平板端视频封面图（当mediaType为video时使用，向后兼容）
+         */
+        padPoster?: Media;
+        /**
+         * @deprecated 推荐使用 mobileImage 字段作为视频封面
+         * 移动端视频封面图（当mediaType为video时使用，向后兼容）
+         */
+        mobPoster?: Media;
+        /** 功能项列表（可选，用于展示功能特性列表） */
+        items?: ImageWithTextItem[];
+        /** Tab数据列表（TabWithImage模式，当存在时优先级最高） */
+        datalist?: ImageWithTextTabItem[];
+        /** 功能项列数，默认 1行1列 */
+        cols?: number;
+    };
+    /** 自定义类名 */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +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: 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    /** \u529F\u80FD\u9879\u5217\u6570\uFF0C\u9ED8\u8BA4 1\u884C1\u5217 */\n    cols?: number\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/InlineVideo/index.d.ts

@@ -0,0 +1,16 @@
+import type { Theme } from '../../types/props.js';
+export interface InlineVideoData {
+    title: string;
+    subtitle?: string;
+    desc: string;
+    poster?: string;
+    videoUrl: string;
+    mobPoster?: string;
+    mobVideoUrl: string;
+    theme?: Theme;
+}
+export interface InlineVideoProps {
+    data: InlineVideoData;
+    className?: string;
+}
+export default function VideoWithTitle(props: InlineVideoProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/biz-components/InlineVideo/index.js

@@ -0,0 +1,2 @@
+"use strict";var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var h=(i,e)=>{for(var l in e)p(i,l,{get:e[l],enumerable:!0})},b=(i,e,l,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!u.call(i,o)&&o!==l&&p(i,o,{get:()=>e[o],enumerable:!(s=v(e,o))||s.enumerable});return i};var g=i=>b(p({},"__esModule",{value:!0}),i);var w={};h(w,{default:()=>d});module.exports=g(w);var t=require("react/jsx-runtime"),n=require("../../components/index.js"),a=require("../../helpers/utils.js");function d(i){const{title:e,subtitle:l,desc:s,poster:o,videoUrl:m,mobPoster:r,mobVideoUrl:x,theme:c="light"}=i?.data??{};return(0,t.jsxs)("section",{className:(0,a.cn)("inline-video-section flex flex-col items-center rounded-[16px]","text-info-primary",{"aiui-dark":c==="dark"},i.className),children:[(0,t.jsxs)("div",{className:(0,a.cn)("inline-video-content laptop:items-center flex w-full flex-col items-start"),children:[(0,t.jsx)(n.Heading,{as:"h2",size:4,html:e,className:"inline-video-title laptop:text-center shrink text-left"}),(0,t.jsxs)("div",{className:"inline-video-text-wrapper",children:[l&&(0,t.jsx)(n.Heading,{size:3,as:"h5",html:l,className:(0,a.cn)("inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left")}),(0,t.jsx)(n.Text,{as:"p",size:4,html:s,className:"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]"})]})]}),(0,t.jsxs)("div",{className:"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-[16px] xl:h-[360px]",children:[(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:m,loop:!0,className:"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]"}),(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:r,src:x,loop:!0,className:"inline-video-mobile tablet:hidden block w-full"})]})]})}
+//# sourceMappingURL=index.js.map