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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n  MarqueeProps,\n  MarqueeItemProps,\n  MarqueeImageContentProps,\n  MarqueeTextContentProps,\n  MarqueeIconAndTextContentProps,\n  MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n    const innerRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n      componentType,\n      componentName,\n    })\n\n    const duration = `${speed * 5}ms`\n    const gap = 'clamp(24px, 4vw, 64px)'\n\n    const [copies, setCopies] = useState(2)\n\n    useLayoutEffect(() => {\n      const track = trackRef.current\n      if (!track) return\n\n      const calcCopies = () => {\n        const trackWidth = track.offsetWidth\n        if (trackWidth === 0) return\n        const viewportWidth = window.innerWidth\n        const minCopies = Math.ceil(viewportWidth / trackWidth)\n        setCopies(Math.max(2, minCopies))\n      }\n\n      calcCopies()\n      innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n      const ro = new ResizeObserver(() => {\n        calcCopies()\n        innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n      })\n      ro.observe(track)\n      return () => ro.disconnect()\n    }, [items])\n\n    return (\n      <div ref={innerRef} id={dataKey ? `Marquee-${dataKey}` : undefined} className={cn('w-full', className)}>\n        <div\n          className={cn(\n            'flex h-full w-max items-center',\n            reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n          )}\n          style={{ '--marquee-duration': duration } as React.CSSProperties}\n        >\n          {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n          <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n            {items.map((item, index) => (\n              <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n                <MarqueeItem data={item} />\n              </div>\n            ))}\n          </div>\n\n          {Array.from({ length: copies }).map((_, copyIndex) => (\n            <div\n              key={`copy-group-${copyIndex}`}\n              className=\"flex h-full shrink-0 items-center\"\n              style={{ gap, paddingRight: gap }}\n              aria-hidden=\"true\"\n            >\n              {items.map((item, index) => (\n                <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n                  <MarqueeItem data={item} />\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n      {data.type === 'iconAndText' && (\n        <MarqueeIconAndTextContent\n          icon={data?.iconImage}\n          text={data?.iconText}\n          iconClassName={configuration?.iconClassName}\n          textClassName={configuration?.textClassName}\n        />\n      )}\n      {data.type === 'picture' && (\n        <MarqueePictureContent pictureImage={data?.pictureImage} pictureClassName={configuration?.pictureClassName} />\n      )}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nconst MarqueeIconAndTextContent = ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps) => {\n  return (\n    <div className=\"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1\">\n      {icon && (\n        <img\n          src={icon?.url}\n          alt={icon?.alt || ''}\n          className={cn('desktop:size-6 size-5 shrink-0 object-contain', iconClassName)}\n        />\n      )}\n      {text && (\n        <Text\n          as=\"div\"\n          html={text}\n          className={cn(\n            'laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ',\n            textClassName\n          )}\n        />\n      )}\n    </div>\n  )\n}\n\nMarqueeIconAndTextContent.displayName = 'MarqueeIconAndTextContent'\n\nconst MarqueePictureContent = ({ pictureImage, pictureClassName }: MarqueePictureContentProps) => {\n  return (\n    <div className=\"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0\">\n      <Picture\n        source={pictureImage?.url}\n        alt={pictureImage?.alt || ''}\n        className=\"w-full\"\n        imgClassName={cn('object-contain', pictureClassName)}\n      />\n    </div>\n  )\n}\n\nMarqueePictureContent.displayName = 'MarqueePictureContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n  MarqueeProps,\n  MarqueeItemProps,\n  MarqueeImageContentProps,\n  MarqueeTextContentProps,\n  MarqueeIconAndTextContentProps,\n  MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n    const innerRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n      componentType,\n      componentName,\n    })\n\n    const duration = `${speed * 5}ms`\n    const gap = 'clamp(24px, 4vw, 64px)'\n\n    const [copies, setCopies] = useState(2)\n\n    useLayoutEffect(() => {\n      const track = trackRef.current\n      if (!track) return\n\n      const calcCopies = () => {\n        const trackWidth = track.offsetWidth\n        if (trackWidth === 0) return\n        const viewportWidth = window.innerWidth\n        const minCopies = Math.ceil(viewportWidth / trackWidth)\n        setCopies(Math.max(2, minCopies))\n      }\n\n      calcCopies()\n      innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n      const ro = new ResizeObserver(() => {\n        calcCopies()\n        innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n      })\n      ro.observe(track)\n      return () => ro.disconnect()\n    }, [items])\n\n    return (\n      <div\n        ref={innerRef}\n        id={dataKey ? `Marquee-${dataKey}` : undefined}\n        className={cn('text-info-primary w-full', className)}\n      >\n        <div\n          className={cn(\n            'flex h-full w-max items-center',\n            reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n          )}\n          style={{ '--marquee-duration': duration } as React.CSSProperties}\n        >\n          {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n          <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n            {items.map((item, index) => (\n              <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n                <MarqueeItem data={item} />\n              </div>\n            ))}\n          </div>\n\n          {Array.from({ length: copies }).map((_, copyIndex) => (\n            <div\n              key={`copy-group-${copyIndex}`}\n              className=\"flex h-full shrink-0 items-center\"\n              style={{ gap, paddingRight: gap }}\n              aria-hidden=\"true\"\n            >\n              {items.map((item, index) => (\n                <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n                  <MarqueeItem data={item} />\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n      {data.type === 'iconAndText' && (\n        <MarqueeIconAndTextContent\n          icon={data?.iconImage}\n          text={data?.iconText}\n          iconClassName={configuration?.iconClassName}\n          textClassName={configuration?.textClassName}\n        />\n      )}\n      {data.type === 'picture' && (\n        <MarqueePictureContent pictureImage={data?.pictureImage} pictureClassName={configuration?.pictureClassName} />\n      )}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nconst MarqueeIconAndTextContent = ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps) => {\n  return (\n    <div className=\"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1\">\n      {icon && (\n        <img\n          src={icon?.url}\n          alt={icon?.alt || ''}\n          className={cn('desktop:size-6 size-5 shrink-0 object-contain', iconClassName)}\n        />\n      )}\n      {text && (\n        <Text\n          as=\"div\"\n          html={text}\n          className={cn(\n            'laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ',\n            textClassName\n          )}\n        />\n      )}\n    </div>\n  )\n}\n\nMarqueeIconAndTextContent.displayName = 'MarqueeIconAndTextContent'\n\nconst MarqueePictureContent = ({ pictureImage, pictureClassName }: MarqueePictureContentProps) => {\n  return (\n    <div className=\"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0\">\n      <Picture\n        source={pictureImage?.url}\n        alt={pictureImage?.alt || ''}\n        className=\"w-full\"\n        imgClassName={cn('object-contain', pictureClassName)}\n      />\n    </div>\n  )\n}\n\nMarqueePictureContent.displayName = 'MarqueePictureContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent }\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "useLayoutEffect", "useState", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "Marquee", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "MarqueeItem", "_", "copyIndex", "data", "configuration", "MarqueeImageContent", "MarqueeTextContent", "MarqueeIconAndTextContent", "MarqueePictureContent", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName", "Marquee_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current) return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect_box =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    const aspect_no_stickybox =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect_box,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-info-primary')}\n                    onClick={() => {\n                      setVisible(true)\n                      // if (isPlaying) {\n                      //   if (videoRef.current) {\n                      //     videoRef.current.pause()\n                      //   }\n                      //   setIsPlaying(false)\n                      // } else {\n                      //   if (videoRef.current) {\n                      //     videoRef.current.play()\n                      //   }\n                      //   setIsPlaying(true)\n                      // }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect_no_stickybox, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div className=\"media-cover relative left-0 top-0 h-screen w-screen overflow-hidden\">\n                {!sticky && (\n                  <div\n                    className={cn(\n                      'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                      'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n                    )}\n                  >\n                    {title_html && !isPlaying && (\n                      <div\n                        className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                        dangerouslySetInnerHTML={{ __html: title_html }}\n                      />\n                    )}\n                    {videoTitle_html && isPlaying && (\n                      <div\n                        className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                        dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                      />\n                    )}\n                    {btnText && (\n                      <Button\n                        ref={btnFadeInRef}\n                        variant=\"link\"\n                        className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                        onClick={() => {\n                          setVisible(true)\n                          onBtnClick && onBtnClick?.()\n                        }}\n                      >\n                        {btnText}\n                      </Button>\n                    )}\n                  </div>\n                )}\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect_box)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "Heading", "Text", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "p", "m", "aspect_box", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "Heading", "Text", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "p", "m", "aspect", "MediaPlayerBase_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as i}from"react/jsx-runtime";import{useState as a,forwardRef as V,useRef as v}from"react";import{cn as B,getLocalizedPath as $}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import{Picture as b,Link as z,Text as H}from"../../components/index.js";import _ from"../Title/index.js";import E from"../SwiperBox/index.js";import{Container as R}from"../../components/container.js";import{VideoModal as S}from"../VideoModal/index.js";import{convertLexicalToHTML as U}from"@payloadcms/richtext-lexical/html";import{useExposure as j}from"../../hooks/useExposure.js";import{useAiuiContext as g}from"../AiuiProvider/index.js";import{trackUrlRef as q}from"../../shared/trackUrlRef.js";const p="video",n="media_player_multi",Y=({data:e,configuration:o})=>{const t=v(null),{trackingData:s}=g();return j(t,{componentType:p,componentName:n,componentTitle:e?.title,position:o?.index+1,componentDescription:e?.description}),i("div",{ref:t,className:B("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",o.shape==="round"?"rounded-2xl":""),children:[i("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(b,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(b,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),i("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[i("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(z,{asChild:!e?.href,href:q($(e?.href||"",o?.locale||"us"),`${s?.contextHandle||""}_${p}_${n}`),"data-headless-type-name":`${p}#${n}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:l(H,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},w=V(({data:{items:e=[],shape:o="square",title:t,containerProps:s},className:m="",key:y,onVideoPlayBtnClick:M,...k},P)=>{const[d,c]=a(!1),[N,f]=a(""),[L,u]=a(""),{locale:T="us",trackingData:A}=g(),x=typeof t=="string"?t:t&&U({data:t}),I=v(null),h=e.length===2;return i("div",{...k,ref:I,className:m,children:[l("div",{className:"mediaplayermulti-box",children:l(R,{...s||{},className:"overflow-hidden",children:i("div",{className:m,ref:P,children:[t&&l(_,{className:"mediaplayermulti-title",data:{title:x||""}}),l(E,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+y,data:{list:e,configuration:{shape:o,locale:T,onVideoPlayBtnClick:(C,r)=>{c(!0),r?.isYouTube?(u(r?.youtubeId||""),f("")):(f(r?.video?.url||""),u("")),M?.(C)},title:x}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),d&&l(S,{visible:d,youTubeId:L,videoUrl:N,onCloseModal:()=>c(!1)})]})});w.displayName="MediaPlayerMulti";var oe=D(w);export{oe as default};
+"use client";import{jsx as l,jsxs as i}from"react/jsx-runtime";import{useState as r,forwardRef as C,useRef as h}from"react";import{cn as V,getLocalizedPath as B}from"../../helpers/utils.js";import{withLayout as $}from"../../shared/Styles.js";import{Picture as v,Link as z,Text as D}from"../../components/index.js";import E from"../Title/index.js";import H from"../SwiperBox/index.js";import{Container as R}from"../../components/container.js";import{VideoModal as S}from"../VideoModal/index.js";import{convertLexicalToHTML as U}from"@payloadcms/richtext-lexical/html";import{useExposure as _}from"../../hooks/useExposure.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import{trackUrlRef as q}from"../../shared/trackUrlRef.js";const a="video",p="media_player_multi",Y=({data:e,configuration:o})=>{const t=h(null);return _(t,{componentType:a,componentName:p,componentTitle:e?.title,position:o?.index+1,componentDescription:e?.description}),i("div",{ref:t,className:V("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",o.shape==="round"?"rounded-2xl":""),children:[i("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(v,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(v,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),i("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[i("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(z,{asChild:!e?.href,href:q(B(e?.href||"",o?.locale||"us"),`${a}_${p}`),"data-headless-type-name":`${a}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:l(D,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},b=C(({data:{items:e=[],shape:o="square",title:t,containerProps:g},className:n="",key:w,onVideoPlayBtnClick:y,...M},k)=>{const[m,d]=r(!1),[P,c]=r(""),[N,f]=r(""),{locale:L="us"}=j(),u=typeof t=="string"?t:t&&U({data:t}),T=h(null),x=e.length===2;return i("div",{...M,ref:T,className:n,children:[l("div",{className:"mediaplayermulti-box",children:l(R,{...g||{},className:"overflow-hidden",children:i("div",{className:n,ref:k,children:[t&&l(E,{className:"mediaplayermulti-title",data:{title:u||""}}),l(H,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+w,data:{list:e,configuration:{shape:o,locale:L,onVideoPlayBtnClick:(I,s)=>{d(!0),s?.isYouTube?(f(s?.youtubeId||""),c("")):(c(s?.video?.url||""),f("")),y?.(I)},title:u}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),m&&l(S,{visible:m,youTubeId:N,videoUrl:P,onCloseModal:()=>d(!1)})]})});b.displayName="MediaPlayerMulti";var te=$(b);export{te as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { trackingData } = useAiuiContext()\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.description,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n              }}\n              className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              asChild={!data?.href}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Text\n                html={data.quote}\n                weight=\"bold\"\n                className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n              />\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    {\n      data: { items = [], shape = 'square', title, containerProps },\n      className = '',\n      key,\n      onVideoPlayBtnClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length === 2\n\n    return (\n      <div {...rest} ref={wrapperRef} className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: {\n                    shape,\n                    locale,\n                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId(data?.youtubeId || '')\n                        setVideoUrl('')\n                      } else {\n                        setVideoUrl(data?.video?.url || '')\n                        setYouTubeId('')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\n                    title: title_html,\n                  },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        {visible && (\n          <VideoModal\n            visible={visible}\n            youTubeId={youTubeId}\n            videoUrl={videoUrl}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "getLocalizedPath", "withLayout", "Picture", "Link", "Text", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "trackingData", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.description,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n              }}\n              className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              asChild={!data?.href}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Text\n                html={data.quote}\n                weight=\"bold\"\n                className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n              />\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    {\n      data: { items = [], shape = 'square', title, containerProps },\n      className = '',\n      key,\n      onVideoPlayBtnClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const { locale = 'us' } = useAiuiContext()\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length === 2\n\n    return (\n      <div {...rest} ref={wrapperRef} className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: {\n                    shape,\n                    locale,\n                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId(data?.youtubeId || '')\n                        setVideoUrl('')\n                      } else {\n                        setVideoUrl(data?.video?.url || '')\n                        setYouTubeId('')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\n                    title: title_html,\n                  },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        {visible && (\n          <VideoModal\n            visible={visible}\n            youTubeId={youTubeId}\n            videoUrl={videoUrl}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "getLocalizedPath", "withLayout", "Picture", "Link", "Text", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
 }

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

@@ -1,5 +1,5 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import z,{useImperativeHandle as P,useRef as T}from"react";import{useMediaQuery as _}from"react-responsive";import{Button as x,Heading as j,Picture as y,Text as C}from"../../components/index.js";import{withLayout as R}from"../../shared/Styles.js";import{cn as c,getLocalizedPath as D}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as I}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{useAiuiContext as S}from"../AiuiProvider/index.js";const r="image",n="member_area",f=z.forwardRef(({data:g,className:k="",...v},h)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:N,shape:$,primaryButtonHandler:d,secondaryButtonHandler:B}=g,q=_({query:"(max-width: 768px)"}),m=T(null),{locale:M="us",trackingData:E}=S();P(h,()=>m.current),I(m,{componentType:r,componentName:n,componentTitle:t,componentDescription:o});const w=()=>{console.log("primaryButtonHandler",d),d?.()},H=()=>{B?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",...v,className:c("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",k,{"aiui-dark":N==="dark","rounded-box":$==="rounded","h-[480px]":q}),ref:m,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import z,{useImperativeHandle as H,useRef as P}from"react";import{useMediaQuery as T}from"react-responsive";import{Button as x,Heading as j,Picture as y,Text as C}from"../../components/index.js";import{withLayout as R}from"../../shared/Styles.js";import{cn as d,getLocalizedPath as _}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as I}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{useAiuiContext as D}from"../AiuiProvider/index.js";const r="image",m="member_area",f=z.forwardRef(({data:g,className:k="",...v},h)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:N,shape:B,primaryButtonHandler:c,secondaryButtonHandler:$}=g,q=T({query:"(max-width: 768px)"}),n=P(null),{locale:M="us"}=D();H(h,()=>n.current),I(n,{componentType:r,componentName:m,componentTitle:t,componentDescription:o});const E=()=>{console.log("primaryButtonHandler",c),c?.()},w=()=>{$?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",...v,className:d("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",k,{"aiui-dark":N==="dark","rounded-box":B==="rounded","h-[480px]":q}),ref:n,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
               tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
               laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
-            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(j,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(C,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:H,className:c("member-equity-button-secondary ",u),as:"a",href:L(D(a.link||"",M),`${E?.contextHandle||""}_${r}_${n}`),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:w,className:c("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});f.displayName="MemberEquity";var W=R(f);export{W as default};
+            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(j,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(C,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:w,className:d("member-equity-button-secondary ",u),as:"a",href:L(_(a.link||"",M),`${r}_${m}`),"data-headless-type-name":`${r}#${m}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:E,className:d("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${m}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});f.displayName="MemberEquity";var O=R(f);export{O as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '', ...rest }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us', trackingData } = useAiuiContext()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        {...rest}\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(secondaryButton.link || '', locale),\n                    `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                  )}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "getLocalizedPath", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MemberEquity", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "trackingData", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '', ...rest }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us' } = useAiuiContext()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        {...rest}\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(secondaryButton.link || '', locale),\n                    `${componentType}_${componentName}`\n                  )}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "getLocalizedPath", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MemberEquity", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as Y,jsx as t,jsxs as l}from"react/jsx-runtime";import O,{useState as L,useEffect as Z,useRef as F}from"react";import{useMediaQuery as J}from"react-responsive";import{withLayout as K}from"../../shared/Styles.js";import H from"../../components/picture.js";import R from"../../components/button.js";import{Heading as U}from"../../components/heading.js";import{VideoModal as W}from"../VideoModal/index.js";import{Grid as X,GridItem as D}from"../../components/grid.js";import ee from"../Title/index.js";import{cn as N,spaceToHyphen as _,getLocalizedPath as S}from"../../helpers/utils.js";import z from"../SwiperBox/index.js";import{isVideo as E}from"../../shared/mimeType.js";import{Tabs as te,TabsList as ae,TabsTrigger as se,TabsContent as le}from"../../components/tabs.js";import{useExposure as oe}from"../../hooks/useExposure.js";import{trackUrlRef as j}from"../../shared/trackUrlRef.js";import{useAiuiContext as A}from"../AiuiProvider/index.js";import{gaTrack as ie}from"../../shared/track.js";const m="image",h="p1_banner",V=({data:f,configuration:s,jIndex:v,spanType:T,title:$,onSecondaryButtonClick:B,onPrimaryButtonClick:I})=>{const[d,o]=L(!1),x=J({query:"(max-width: 768px)"}),k=F(null),u=()=>{if(T)switch(T){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(s?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};oe(k,{componentType:m,componentName:h,position:v,componentTitle:f.title,componentDescription:f.description,navigation:s?.activeTab}),Z(()=>{o(x)},[x]);const{theme:C="light",title:i,description:r,imageUrl:p,primaryButton:w,secondaryButton:n,imageMobileUrl:c,blockLink:G,video:M,youtubeId:b,isYouTube:g,id:P}=f,y="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]",{trackingData:e}=A();return l("div",{className:N("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",u(),{"rounded-2xl":s?.shape==="rounded","aiui-dark":C==="dark","h-[400px]":d},"text-info-primary"),ref:k,children:[(G||n.link)&&t("a",{className:"absolute inset-0 z-10",href:j(S(G||n.link||"",s?.locale||"us"),`${e?.contextHandle||""}_${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${r}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[E(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(H,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),E(c?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:c?.url,type:"video/mp4"})}):t(H,{source:c?.url||p?.url,alt:c?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:N("absolute inset-0 z-20 flex flex-col",T==="full"?"laptop:justify-center justify-end":"justify-end"),children:[l("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4",children:[l("div",{className:"flex flex-col gap-1",children:[t(U,{size:3,as:"h3",className:"item-title",html:i}),t(U,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:r})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&l(R,{"aria-label":i??r,className:N(y,"link-left"),variant:"secondary",as:"a","data-track":`${P}-link-left`,onClick:()=>{B?.(f)},href:j(S(n.link||"",s?.locale||"us"),`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${r}#${n.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:[n.text,t("span",{className:"sr-only",children:i??r})]}),w&&w.text&&t(R,{"aria-label":i??r,className:N(y,"link-right"),variant:"primary","data-track":`${P}-link-right`,as:"a",onClick:()=>{I?.(f)},href:j(S(w.link||"",s?.locale||"us"),`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${r}#${w.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:w.text})]})]}),(M?.url||b)&&t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t("button",{onClick:()=>{s?.onVideoPlayBtnClick?.(M?.url||b,g)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},Q=O.forwardRef((f,s)=>{const{data:v,className:T,onSecondaryButtonClick:$,onPrimaryButtonClick:B,...I}=f,{shape:d,sectionTitle:o,groupByTab:x=!1,items:k=[],carousel:u}=v,[C,i]=L(!1),[r,p]=L(""),[w,n]=L(""),{locale:c="us",trackingData:G}=A(),M=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},b=k.map(e=>e.tabName).filter(Boolean).filter((e,a,q)=>q.indexOf(e)===a),g=(e,a)=>{i(!0),a?n?.(e||""):p?.(e||"")},P=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},y=b.map(e=>({tabName:e,items:k.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,...I,className:N("multiLayoutGraphicBlock","text-info-primary",T),children:[o&&t(ee,{data:{title:o},className:"section-title"}),x?l(te,{shape:d,align:"left",defaultValue:_(b[0]),children:[t(ae,{children:b.map((e,a)=>t(se,{value:_(e),onClick:()=>{ie({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:h,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),b.map((e,a)=>t(le,{value:_(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(Y,{children:[t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[e]||[],configuration:{shape:d,isTab:x,activeTab:e,title:o,num:y?.[e]?.length||0,locale:c,onVideoPlayBtnClick:g,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:P(y?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:P(y?.[e]?.length||0)}}}),u&&u?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:d,isTab:x,locale:c,onVideoPlayBtnClick:g,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(Y,{children:[l(X,{className:"w-full",children:[k.map((e,a)=>t(D,{span:M(e.width??"full"),className:"laptop:block hidden",children:t(V,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:g,title:o},jIndex:a,spanType:e.width,onSecondaryButtonClick:$,onPrimaryButtonClick:B})},`${e?.title||""}${a}`)),k.map((e,a)=>t(D,{span:M("full"),className:"laptop:hidden block",children:t(V,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:g,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:d,locale:c,onVideoPlayBtnClick:g,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),C&&t(W,{visible:C,youTubeId:w,videoUrl:r,onCloseModal:()=>i(!1)})]})});Q.displayName="MultiLayoutGraphicBlock";var Te=K(Q);export{Te as default};
+import{Fragment as A,jsx as t,jsxs as l}from"react/jsx-runtime";import Y,{useState as L,useEffect as q,useRef as O}from"react";import{useMediaQuery as Z}from"react-responsive";import{withLayout as F}from"../../shared/Styles.js";import j from"../../components/picture.js";import R from"../../components/button.js";import{Heading as U}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as E}from"../../components/grid.js";import W from"../Title/index.js";import{cn as P,spaceToHyphen as G,getLocalizedPath as _}from"../../helpers/utils.js";import S from"../SwiperBox/index.js";import{isVideo as H}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{gaTrack as oe}from"../../shared/track.js";const h="image",f="p1_banner",N=({data:k,configuration:s,jIndex:v,spanType:T,title:$,onSecondaryButtonClick:B,onPrimaryButtonClick:I})=>{const[d,o]=L(!1),x=Z({query:"(max-width: 768px)"}),w=O(null),u=()=>{if(T)switch(T){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(s?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(w,{componentType:h,componentName:f,position:v,componentTitle:k.title,componentDescription:k.description,navigation:s?.activeTab}),q(()=>{o(x)},[x]);const{theme:V="light",title:i,description:r,imageUrl:p,primaryButton:b,secondaryButton:n,imageMobileUrl:c,blockLink:M,video:g,youtubeId:m,isYouTube:C,id:y}=k,e="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:P("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",u(),{"rounded-2xl":s?.shape==="rounded","aiui-dark":V==="dark","h-[400px]":d},"text-info-primary"),ref:w,children:[(M||n.link)&&t("a",{className:"absolute inset-0 z-10",href:z(_(M||n.link||"",s?.locale||"us"),`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${i}#${r}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[H(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(j,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),H(c?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:c?.url,type:"video/mp4"})}):t(j,{source:c?.url||p?.url,alt:c?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:P("absolute inset-0 z-20 flex flex-col",T==="full"?"laptop:justify-center justify-end":"justify-end"),children:[l("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4",children:[l("div",{className:"flex flex-col gap-1",children:[t(U,{size:3,as:"h3",className:"item-title",html:i}),t(U,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:r})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&l(R,{"aria-label":i??r,className:P(e,"link-left"),variant:"secondary",as:"a","data-track":`${y}-link-left`,onClick:()=>{B?.(k)},href:z(_(n.link||"",s?.locale||"us"),`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${i}#${r}#${n.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:[n.text,t("span",{className:"sr-only",children:i??r})]}),b&&b.text&&t(R,{"aria-label":i??r,className:P(e,"link-right"),variant:"primary","data-track":`${y}-link-right`,as:"a",onClick:()=>{I?.(k)},href:z(_(b.link||"",s?.locale||"us"),`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${i}#${r}#${b.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:b.text})]})]}),(g?.url||m)&&t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t("button",{onClick:()=>{s?.onVideoPlayBtnClick?.(g?.url||m,C)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},D=Y.forwardRef((k,s)=>{const{data:v,className:T,onSecondaryButtonClick:$,onPrimaryButtonClick:B,...I}=k,{shape:d,sectionTitle:o,groupByTab:x=!1,items:w=[],carousel:u}=v,[V,i]=L(!1),[r,p]=L(""),[b,n]=L(""),{locale:c="us"}=le(),M=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},g=w.map(e=>e.tabName).filter(Boolean).filter((e,a,Q)=>Q.indexOf(e)===a),m=(e,a)=>{i(!0),a?n?.(e||""):p?.(e||"")},C=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},y=g.map(e=>({tabName:e,items:w.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,...I,className:P("multiLayoutGraphicBlock","text-info-primary",T),children:[o&&t(W,{data:{title:o},className:"section-title"}),x?l(X,{shape:d,align:"left",defaultValue:G(g[0]),children:[t(ee,{children:g.map((e,a)=>t(te,{value:G(e),onClick:()=>{oe({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:f,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),g.map((e,a)=>t(ae,{value:G(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(A,{children:[t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[e]||[],configuration:{shape:d,isTab:x,activeTab:e,title:o,num:y?.[e]?.length||0,locale:c,onVideoPlayBtnClick:m,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:N,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0)}}}),u&&u?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:d,isTab:x,locale:c,onVideoPlayBtnClick:m,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:N,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(A,{children:[l(K,{className:"w-full",children:[w.map((e,a)=>t(E,{span:M(e.width??"full"),className:"laptop:block hidden",children:t(N,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:m,title:o},jIndex:a,spanType:e.width,onSecondaryButtonClick:$,onPrimaryButtonClick:B})},`${e?.title||""}${a}`)),w.map((e,a)=>t(E,{span:M("full"),className:"laptop:hidden block",children:t(N,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:m,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:d,locale:c,onVideoPlayBtnClick:m,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:N,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),V&&t(J,{visible:V,youTubeId:b,videoUrl:r,onCloseModal:()=>i(!1)})]})});D.displayName="MultiLayoutGraphicBlock";var xe=F(D);export{xe as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map