@anker-in/headless-ui 0.0.58 → 0.0.59-alpha.1

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

@@ -0,0 +1,2 @@
+"use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var m=(e,o)=>{for(var l in o)s(e,l,{get:o[l],enumerable:!0})},w=(e,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of g(o))!h.call(e,i)&&i!==l&&s(e,i,{get:()=>o[i],enumerable:!(r=c(o,i))||r.enumerable});return e};var y=e=>w(s({},"__esModule",{value:!0}),e);var T={};m(T,{VideoModal:()=>u});module.exports=y(T);var t=require("react/jsx-runtime"),n=require("../../components/dialog.js"),d=require("../VideoModal/YouTubePlayer.js");const u=e=>{const{visible:o,setVisible:l,youTubeId:r,videoUrl:i,setVideoUrl:b,setYouTubeId:p}=e,a=()=>{b(""),p("")};return(0,t.jsx)(n.Dialog,{open:o,onOpenChange:v=>{l(v),a()},children:(0,t.jsxs)(n.DialogContent,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[r?(0,t.jsx)(d.YouTubePlayer,{youTubeId:r}):null,i?(0,t.jsx)("video",{className:"size-full object-cover",src:i,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,t.jsx)("div",{onClick:()=>{l(!1),a()},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,t.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/VideoModal/index.tsx"],
+  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\n\nexport type VideoModalType = {\n  visible: boolean\n  setVisible: (v: boolean) => void\n  youTubeId?: string\n  videoUrl?: string\n  setVideoUrl: (v: string) => void\n  setYouTubeId: (v: string) => void\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, setVisible, youTubeId, videoUrl, setVideoUrl, setYouTubeId } = props\n\n  const clearContent = () => {\n    setVideoUrl('')\n    setYouTubeId('')\n  }\n\n  return (\n    <Dialog\n      open={visible}\n      onOpenChange={(flag: boolean) => {\n        setVisible(flag)\n        clearContent()\n      }}\n    >\n      <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n        {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n        {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n        <div\n          onClick={() => {\n            setVisible(false)\n            clearContent()\n          }}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GA4BM,IAAAI,EAAA,6BA5BNC,EAAsC,sCACtCC,EAA8B,0CAW9B,MAAMJ,EAAcK,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,WAAAC,EAAY,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,aAAAC,CAAa,EAAIN,EAE1EO,EAAe,IAAM,CACzBF,EAAY,EAAE,EACdC,EAAa,EAAE,CACjB,EAEA,SACE,OAAC,UACC,KAAML,EACN,aAAeO,GAAkB,CAC/BN,EAAWM,CAAI,EACfD,EAAa,CACf,EAEA,oBAAC,iBAAc,UAAU,wFACtB,UAAAJ,KAAY,OAAC,iBAAc,UAAWA,EAAW,EAAK,KACtDC,KAAW,OAAC,SAAM,UAAU,yBAAyB,IAAKA,EAAU,MAAK,GAAC,KAAI,GAAC,SAAQ,GAAC,SAAQ,GAAC,EAAK,QACvG,OAAC,OACC,QAAS,IAAM,CACbF,EAAW,EAAK,EAChBK,EAAa,CACf,EACA,UAAU,wHAEV,mBAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,eAAa,MACb,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,mBAAC,QAAK,iBAAe,QAAQ,kBAAgB,QAAQ,EAAE,uBAAuB,EAChF,EACF,GACF,EACF,CAEJ",
+  "names": ["VideoModal_exports", "__export", "VideoModal", "__toCommonJS", "import_jsx_runtime", "import_dialog", "import_YouTubePlayer", "props", "visible", "setVisible", "youTubeId", "videoUrl", "setVideoUrl", "setYouTubeId", "clearContent", "flag"]
+}

package/dist/cjs/cpn-components/CpnNavigation/index.js

@@ -1,2 +1,2 @@
-"use strict";var y=Object.create;var v=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!R.call(e,n)&&n!==o&&v(e,n,{get:()=>t[n],enumerable:!(i=E(t,n))||i.enumerable});return e};var k=(e,t,o)=>(o=e!=null?y(I(e)):{},h(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>h(v({},"__esModule",{value:!0}),e);var $={};S($,{default:()=>T});module.exports=H($);var p=require("react/jsx-runtime"),c=require("react"),f=require("../../helpers/utils.js"),g=k(require("lodash.debounce"));const L=e=>{const{lists:t,styles:o,cns:i,offset:n=0}=e,[x,d]=(0,c.useState)(0),u=(0,c.useRef)(null),C=r=>{r.scrollIntoView({behavior:"smooth",inline:"center"})},w=(r,l,a)=>{d(l);const s=a.target;C(s),r.anchor&&document.querySelector(`#${r.anchor}`)?.scrollIntoView({behavior:"smooth"}),a.preventDefault()};return(0,c.useEffect)(()=>{const r=(0,g.default)(()=>{const a=[];t?.forEach(m=>{const b=document.querySelector(`#${m.anchor}`);b&&a.push(b.getBoundingClientRect().top)});const s=a.findIndex(m=>m>l+n);d(s===-1?a.length-1:s===0?0:s-1)},100),l=u.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",r),()=>{window.removeEventListener("scroll",r)}},[t,n]),(0,p.jsx)("div",{id:"nav",className:(0,f.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",i?.container),style:{"--bgColor":o?.bgColor||"#C6F1FF","--color":o?.color||"#333","--activeColor":o?.activeColor||"#000"},children:(0,p.jsx)("div",{className:(0,f.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",i?.box),ref:u,children:t?.map((r,l)=>(0,p.jsx)("a",{href:`#${r.anchor}`,className:(0,f.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",i?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${i?.activeItem}`]:x===l}),onClick:a=>w(r,l,a),children:r.label},r.label))})})};var T=L;
+"use strict";var E=Object.create;var v=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)v(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of I(t))!R.call(e,a)&&a!==r&&v(e,a,{get:()=>t[a],enumerable:!(c=N(t,a))||c.enumerable});return e};var L=(e,t,r)=>(r=e!=null?E(H(e)):{},g(t||!e||!e.__esModule?v(r,"default",{value:e,enumerable:!0}):r,e)),S=e=>g(v({},"__esModule",{value:!0}),e);var $={};k($,{default:()=>M});module.exports=S($);var p=require("react/jsx-runtime"),i=require("react"),f=require("../../helpers/utils.js"),x=L(require("lodash.debounce"));const T=e=>{const{lists:t,styles:r,cns:c,offset:a=0,clickHandler:u}=e,[C,d]=(0,i.useState)(0),h=(0,i.useRef)(null),w=o=>{o.scrollIntoView({behavior:"smooth",inline:"center"})},y=(o,l,n)=>{d(l);const s=n.target;w(s),o.anchor&&document.querySelector(`#${o.anchor}`)?.scrollIntoView({behavior:"smooth"}),n.preventDefault(),u&&u(o,l,n)};return(0,i.useEffect)(()=>{const o=(0,x.default)(()=>{const n=[];t?.forEach(m=>{const b=document.querySelector(`#${m.anchor}`);b&&n.push(b.getBoundingClientRect().top)});const s=n.findIndex(m=>m>l+a);d(s===-1?n.length-1:s===0?0:s-1)},100),l=h.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",o),()=>{window.removeEventListener("scroll",o)}},[t,a]),(0,p.jsx)("div",{id:"nav",className:(0,f.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",c?.container),style:{"--bgColor":r?.bgColor||"#C6F1FF","--color":r?.color||"#333","--activeColor":r?.activeColor||"#000"},children:(0,p.jsx)("div",{className:(0,f.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",c?.box),ref:h,children:t?.map((o,l)=>(0,p.jsx)("a",{href:`#${o.anchor}`,className:(0,f.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",c?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${c?.activeItem}`]:C===l}),onClick:n=>y(o,l,n),children:o.label},o.label))})})};var M=T;
 //# sourceMappingURL=index.js.map

package/dist/cjs/cpn-components/CpnNavigation/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0 } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEY,IAAAI,EAAA,6BAjEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQU,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFE,EAAeM,IAAU,GAAKI,EAAY,OAAS,EAAIJ,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAO,EAAYZ,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACb,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKI,EAEJ,SAAAN,GAAO,IAAI,CAACU,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAR,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOE,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOlB,EAAQM",
-  "names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "debounce", "sectionTops", "section", "sectionTop", "navHeight"]
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkEY,IAAAI,EAAA,6BAlEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/BhB,GAAO,QAAQW,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYhB,CAAM,EACjFG,EAAeM,IAAU,GAAKI,EAAY,OAAS,EAAIJ,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAO,EAAYZ,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAT,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOnB,EAAQM",
+  "names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "clickHandler", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "debounce", "sectionTops", "section", "sectionTop", "navHeight"]
 }

package/dist/cjs/cpn-components/CpnNavigation/types.d.ts

@@ -15,5 +15,6 @@ export type NavigationProps = {
     };
     cns?: Cns;
     offset?: number;
+    clickHandler?: (nav: Nav, index: number, e: React.MouseEvent<HTMLAnchorElement>) => void;
 };
 export {};

package/dist/cjs/cpn-components/CpnNavigation/types.js

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

package/dist/cjs/cpn-components/CpnNavigation/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnNavigation/types.ts"],
-  "sourcesContent": ["type Cns = {\n  container?: string\n  box?: string\n  item?: string\n  activeItem?: string\n}\n\nexport interface Nav {\n  label: string\n  anchor: string\n}\n\nexport type NavigationProps = {\n  lists: Nav[]\n  styles?: {\n    [key: string]: string\n  }\n  cns?: Cns\n  offset?: number\n}\n"],
+  "sourcesContent": ["type Cns = {\n  container?: string\n  box?: string\n  item?: string\n  activeItem?: string\n}\n\nexport interface Nav {\n  label: string\n  anchor: string\n}\n\nexport type NavigationProps = {\n  lists: Nav[]\n  styles?: {\n    [key: string]: string\n  }\n  cns?: Cns\n  offset?: number\n  clickHandler?: (nav: Nav, index: number, e: React.MouseEvent<HTMLAnchorElement>) => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/stories/graphic.stories.d.ts

@@ -27,6 +27,9 @@ declare const meta: {
                 description?: string;
                 textColor?: string;
                 href?: string;
+                video?: import("../types/props.js").Video;
+                youtubeId?: string;
+                isYouTube?: boolean;
             }[];
             itemShape?: "round" | "square";
             containerProps?: import("../types/props.js").ContainerProps;

package/dist/esm/biz-components/Graphic/index.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js';
+import type { ComponentCommonProps, ContainerProps, Video, Img } from '../../types/props.js';
 type GraphicType = {
     imgUrl: Img;
     title: string;
     description?: string;
     textColor?: string;
     href?: string;
+    video?: Video;
+    youtubeId?: string;
+    isYouTube?: boolean;
 };
 export interface GraphicProps extends ComponentCommonProps {
     className?: string;

package/dist/esm/biz-components/Graphic/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import u,{useEffect as g,useImperativeHandle as w,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as b}from"../../shared/Styles.js";import k from"../SwiperBox/index.js";import{Heading as v}from"../../components/index.js";import{Picture as y,Text as M}from"../../components/index.js";import{Container as N}from"../../components/container.js";import T from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{trackUrlRef as S}from"../../shared/trackUrlRef.js";const d="image",h="graphic",E=({data:e,configuration:r})=>{const n=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(r.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-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":n},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":r?.itemShape==="round"}),children:c("a",{href:S(e?.href,`${d}_${h}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(y,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),c("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[t(M,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&t(v,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},f=u.forwardRef(({data:e,className:r,...n},m)=>{const i=x(null),l=o=>{const s=e?.items?.length>3,p=e?.items?.length>2;switch(o){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||p?2.3:2;default:return 1.2}};return w(m,()=>i.current),C(i,{componentType:d,componentName:h,componentTitle:e?.title}),g(()=>{const o=i.current?.querySelectorAll(".graphic-description");if(o&&o.length>0){let s=0;o.forEach(p=>{s=Math.max(s,p.offsetHeight)}),o.forEach(p=>{p.style.height=`${s}px`})}},[]),t("div",{className:r,ref:i,children:t("div",{className:"graphic-box",children:c(N,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(T,{data:{title:e?.title}}),t(k,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l()},768:{spaceBetween:16,freeMode:!1,slidesPerView:l(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:l(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:l(1440)}}})]})})})});f.displayName="Graphic";var $=b(f);export{$ as default};
+"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import y,{useEffect as T,useImperativeHandle as M,useRef as N,useState as n}from"react";import{cn as c}from"../../helpers/utils.js";import{withStyles as P}from"../../shared/Styles.js";import V from"../SwiperBox/index.js";import{Heading as C}from"../../components/index.js";import{Picture as I,Text as S}from"../../components/index.js";import{Container as E}from"../../components/container.js";import G from"../Title/index.js";import{VideoModal as H}from"../VideoModal/index.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as B}from"../../shared/trackUrlRef.js";const b="image",g="graphic",D=({data:e,configuration:s})=>{const m=L({query:"(max-width: 768px)"});return t("div",{className:c((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":m},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:c("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:B(e?.href,`${b}_${g}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(I,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[t(S,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),r("div",{className:"flex items-end justify-between",children:[e?.description&&t(C,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 flex-1 text-[24px] font-bold leading-[1.2]"}),(e?.video?.url||e?.youtubeId)&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.setVisible?.(!0),e?.isYouTube?s?.setYouTubeId?.(e?.youtubeId):s?.setVideoUrl?.(e?.video?.url)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})]})]})]})})})},w=y.forwardRef(({data:e,className:s,...m},d)=>{const o=N(null),[x,h]=n(!1),[v,u]=n(""),[k,f]=n(""),a=l=>{const i=e?.items?.length>3,p=e?.items?.length>2;switch(l){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return i||p?2.3:2;default:return 1.2}};return M(d,()=>o.current),U(o,{componentType:b,componentName:g,componentTitle:e?.title}),T(()=>{const l=o.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let i=0;l.forEach(p=>{i=Math.max(i,p.offsetHeight)}),l.forEach(p=>{p.style.height=`${i}px`})}},[]),r("div",{className:s,ref:o,children:[t("div",{className:"graphic-box",children:r(E,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(G,{data:{title:e?.title}}),t(V,{id:"Graphic",className:c("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,setVisible:h,setVideoUrl:u,setYouTubeId:f}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:a()},768:{spaceBetween:16,freeMode:!1,slidesPerView:a(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:a(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:a(1440)}}})]})}),t(H,{visible:x,setVisible:h,youTubeId:k,videoUrl:v,setVideoUrl:u,setYouTubeId:f})]})});w.displayName="Graphic";var K=P(w);export{K as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    containerProps?: ContainerProps\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        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]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        {\n          'h-[360px]': isMobile,\n        },\n        'flex-1 shrink-0 md:basis-[296px]'\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <Text\n              style={{\n                color: data?.textColor,\n              }}\n              html={data?.title}\n              // eslint-disable-next-line tailwindcss/classnames-order\n              className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n            />\n            {data?.description && (\n              <Heading\n                html={data?.description}\n                style={{\n                  color: data?.textColor,\n                }}\n                as=\"h3\"\n                className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n              />\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          {data?.title && <Title data={{ title: data?.title }} />}\n          <SwiperBox\n            id=\"Graphic\"\n            className={cn('!overflow-visible')}\n            data={{\n              list: data?.items || [],\n              configuration: {\n                itemShape: data.itemShape,\n                num: data?.items?.length || 0,\n              },\n            }}\n            Slide={Item}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(),\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(768),\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(1024),\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(1440),\n              },\n            }}\n          />\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "aAqEU,cAAAA,EAMA,QAAAC,MANA,oBApEV,OAAOC,GAAS,aAAAC,EAAW,uBAAAC,EAAqB,UAAAC,MAAc,QAC9D,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAW,oBAClB,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAWR,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,OACEd,EAAC,OACC,UAAWM,GAfM,IAAM,CACzB,OAAQe,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,GAKmB,EACb,CACE,YAAaC,CACf,EACA,kCACF,EAEA,SAAAtB,EAAC,OACC,UAAWM,EAAG,mBAAoB,CAC/B,gDAAkDe,GAAe,YAAc,OAClF,CAAC,EAED,SAAApB,EAAC,KACC,KAAMe,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0DAEV,UAAAlB,EAACU,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACAnB,EAAC,OAAI,UAAU,yEACb,UAAAD,EAACW,EAAA,CACC,MAAO,CACL,MAAOS,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,4GACZ,EACCA,GAAM,aACLpB,EAACS,EAAA,CACC,KAAMW,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,oIACZ,GAEJ,GACF,EACF,EACF,CAEJ,EAEMG,EAAUrB,EAAM,WAAyC,CAAC,CAAE,KAAAkB,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAWtB,EAAuB,IAAI,EAEtCuB,EAAoBC,GAAmB,CAC3C,MAAMC,EAAUV,GAAM,OAAyB,OAAS,EAClDE,EAAYF,GAAM,OAAyB,OAAS,EAC1D,OAAQS,EAAO,CACb,IAAK,MACH,OAAOC,EAAS,EAAIV,GAAM,OAAO,OACnC,IAAK,MACH,OAAOU,EAAS,EAAIV,GAAM,OAAO,OACnC,IAAK,KACH,OAAOU,GAAeR,EAAN,IAAuB,EACzC,QACE,MAAO,IACX,CACF,EAEA,OAAAlB,EAAoBsB,EAAK,IAAMC,EAAS,OAAyB,EAEjEZ,EAAYY,EAAU,CACpB,cAAAV,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDjB,EAAU,IAAM,CACd,MAAM4B,EAAeJ,EAAS,SAAS,iBAAiC,sBAAsB,EAC9F,GAAII,GAAgBA,EAAa,OAAS,EAAG,CAC3C,IAAIC,EAAY,EAChBD,EAAa,QAASE,GAAuB,CAC3CD,EAAY,KAAK,IAAIA,EAAWC,EAAG,YAAY,CACjD,CAAC,EACDF,EAAa,QAASE,GAAuB,CAC3CA,EAAG,MAAM,OAAS,GAAGD,CAAS,IAChC,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGHhC,EAAC,OAAI,UAAWwB,EAAW,IAAKG,EAC9B,SAAA3B,EAAC,OAAI,UAAU,cACb,SAAAC,EAACW,EAAA,CAAW,GAAIQ,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,OAASpB,EAACa,EAAA,CAAM,KAAM,CAAE,MAAOO,GAAM,KAAM,EAAG,EACrDpB,EAACQ,EAAA,CACC,GAAG,UACH,UAAWF,EAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMc,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAiB,CAClC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOW,EAAQ3B,EAAWgB,CAAO",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "innerRef", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Video, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    containerProps?: ContainerProps\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        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]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        {\n          'h-[360px]': isMobile,\n        },\n        'flex-1 shrink-0 md:basis-[296px]'\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <Text\n              style={{\n                color: data?.textColor,\n              }}\n              html={data?.title}\n              // eslint-disable-next-line tailwindcss/classnames-order\n              className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n            />\n            <div className=\"flex items-end justify-between\">\n              {data?.description && (\n                <Heading\n                  html={data?.description}\n                  style={{\n                    color: data?.textColor,\n                  }}\n                  as=\"h3\"\n                  className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 flex-1 text-[24px] font-bold leading-[1.2]\"\n                />\n              )}\n              {(data?.video?.url || data?.youtubeId) && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.setVisible?.(true)\n                    if (data?.isYouTube) {\n                      configuration?.setYouTubeId?.(data?.youtubeId)\n                    } else {\n                      configuration?.setVideoUrl?.(data?.video?.url)\n                    }\n                  }}\n                  className=\"laptop:size-12 flex size-10 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        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          {data?.title && <Title data={{ title: data?.title }} />}\n          <SwiperBox\n            id=\"Graphic\"\n            className={cn('!overflow-visible')}\n            data={{\n              list: data?.items || [],\n              configuration: {\n                itemShape: data.itemShape,\n                num: data?.items?.length || 0,\n                setVisible,\n                setVideoUrl,\n                setYouTubeId,\n              },\n            }}\n            Slide={Item}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(),\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(768),\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(1024),\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: handleSwiperShow(1440),\n              },\n            }}\n          />\n        </Container>\n      </div>\n      <VideoModal\n        visible={visible}\n        setVisible={setVisible}\n        youTubeId={youTubeId}\n        videoUrl={videoUrl}\n        setVideoUrl={setVideoUrl}\n        setYouTubeId={setYouTubeId}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "VideoModal", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "e", "Graphic", "className", "props", "ref", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Graphic_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as W,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as h,useRef as d,useEffect as L,forwardRef as F,useImperativeHandle as Y}from"react";import{debounce as j}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";import O from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as A}from"react-intersection-observer";import{useExposure as G}from"../../hooks/useExposure.js";import J from"../../helpers/ScrollLoadVideo.js";const K="media_player_base",Q="video",N=({defaultConverters:u})=>({...u,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),U=F(({className:u="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:f,img:X,video:E,theme:R,shape:P,...z}},B)=>{const{sticky:r}=z,[a,l]=h(!1),[w,_]=h(0),[$,I]=h(0),o=d(null),C=d(null),n=d(null),b=d(null),{ref:S,inView:H}=A();Y(B,()=>n.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),v=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!f?(o.current?.play(),l(!0)):(o.current?.pause(),l(!1))},[H]);const g=j(()=>{if(n.current){const y=n.current.getBoundingClientRect(),c=window.innerHeight,V=window.scrollY||window.pageYOffset,D=y.bottom+V,k=document.documentElement.scrollHeight-D;_(k>c?c:k)}if(n.current){const y=n.current.clientHeight,c=window.innerHeight;I(y+c)}},600);L(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),G(b,{componentType:Q,componentName:K,componentTitle:v});const x="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return m(W,{children:[r&&e("div",{ref:n,className:p("relative z-10 ",x),children:e("div",{children:m("div",{ref:S,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),v&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!a&&f&&e(O,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),l(!1)):(o.current&&o.current.play(),l(!0)),s&&s?.()},children:f})]})})}),m("div",{style:r?{marginBottom:`-${w}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",r?"h-screen w-full":x,u,{"aiui-dark":R==="dark","rounded-box":P==="rounded"}),children:e("div",{children:m("div",{ref:C,className:"media-cover left-0 top-0 h-screen w-screen",children:[e(J,{videoRef:o,src:E?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})})}),e("div",{className:p(r&&"relative box-content block",x),style:r?{height:`${w}px`}:{},ref:b})]})]})});var ce=q(U);export{ce as default};
+"use client";import{Fragment as ee,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as h,useRef as d,useEffect as L,forwardRef as j,useImperativeHandle as q}from"react";import{debounce as O}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as A}from"../../shared/Styles.js";import G from"../../components/button.js";import{YouTubePlayer as J}from"../VideoModal/YouTubePlayer.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as K}from"react-intersection-observer";import{useExposure as Q}from"../../hooks/useExposure.js";import U from"../../helpers/ScrollLoadVideo.js";const W="media_player_base",X="video",N=({defaultConverters:u})=>({...u,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),Z=j(({className:u="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:f,isYouTube:E,youtubeId:P,video:R,theme:z,shape:B,...I}},_)=>{const{sticky:r}=I,[a,l]=h(!1),[b,$]=h(0),[C,S]=h(0),o=d(null),V=d(null),n=d(null),w=d(null),{ref:D,inView:H}=K();q(_,()=>n.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),v=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!f?(o.current?.play(),l(!0)):(o.current?.pause(),l(!1))},[H]);const g=O(()=>{if(n.current){const x=n.current.getBoundingClientRect(),c=window.innerHeight,Y=window.scrollY||window.pageYOffset,F=x.bottom+Y,k=document.documentElement.scrollHeight-F;$(k>c?c:k)}if(n.current){const x=n.current.clientHeight,c=window.innerHeight;S(x+c)}},600);L(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),Q(w,{componentType:X,componentName:W,componentTitle:v});const y="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return m(ee,{children:[r&&e("div",{ref:n,className:p("relative z-10 ",y),children:e("div",{children:m("div",{ref:D,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),v&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!a&&f&&e(G,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),l(!1)):(o.current&&o.current.play(),l(!0)),s&&s?.()},children:f})]})})}),m("div",{style:r?{marginBottom:`-${b}px`,marginTop:`-${C}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",r?"h-screen w-full":y,u,{"aiui-dark":z==="dark","rounded-box":B==="rounded"}),children:e("div",{children:m("div",{ref:V,className:"media-cover left-0 top-0 h-screen w-screen",children:[E?e(J,{youTubeId:P}):e(U,{videoRef:o,src:R?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})})}),e("div",{className:p(r&&"relative box-content block",y),style:r?{height:`${b}px`}:{},ref:w})]})]})});var me=A(Z);export{me as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.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'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\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 && !btnText) {\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    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\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 ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                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              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\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 style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  {/* <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  /> */}\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    src={video?.url!}\n                    className=\"size-full\"\n                    videoClassName=\"object-cover\"\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  />\n                  <div\n                    className=\"absolute left-0 top-0 z-10 size-full\"\n                    style={{\n                      background: 'rgba(0, 0, 0, 0.2)',\n                    }}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.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'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      onBtnClick,\n      data: { title, videoTitle, btnText, isYouTube, youtubeId, video, theme, shape, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\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 && !btnText) {\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    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\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 ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                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              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground 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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\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 style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  {/* <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  /> */}\n                  {isYouTube ? (\n                    <YouTubePlayer youTubeId={youtubeId} />\n                  ) : (\n                    <ScrollLoadVideo\n                      videoRef={videoRef}\n                      src={video?.url!}\n                      className=\"size-full\"\n                      videoClassName=\"object-cover\"\n                      muted\n                      loop\n                      playsInline\n                      webkit-playsinline\n                      x5-playsinline\n                    />\n                  )}\n                  <div\n                    className=\"absolute left-0 top-0 z-10 size-full\"\n                    style={{\n                      background: 'rgba(0, 0, 0, 0.2)',\n                    }}\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "YouTubePlayer", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "isYouTube", "youtubeId", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
 }

package/dist/esm/biz-components/MediaPlayerBase/types.d.ts

@@ -8,7 +8,9 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
         videoTitle?: string;
         btnText?: string;
         img?: Img;
+        isYouTube?: boolean;
         video?: Video;
+        youtubeId?: string;
     };
     onBtnClick?: () => void;
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as r,forwardRef as P,useRef as C}from"react";import{cn as T}from"../../helpers/utils.js";import{withStyles as I}from"../../shared/Styles.js";import{Picture as x,Link as B}from"../../components/index.js";import{Dialog as L,DialogContent as V}from"../../components/dialog.js";import _ from"../Title/index.js";import z from"../SwiperBox/index.js";import{Container as D}from"../../components/container.js";import{YouTubePlayer as Y}from"./YouTubePlayer.js";import{convertLexicalToHTML as j}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as H}from"../../shared/trackUrlRef.js";const b="video",g="media_player_multi",R=({data:e,configuration:t})=>o("div",{className:T("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:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(x,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(x,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.YoutubeId)&&l("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.YoutubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("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:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(B,{href:H(e?.href,`${b}_${g}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),U=P(({data:{items:e=[],shape:t="square",title:i,containerProps:v},className:a="",key:w,onVideoPlayBtnClick:k},y)=>{const[N,s]=r(!1),[n,p]=r(""),[d,m]=r(""),c=typeof i=="string"?i:i&&j({data:i}),u=C(null),f=()=>{p(""),m("")};S(u,{componentType:b,componentName:g,componentTitle:c});const h=e.length;return o("div",{className:a,ref:u,children:[l("div",{className:"mediaplayermulti-box",children:l(D,{...v||{},className:"overflow-hidden",children:o("div",{className:a,ref:y,children:[i&&l(_,{className:"mediaplayermulti-title",data:{title:c||""}}),l(z,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+w,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:k,setVisible:s,setVideoUrl:p,setYouTubeId:m}},Slide:R,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),l(L,{open:N,onOpenChange:M=>{s(M),f()},children:o(V,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[d?l(Y,{youTubeId:d}):null,n?l("video",{className:"size-full object-cover",src:n,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,l("div",{onClick:()=>{s(!1),f()},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:l("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:l("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var X=I(U);export{X as default};
+"use client";import{jsx as l,jsxs as o}from"react/jsx-runtime";import{useState as s,forwardRef as M,useRef as N}from"react";import{cn as P}from"../../helpers/utils.js";import{withStyles as T}from"../../shared/Styles.js";import{Picture as c,Link as V}from"../../components/index.js";import I from"../Title/index.js";import L from"../SwiperBox/index.js";import{Container as B}from"../../components/container.js";import{VideoModal as C}from"../VideoModal/index.js";import{convertLexicalToHTML as U}from"@payloadcms/richtext-lexical/html";import{useExposure as S}from"../../hooks/useExposure.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";const u="video",x="media_player_multi",R=({data:e,configuration:t})=>o("div",{className:P("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:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(c,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),l(c,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),l("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&l("button",{onClick:()=>{t?.setVisible?.(!0),e?.isYouTube?t?.setYouTubeId?.(e?.youtubeId):t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:l("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("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:[o("div",{className:"flex flex-col",children:[l("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&l(V,{href:z(e?.href,`${u}_${x}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),l("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),Y=M(({data:{items:e=[],shape:t="square",title:i,containerProps:b},className:r="",key:v,onVideoPlayBtnClick:h},g)=>{const[w,a]=s(!1),[y,p]=s(""),[k,d]=s(""),m=typeof i=="string"?i:i&&U({data:i}),n=N(null);S(n,{componentType:u,componentName:x,componentTitle:m});const f=e.length;return o("div",{className:r,ref:n,children:[l("div",{className:"mediaplayermulti-box",children:l(B,{...b||{},className:"overflow-hidden",children:o("div",{className:r,ref:g,children:[i&&l(I,{className:"mediaplayermulti-title",data:{title:m||""}}),l(L,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+v,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:h,setVisible:a,setVideoUrl:p,setYouTubeId:d}},Slide:R,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),l(C,{visible:w,setVisible:a,youTubeId:k,videoUrl:y,setVideoUrl:p,setYouTubeId:d})]})});var J=T(Y);export{J as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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 } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { YouTubePlayer } from './YouTubePlayer.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.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  return (\n    <div\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?.setVisible?.(true)\n                if (data?.isYouTube) {\n                  configuration?.setYouTubeId?.(data?.YoutubeId)\n                } else {\n                  configuration?.setVideoUrl?.(data?.video?.url)\n                }\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 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              href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\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    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const clearContent = () => {\n      setVideoUrl('')\n      setYouTubeId('')\n    }\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\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: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\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 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 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        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            clearContent()\n          }}\n        >\n          <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n            {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                clearContent()\n              }}\n              className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "YouTubePlayer", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "clearContent", "itemsLength", "flag", "MediaPlayerMulti_default"]
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\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?.setVisible?.(true)\n                if (data?.isYouTube) {\n                  configuration?.setYouTubeId?.(data?.youtubeId)\n                } else {\n                  configuration?.setVideoUrl?.(data?.video?.url)\n                }\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 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              href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\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    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\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: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl, setYouTubeId },\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 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 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        <VideoModal\n          visible={visible}\n          setVisible={setVisible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          setVideoUrl={setVideoUrl}\n          setYouTubeId={setYouTubeId}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "MediaPlayerMulti_default"]
 }

package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts

@@ -6,7 +6,7 @@ export interface MediaPlayerItemProps {
     img: Img;
     mobileImg?: Img;
     video?: Video;
-    YoutubeId?: string;
+    youtubeId?: string;
     isYouTube?: boolean;
     quote?: string;
     href?: string;

package/dist/esm/biz-components/MediaPlayerSticky/index.js

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