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

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

@@ -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": ["Marquee_exports", "__export", "MarqueeIconAndTextContent", "MarqueeImageContent", "MarqueeItem", "MarqueePictureContent", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_css", "import_useExposure", "componentType", "componentName", "Marquee", "React", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "_", "copyIndex", "data", "configuration", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName"]
 }

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

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

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

@@ -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": "ulBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAyNU,IAAAI,EAAA,6BAxNVC,EAAsF,iBACtFC,GAAyB,kBACzBC,EAAmB,kCACnBC,GAA2B,kCAC3BC,EAAmB,0CACnBC,EAA8B,qCAC9BC,GAA2B,kCAC3BC,EAAqC,6CAGrCC,GAA0B,uCAE1BC,GAA4B,sCAC5BC,EAA4B,gDAC5BC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtB,OAAK,eAAe,gBAAe,WAAS,EAE5C,MAAMC,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,QAAAC,GACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAAqBC,EAAsB,KAAI,YAAS,CAAC,EAC1D,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjDC,KAAe,UAA0B,IAAI,EAC7CC,KAAmB,UAA6B,IAAI,EACpDC,KAAmB,UAA6B,IAAI,EACpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,cAAU,KAE7C,uBAAoBtB,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOtC,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYR,EAAe,CAAC,EACzG+C,EACJ,OAAOtC,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYT,EAAe,CAAC,KAEzF,aAAU,IAAM,CACV6C,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,KAAwB,aAAS,IAAM,CAC3C,GAAIX,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAAChB,EAAe,QAAS,OAC7B,MAAMiB,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,YAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC,OAAK,IAAIgB,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS,OAAK,IAAIA,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASL,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,IAAc,CACvB,MAAMC,EAAWD,GAAK,SAChBE,GAAQH,EAAM,OACdI,GAAW,EAAID,GACfE,GAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,IAAU,EAAIE,IAC3BI,GAAQL,IAAY,EAAIC,IAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI9B,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf,OAAK,IAAIA,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASN,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,KAEX,gBAAYN,EAAU,CACpB,cAAAxC,GACA,cAAAD,GACA,eAAgBgD,CAClB,CAAC,EAED,MAAMsB,MAAc,WAAQ,IACtBvB,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAEhC,GAAI5B,KAAY,cACd,SACE,QAAC,OACE,GAAGK,EACJ,IAAKe,EACL,aAAW,MACT,oDACA,4EACA,8FACA,uDACA,CACE,YAAavB,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,oBAAC,OAAI,IAAKuC,EAAW,UAAU,uCAAuC,KAGtE,QAAC,OAAI,UAAU,uBACb,oBAAC,EAAAyB,QAAA,CACC,SAAUlC,EACV,OAAQpB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAyD,QAAA,CACC,SAAUlC,EACV,OAAQpB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OAAI,UAAU,+BAA+B,GAChD,KAIA,QAAC,OACC,aAAW,MACT,4DACA,mBACA,2BACA,6CACA,+BACA,kBACF,EAIA,oBAAC,OAAI,UAAU,+BACZ,SAAAM,MACC,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAU,oBACjC,SAAAA,EACH,EAEJ,KAIA,QAAC,OACC,aAAW,MACT,kDACA,iDACF,EAGC,UAAAC,GAAcA,EAAW,OAAS,MACjC,OAAC,OAAI,UAAU,mCACZ,SAAAA,EAAW,IAAI,CAACmD,EAAG,OAClB,OAAC,QAAa,GAAG,IAAI,KAAM,EAAG,UAAU,sDACrC,gBAAOA,GAAM,SAAWA,EAAIA,EAAE,MADtB,CAEX,CACD,EACH,EAIDlD,GAAWA,EAAQ,OAAS,MAC3B,OAAC,OAAI,aAAW,MAAG,sCAAuC,kCAAkC,EACzF,SAAAA,EAAQ,IAAI,CAACmD,EAAG,OACf,QAAC,OAAY,UAAU,sBAErB,oBAAC,QAAK,UAAU,oIACb,SAAAA,EAAE,MACL,KAEA,OAAC,QAAK,GAAG,OAAO,KAAM,EAAG,UAAU,+BAChC,SAAAA,EAAE,MACL,IARQ,CASV,CACD,EACH,GAEJ,GACF,GACF,EAIJ,MAAMC,GACJ,6NAGF,SACE,oBACG,UAAAhD,MACC,OAAC,OACE,GAAGF,EACJ,IAAKe,EACL,aAAW,MACT,oCACAmC,GACA,CACE,YAAa1D,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,mBAAC,OAAI,IAAKuC,EACR,oBAAC,OAAI,UAAU,yGACZ,UAAAE,GAAc,CAACrB,MACd,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQqB,CAAW,EAChD,EAEDC,GAAmBtB,MAClB,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQsB,CAAgB,EACrD,EAEDrC,MACC,OAAC,EAAA+D,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,kDAAkD,EAChE,QAAS,IAAM,CACbvC,EAAW,EAAI,EAYf3B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EACF,EACF,KAEF,QAAC,OACE,GAAKc,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,aAAW,MAAG,WAAY/D,CAAS,EAEnC,oBAAC,OAAI,UAAU,gBACb,mBAAC,OACC,GAAIC,EACJ,aAAW,MAAG,2BAA4BkB,EAAS,kBA3E3D,+LA2EoG,CAC1F,YAAaV,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAED,oBAAC,OAAI,UAAU,sEACZ,WAACQ,MACA,QAAC,OACC,aAAW,MACT,wFACA,oDACF,EAEC,UAAAsB,GAAc,CAACrB,MACd,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQqB,CAAW,EAChD,EAEDC,GAAmBtB,MAClB,OAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQsB,CAAgB,EACrD,EAEDrC,MACC,OAAC,EAAA+D,QAAA,CACC,IAAKhC,EACL,QAAQ,OACR,aAAW,MAAG,2EAA2E,EACzF,QAAS,IAAM,CACbP,EAAW,EAAI,EACf3B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,KAEF,OAAC,EAAA2D,QAAA,CACC,SAAUlC,EACV,OAAQpB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAyD,QAAA,CACC,SAAUlC,EACV,OAAQpB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKwB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,EACF,EACF,EACCZ,MACC,OAAC,OACC,aAAW,MAAGA,GAAU,iDAAkDgD,EAAU,EACpF,MAAOhD,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWtB,MACV,OAAC,eAAW,QAASsB,EAAS,UAAWtB,EAAW,aAAc,IAAMuB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA9B,GAAgB,YAAc,kBAE9B,IAAOvB,MAAQ,eAAWuB,EAAe",
-  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_components", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_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", "ScrollLoadVideo", "p", "m", "aspect_box", "Button"]
+  "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": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_components", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_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", "ScrollLoadVideo", "p", "m", "aspect", "Button"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var U=Object.create;var p=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},w=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!A.call(e,s)&&s!==o&&p(e,s,{get:()=>t[s],enumerable:!(a=j(t,s))||a.enumerable});return e};var y=(e,t,o)=>(o=e!=null?U(Y(e)):{},w(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>w(p({},"__esModule",{value:!0}),e);var K={};Z(K,{default:()=>J});module.exports=F(K);var l=require("react/jsx-runtime"),i=require("react"),n=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),r=require("../../components/index.js"),P=y(require("../Title/index.js")),N=y(require("../SwiperBox/index.js")),L=require("../../components/container.js"),T=require("../VideoModal/index.js"),I=require("@payloadcms/richtext-lexical/html"),C=require("../../hooks/useExposure.js"),f=require("../AiuiProvider/index.js"),V=require("../../shared/trackUrlRef.js");const d="video",c="media_player_multi",G=({data:e,configuration:t})=>{const o=(0,i.useRef)(null),{trackingData:a}=(0,f.useAiuiContext)();return(0,C.useExposure)(o,{componentType:d,componentName:c,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:o,className:(0,n.cn)("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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{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"}),(0,l.jsx)(r.Picture,{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"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.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:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("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:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("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&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,V.trackUrlRef)((0,n.getLocalizedPath)(e?.href||"",t?.locale||"us"),`${a?.contextHandle||""}_${d}_${c}`),"data-headless-type-name":`${d}#${c}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("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})]})]})},M=(0,i.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:s="",key:B,onVideoPlayBtnClick:$,...D},z)=>{const[u,x]=(0,i.useState)(!1),[H,h]=(0,i.useState)(""),[_,v]=(0,i.useState)(""),{locale:E="us",trackingData:O}=(0,f.useAiuiContext)(),b=typeof o=="string"?o:o&&(0,I.convertLexicalToHTML)({data:o}),R=(0,i.useRef)(null),g=e.length===2;return(0,l.jsxs)("div",{...D,ref:R,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(L.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:z,children:[o&&(0,l.jsx)(P.default,{className:"mediaplayermulti-title",data:{title:b||""}}),(0,l.jsx)(N.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,locale:E,onVideoPlayBtnClick:(S,m)=>{x(!0),m?.isYouTube?(v(m?.youtubeId||""),h("")):(h(m?.video?.url||""),v("")),$?.(S)},title:b}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:g?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),u&&(0,l.jsx)(T.VideoModal,{visible:u,youTubeId:_,videoUrl:H,onCloseModal:()=>x(!1)})]})});M.displayName="MediaPlayerMulti";var J=(0,k.withLayout)(M);
+"use strict";"use client";var _=Object.create;var p=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!A.call(e,s)&&s!==o&&p(e,s,{get:()=>t[s],enumerable:!(a=j(t,s))||a.enumerable});return e};var w=(e,t,o)=>(o=e!=null?_(Y(e)):{},g(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>g(p({},"__esModule",{value:!0}),e);var K={};Z(K,{default:()=>J});module.exports=F(K);var l=require("react/jsx-runtime"),i=require("react"),n=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),r=require("../../components/index.js"),k=w(require("../Title/index.js")),P=w(require("../SwiperBox/index.js")),N=require("../../components/container.js"),L=require("../VideoModal/index.js"),T=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),C=require("../AiuiProvider/index.js"),V=require("../../shared/trackUrlRef.js");const d="video",c="media_player_multi",G=({data:e,configuration:t})=>{const o=(0,i.useRef)(null);return(0,I.useExposure)(o,{componentType:d,componentName:c,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:o,className:(0,n.cn)("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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{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"}),(0,l.jsx)(r.Picture,{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"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.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:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("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:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("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&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,V.trackUrlRef)((0,n.getLocalizedPath)(e?.href||"",t?.locale||"us"),`${d}_${c}`),"data-headless-type-name":`${d}#${c}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("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})]})]})},y=(0,i.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:s="",key:B,onVideoPlayBtnClick:$,...z},D)=>{const[f,u]=(0,i.useState)(!1),[E,x]=(0,i.useState)(""),[H,h]=(0,i.useState)(""),{locale:R="us"}=(0,C.useAiuiContext)(),v=typeof o=="string"?o:o&&(0,T.convertLexicalToHTML)({data:o}),S=(0,i.useRef)(null),b=e.length===2;return(0,l.jsxs)("div",{...z,ref:S,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(N.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:D,children:[o&&(0,l.jsx)(k.default,{className:"mediaplayermulti-title",data:{title:v||""}}),(0,l.jsx)(P.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+B,data:{list:e,configuration:{shape:t,locale:R,onVideoPlayBtnClick:(U,m)=>{u(!0),m?.isYouTube?(h(m?.youtubeId||""),x("")):(x(m?.video?.url||""),h("")),$?.(U)},title:v}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:b?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(L.VideoModal,{visible:f,youTubeId:H,videoUrl:E,onCloseModal:()=>u(!1)})]})});y.displayName="MediaPlayerMulti";var J=(0,M.withLayout)(y);
 //# sourceMappingURL=index.js.map

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

@@ -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": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_VideoModal", "import_html", "import_useExposure", "import_AiuiProvider", "import_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", "Title", "SwiperBox", "_"]
+  "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": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_VideoModal", "import_html", "import_useExposure", "import_AiuiProvider", "import_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", "Title", "SwiperBox", "_"]
 }

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

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

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

@@ -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": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "MemberEquity", "React", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "trackingData", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
+  "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": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "MemberEquity", "React", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
 }

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

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