npm - @anker-in/headless-ui - Versions diffs - 1.3.24 → 1.3.25 - Mend

@anker-in/headless-ui 1.3.24 → 1.3.25

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

Files changed (89) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/MulticolDropdown.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react'\nimport { Container, Text, Link, Picture, Button } from '../../components/index.js'\nimport CompanyStatsBanner from './CompanyStatsBanner/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const MulticolDropdown = ({\n  multicolMetadata,\n  showStatsBanner,\n  statsBannerData,\n}: {\n  multicolMetadata: any\n  showStatsBanner: boolean\n  statsBannerData: any\n}) => {\n  const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={multicolDropdownRef} className=\"bg-white py-4\">\n      <Container childClassName=\"bg-white\" className=\"h-full\">\n        <div className=\"laptop:gap-4 flex flex-col gap-3\">\n          {showStatsBanner && <CompanyStatsBanner data={statsBannerData} />}\n          <div className=\"flex gap-4\">\n            {multicolMetadata?.map((item: any, index: number) => (\n              <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n                <MulticolItem item={item} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    </div>\n  )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nexport const MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n  const { locale = 'us' } = useAiuiContext()\n  return (\n    <>\n      {item?.columns && (\n        <>\n          <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n          <div className=\"mt-2 flex flex-col\">\n            {item.columns?.map((columnItem: any) => (\n              <div key={columnItem.label} className=\"flex items-center gap-1 py-2\">\n                <Link\n                  href={`${getLocalizedPath(columnItem.url, locale)}?ref=navMenu`}\n                  asChild={!columnItem.url}\n                  className=\"text-sm font-bold leading-[1.4] no-underline\"\n                >\n                  {columnItem.label}\n                </Link>\n                {columnItem?.badge && (\n                  <Text\n                    as=\"p\"\n                    html={columnItem?.badge || 'badge'}\n                    className=\"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]\"\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {item?.imageUrl && (\n        <div\n          className={cn(\n            'rounded-image-text laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden',\n            {\n              ['tablet:max-w-none laptop:max-w-none']: allPicture,\n            }\n          )}\n        >\n          <Link href={`${getLocalizedPath(item.url, locale)}?ref=navMenu`} asChild={!item.url}>\n            <Picture\n              source={item.imageUrl}\n              width={404}\n              height={280}\n              className=\"size-full\"\n              imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n            />\n            <div className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n              <Text\n                html={item.title}\n                className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n                  'text-black': item?.theme === 'dark',\n                })}\n              />\n              {item.subtitle && (\n                <Text\n                  html={item.subtitle}\n                  className={cn('text-sm font-bold leading-[1.4] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                />\n              )}\n              {item?.primary?.label && (\n                <Button\n                  as=\"a\"\n                  href={getLocalizedPath(item?.primary?.url, locale)}\n                  variant=\"link\"\n                  size=\"lg\"\n                  iconClassName=\"size-4 lg-desktop:size-5\"\n                  className={cn('mr-auto !p-0 text-sm font-bold leading-[1.4] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                >\n                  {item?.primary?.label || 'more'}\n                </Button>\n              )}\n            </div>\n          </Link>\n        </div>\n      )}\n    </>\n  )\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,iBAAAC,IAAA,eAAAC,EAAAJ,GAwBQ,IAAAK,EAAA,6BAxBRC,EAA8B,iBAC9BC,EAAuD,qCACvDC,EAA+B,4CAC/BC,EAAqC,kCACrCC,EAA+B,oCAMxB,MAAMR,EAAmB,CAAC,CAC/B,iBAAAS,EACA,gBAAAC,EACA,gBAAAC,CACF,IAIM,CACJ,MAAMC,KAAsB,UAAuB,IAAI,EAEvD,SACE,OAAC,OAAI,IAAKA,EAAqB,UAAU,gBACvC,mBAAC,aAAU,eAAe,WAAW,UAAU,SAC7C,oBAAC,OAAI,UAAU,mCACZ,UAAAF,MAAmB,OAAC,EAAAG,QAAA,CAAmB,KAAMF,EAAiB,KAC/D,OAAC,OAAI,UAAU,aACZ,SAAAF,GAAkB,IAAI,CAACK,EAAWC,OACjC,OAAC,OAAiD,UAAU,QAC1D,mBAACd,EAAA,CAAa,KAAMa,EAAM,GADlB,gBAAgBA,GAAM,KAAK,IAAIC,CAAK,EAE9C,CACD,EACH,GACF,EACF,EACF,CAEJ,EAMad,EAAe,CAAC,CAAE,KAAAa,EAAM,WAAAE,CAAW,IAA2C,CACzF,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACzC,SACE,oBACG,UAAAH,GAAM,YACL,oBACE,oBAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,MAAM,UAAU,sDAAsD,KACjG,OAAC,OAAI,UAAU,qBACZ,SAAAA,EAAK,SAAS,IAAKI,MAClB,QAAC,OAA2B,UAAU,+BACpC,oBAAC,QACC,KAAM,MAAG,oBAAiBA,EAAW,IAAKD,CAAM,CAAC,eACjD,QAAS,CAACC,EAAW,IACrB,UAAU,+CAET,SAAAA,EAAW,MACd,EACCA,GAAY,UACX,OAAC,QACC,GAAG,IACH,KAAMA,GAAY,OAAS,QAC3B,UAAU,6HACZ,IAbMA,EAAW,KAerB,CACD,EACH,GACF,EAEDJ,GAAM,aACL,OAAC,OACC,aAAW,MACT,uLACA,CACG,sCAAwCE,CAC3C,CACF,EAEA,oBAAC,QAAK,KAAM,MAAG,oBAAiBF,EAAK,IAAKG,CAAM,CAAC,eAAgB,QAAS,CAACH,EAAK,IAC9E,oBAAC,WACC,OAAQA,EAAK,SACb,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,KACA,QAAC,OAAI,UAAU,uEACb,oBAAC,QACC,KAAMA,EAAK,MACX,aAAW,MAAG,iEAAkE,CAC9E,aAAcA,GAAM,QAAU,MAChC,CAAC,EACH,EACCA,EAAK,aACJ,OAAC,QACC,KAAMA,EAAK,SACX,aAAW,MAAG,6CAA8C,CAC1D,aAAcA,GAAM,QAAU,MAChC,CAAC,EACH,EAEDA,GAAM,SAAS,UACd,OAAC,UACC,GAAG,IACH,QAAM,oBAAiBA,GAAM,SAAS,IAAKG,CAAM,EACjD,QAAQ,OACR,KAAK,KACL,cAAc,2BACd,aAAW,MAAG,0DAA2D,CACvE,aAAcH,GAAM,QAAU,MAChC,CAAC,EAEA,SAAAA,GAAM,SAAS,OAAS,OAC3B,GAEJ,GACF,EACF,GAEJ,CAEJ",
+  "sourcesContent": ["import React, { useRef } from 'react'\nimport { Container, Text, Link, Picture, Button } from '../../components/index.js'\nimport CompanyStatsBanner from './CompanyStatsBanner/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const MulticolDropdown = ({\n  multicolMetadata,\n  showStatsBanner,\n  statsBannerData,\n}: {\n  multicolMetadata: any\n  showStatsBanner: boolean\n  statsBannerData: any\n}) => {\n  const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={multicolDropdownRef} className=\"bg-white py-4\">\n      <Container childClassName=\"bg-white\" className=\"h-full\">\n        <div className=\"laptop:gap-4 flex flex-col gap-3\">\n          {showStatsBanner && <CompanyStatsBanner data={statsBannerData} />}\n          <div className=\"flex gap-4\">\n            {multicolMetadata?.map((item: any, index: number) => (\n              <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n                <MulticolItem item={item} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    </div>\n  )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nexport const MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n  const { locale = 'us' } = useAiuiContext()\n  return (\n    <>\n      {item?.columns && (\n        <>\n          <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n          <div className=\"mt-2 flex flex-col\">\n            {item.columns?.map((columnItem: any) => (\n              <div key={columnItem.label} className=\"flex items-center gap-1 py-2\">\n                <Link\n                  href={`${getLocalizedPath(columnItem.url, locale)}?ref=navMenu`}\n                  asChild={!columnItem.url}\n                  className=\"text-sm font-bold leading-[1.4] no-underline\"\n                >\n                  {columnItem.label}\n                </Link>\n                {columnItem?.badge && (\n                  <Text\n                    as=\"p\"\n                    html={columnItem?.badge || 'badge'}\n                    className=\"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]\"\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {item?.imageUrl && (\n        <div\n          className={cn(\n            'rounded-image-text laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden',\n            {\n              ['tablet:max-w-none laptop:max-w-none']: allPicture,\n            }\n          )}\n        >\n          <Link href={`${getLocalizedPath(item.url, locale)}?ref=navMenu`} asChild={!item.url}>\n            <div className=\"size-full\">\n              <Picture\n                source={item.imageUrl}\n                width={404}\n                height={280}\n                className=\"size-full\"\n                imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n              />\n              <div className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n                <Text\n                  html={item.title}\n                  className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                />\n                {item.subtitle && (\n                  <Text\n                    html={item.subtitle}\n                    className={cn('text-sm font-bold leading-[1.4] text-white', {\n                      'text-black': item?.theme === 'dark',\n                    })}\n                  />\n                )}\n                {item?.primary?.label && (\n                  <Button\n                    as=\"a\"\n                    href={getLocalizedPath(item?.primary?.url, locale)}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4 lg-desktop:size-5\"\n                    className={cn('mr-auto !p-0 text-sm font-bold leading-[1.4] text-white', {\n                      'text-black': item?.theme === 'dark',\n                    })}\n                  >\n                    {item?.primary?.label || 'more'}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </Link>\n        </div>\n      )}\n    </>\n  )\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,iBAAAC,IAAA,eAAAC,EAAAJ,GAwBQ,IAAAK,EAAA,6BAxBRC,EAA8B,iBAC9BC,EAAuD,qCACvDC,EAA+B,4CAC/BC,EAAqC,kCACrCC,EAA+B,oCAMxB,MAAMR,EAAmB,CAAC,CAC/B,iBAAAS,EACA,gBAAAC,EACA,gBAAAC,CACF,IAIM,CACJ,MAAMC,KAAsB,UAAuB,IAAI,EAEvD,SACE,OAAC,OAAI,IAAKA,EAAqB,UAAU,gBACvC,mBAAC,aAAU,eAAe,WAAW,UAAU,SAC7C,oBAAC,OAAI,UAAU,mCACZ,UAAAF,MAAmB,OAAC,EAAAG,QAAA,CAAmB,KAAMF,EAAiB,KAC/D,OAAC,OAAI,UAAU,aACZ,SAAAF,GAAkB,IAAI,CAACK,EAAWC,OACjC,OAAC,OAAiD,UAAU,QAC1D,mBAACd,EAAA,CAAa,KAAMa,EAAM,GADlB,gBAAgBA,GAAM,KAAK,IAAIC,CAAK,EAE9C,CACD,EACH,GACF,EACF,EACF,CAEJ,EAMad,EAAe,CAAC,CAAE,KAAAa,EAAM,WAAAE,CAAW,IAA2C,CACzF,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACzC,SACE,oBACG,UAAAH,GAAM,YACL,oBACE,oBAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,MAAM,UAAU,sDAAsD,KACjG,OAAC,OAAI,UAAU,qBACZ,SAAAA,EAAK,SAAS,IAAKI,MAClB,QAAC,OAA2B,UAAU,+BACpC,oBAAC,QACC,KAAM,MAAG,oBAAiBA,EAAW,IAAKD,CAAM,CAAC,eACjD,QAAS,CAACC,EAAW,IACrB,UAAU,+CAET,SAAAA,EAAW,MACd,EACCA,GAAY,UACX,OAAC,QACC,GAAG,IACH,KAAMA,GAAY,OAAS,QAC3B,UAAU,6HACZ,IAbMA,EAAW,KAerB,CACD,EACH,GACF,EAEDJ,GAAM,aACL,OAAC,OACC,aAAW,MACT,uLACA,CACG,sCAAwCE,CAC3C,CACF,EAEA,mBAAC,QAAK,KAAM,MAAG,oBAAiBF,EAAK,IAAKG,CAAM,CAAC,eAAgB,QAAS,CAACH,EAAK,IAC9E,oBAAC,OAAI,UAAU,YACb,oBAAC,WACC,OAAQA,EAAK,SACb,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,KACA,QAAC,OAAI,UAAU,uEACb,oBAAC,QACC,KAAMA,EAAK,MACX,aAAW,MAAG,iEAAkE,CAC9E,aAAcA,GAAM,QAAU,MAChC,CAAC,EACH,EACCA,EAAK,aACJ,OAAC,QACC,KAAMA,EAAK,SACX,aAAW,MAAG,6CAA8C,CAC1D,aAAcA,GAAM,QAAU,MAChC,CAAC,EACH,EAEDA,GAAM,SAAS,UACd,OAAC,UACC,GAAG,IACH,QAAM,oBAAiBA,GAAM,SAAS,IAAKG,CAAM,EACjD,QAAQ,OACR,KAAK,KACL,cAAc,2BACd,aAAW,MAAG,0DAA2D,CACvE,aAAcH,GAAM,QAAU,MAChC,CAAC,EAEA,SAAAA,GAAM,SAAS,OAAS,OAC3B,GAEJ,GACF,EACF,EACF,GAEJ,CAEJ",
   "names": ["MulticolDropdown_exports", "__export", "MulticolDropdown", "MulticolItem", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_CompanyStatsBanner", "import_utils", "import_AiuiProvider", "multicolMetadata", "showStatsBanner", "statsBannerData", "multicolDropdownRef", "CompanyStatsBanner", "item", "index", "allPicture", "locale", "columnItem"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var Q=Object.create;var g=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},T=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of X(t))!Z.call(e,i)&&i!==o&&g(e,i,{get:()=>t[i],enumerable:!(p=U(t,i))||p.enumerable});return e};var S=(e,t,o)=>(o=e!=null?Q(Y(e)):{},T(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>T(g({},"__esModule",{value:!0}),e);var ne={};$(ne,{ProductCard:()=>c.default,default:()=>ae});module.exports=ee(ne);var r=require("react/jsx-runtime"),y=S(require("react")),d=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),h=require("swiper/react"),se=require("swiper/css"),x=require("../../components/text.js"),B=require("../../components/heading.js"),I=require("react"),c=S(require("./ProductCard.js")),O=require("../../hooks/useExposure.js"),s=require("../../components/tabs.js");const te="shelf",re="image_overlay_shelf",C=(0,I.forwardRef)(({data:e,onLearnMore:t,onShopNow:o,onAddToCart:p,onProductImageClick:i,classNames:l,copy:D,breakpoints:L,className:M="",...N},R)=>{const P=y.useRef(null);(0,O.useExposure)(P,{componentType:te,componentName:re,componentTitle:e.title,componentDescription:e.description}),y.useImperativeHandle(R,()=>P.current);const{productsCard:k=[],isShowTab:u=!1,productsTab:n=[],tabShape:F="square",tabAlign:H="left",isShowTag:E=!0,showOriginalPrice:V=!0,secondaryButtonText:A,secondaryButtonFun:q,primaryButtonText:j,primaryButtonFun:z}=e,[b,W]=y.useState(()=>u&&n.length>0?n[0].tab:""),[m,_]=y.useState(()=>u&&n.length>0?n[0].data??[]:k),G={showTags:E,showOriginalPrice:V,secondaryButtonText:A,secondaryButtonFun:q,primaryButtonText:j,primaryButtonFun:z,onLearnMore:t,onShopNow:o,onAddToCart:p,onProductImageClick:i,classNames:l,copy:D},J={0:{spaceBetween:12,slidesPerView:1.2},768:{spaceBetween:16,slidesPerView:m.length<=2?2:2.2},1024:{spaceBetween:16,slidesPerView:m.length<=2?2:3},1440:{spaceBetween:16,slidesPerView:Math.max(2,Math.min(4,m.length))}};return(0,r.jsxs)("div",{ref:P,className:(0,d.cn)("collection-shelves-wrap w-full",M,l?.root),...N,children:[e.title&&(0,r.jsx)(B.Heading,{as:"h2",size:4,className:(0,d.cn)("text-info-primary mb-4",l?.title),children:e.title}),e.description&&(0,r.jsx)(x.Text,{size:3,as:"p",className:(0,d.cn)("text-info-primary mb-6",l?.description),children:e.description}),u&&n.length>0&&(0,r.jsx)(s.Tabs,{value:b,onValueChange:a=>{const f=n.find(K=>K.tab===a);f&&(W(a),_(f.data??[]))},align:H,shape:F==="rounded"?"rounded":"square",children:(0,r.jsx)(s.TabsList,{children:n.map(a=>(0,r.jsx)(s.TabsTrigger,{value:a.tab,children:a.tab},a.id??a.tab))})}),(0,r.jsx)(h.Swiper,{spaceBetween:16,slidesPerView:"auto",className:(0,d.cn)("!overflow-visible",u&&n.length>0?"mt-6":""),breakpoints:L||J,children:m.map((a,f)=>(0,r.jsx)(h.SwiperSlide,{children:(0,r.jsx)(c.default,{product:a,...G})},a.sku||f))},b||"default")]})});C.displayName="ImageOverlayShelf";const v=C;v.ProductCard=c.default;const oe=(0,w.withLayout)(v);var ae=oe;
+"use strict";"use client";var K=Object.create;var g=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},T=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of U(t))!Y.call(e,i)&&i!==o&&g(e,i,{get:()=>t[i],enumerable:!(p=Q(t,i))||p.enumerable});return e};var S=(e,t,o)=>(o=e!=null?K(X(e)):{},T(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),$=e=>T(g({},"__esModule",{value:!0}),e);var ae={};Z(ae,{ProductCard:()=>c.default,default:()=>oe});module.exports=$(ae);var r=require("react/jsx-runtime"),y=S(require("react")),d=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),h=require("swiper/react"),se=require("swiper/css"),x=require("../../components/text.js"),B=require("../../components/heading.js"),I=require("react"),c=S(require("./ProductCard.js")),O=require("../../hooks/useExposure.js"),s=require("../../components/tabs.js");const ee="shelf",te="image_overlay_shelf",C=(0,I.forwardRef)(({data:e,onLearnMore:t,onShopNow:o,onAddToCart:p,onProductImageClick:i,classNames:l,copy:D,breakpoints:L,className:M="",...N},R)=>{const P=y.useRef(null);(0,O.useExposure)(P,{componentType:ee,componentName:te,componentTitle:e.title,componentDescription:e.description}),y.useImperativeHandle(R,()=>P.current);const{productsCard:k=[],isShowTab:u=!1,productsTab:n=[],tabShape:ne="square",tabAlign:F="left",isShowTag:H=!0,showOriginalPrice:E=!0,secondaryButtonText:V,secondaryButtonFun:A,primaryButtonText:j,primaryButtonFun:q}=e,[b,z]=y.useState(()=>u&&n.length>0?n[0].tab:""),[m,W]=y.useState(()=>u&&n.length>0?n[0].data??[]:k),_={showTags:H,showOriginalPrice:E,secondaryButtonText:V,secondaryButtonFun:A,primaryButtonText:j,primaryButtonFun:q,onLearnMore:t,onShopNow:o,onAddToCart:p,onProductImageClick:i,classNames:l,copy:D},G={0:{spaceBetween:12,slidesPerView:1.2},768:{spaceBetween:16,slidesPerView:m.length<=2?2:2.2},1024:{spaceBetween:16,slidesPerView:m.length<=2?2:3},1440:{spaceBetween:16,slidesPerView:Math.max(2,Math.min(4,m.length))}};return(0,r.jsxs)("div",{ref:P,className:(0,d.cn)("collection-shelves-wrap w-full",M,l?.root),...N,children:[e.title&&(0,r.jsx)(B.Heading,{as:"h2",size:4,className:(0,d.cn)("text-info-primary mb-4",l?.title),children:e.title}),e.description&&(0,r.jsx)(x.Text,{size:3,as:"p",className:(0,d.cn)("text-info-primary mb-6",l?.description),children:e.description}),u&&n.length>0&&(0,r.jsx)(s.Tabs,{value:b,onValueChange:a=>{const f=n.find(J=>J.tab===a);f&&(z(a),W(f.data??[]))},align:F,shape:"rounded",children:(0,r.jsx)(s.TabsList,{children:n.map(a=>(0,r.jsx)(s.TabsTrigger,{value:a.tab,children:a.tab},a.id??a.tab))})}),(0,r.jsx)(h.Swiper,{spaceBetween:16,slidesPerView:"auto",className:(0,d.cn)("!overflow-visible",u&&n.length>0?"mt-6":""),breakpoints:L||G,children:m.map((a,f)=>(0,r.jsx)(h.SwiperSlide,{children:(0,r.jsx)(c.default,{product:a,..._})},a.sku||f))},b||"default")]})});C.displayName="ImageOverlayShelf";const v=C;v.ProductCard=c.default;const re=(0,w.withLayout)(v);var oe=re;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageOverlayShelf/index.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport 'swiper/css'\n\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/heading.js'\nimport { forwardRef } from 'react'\n\nimport ProductCard from './ProductCard.js'\nimport type {\n  ProductCardData,\n  ProductCardProps,\n  ButtonFunctionType,\n  ImageOverlayShelfSemanticName,\n  CopyConfig,\n  ProductsTab,\n} from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\n\nconst componentType = 'shelf'\nconst componentName = 'image_overlay_shelf'\n\n// Re-export types for external use\nexport type {\n  ButtonFunctionType,\n  ProductCardData,\n  ProductCardProps,\n  ImageOverlayShelfSemanticName,\n  CopyConfig,\n  ImageObjectPosition,\n  ProductsTab,\n} from './types.js'\n\n/**\n * ImageOverlayShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ImageOverlayShelfData {\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u5217\u8868\uFF08\u975E Tab \u6A21\u5F0F\uFF09 */\n  productsCard: ProductCardData[]\n  /** \u662F\u5426\u663E\u793A Tab \u5207\u6362\uFF0C\u9ED8\u8BA4 false */\n  isShowTab?: boolean\n  /** Tab \u6570\u636E\u5217\u8868\uFF08isShowTab=true \u65F6\u4F7F\u7528\uFF09 */\n  productsTab?: ProductsTab[]\n  /** Tab \u5F62\u72B6\uFF0C\u9ED8\u8BA4 square */\n  tabShape?: 'square' | 'rounded'\n  /** Tab \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left */\n  tabAlign?: 'left' | 'center' | 'right'\n  /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n  isShowTag?: boolean\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n  showOriginalPrice?: boolean\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n}\n\n/**\n * ImageOverlayShelf Props \u63A5\u53E3\n */\nexport interface ImageOverlayShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: ImageOverlayShelfData\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<ImageOverlayShelfSemanticName, string>>\n  /** \u6837\u5F0F\u7C7B\u540D */\n  className?: string\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /** \u65AD\u70B9\u914D\u7F6E */\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n}\n\n/**\n * ImageOverlayShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ImageOverlayShelfComponent extends React.ForwardRefExoticComponent<\n  ImageOverlayShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n  /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n  ProductCard: typeof ProductCard\n}\n\n/**\n * \u5171\u4EAB Props \u7C7B\u578B\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n */\ntype SharedProductCardProps = Omit<ProductCardProps, 'product' | 'className'>\n\nconst ImageOverlayShelf = forwardRef<HTMLDivElement, ImageOverlayShelfProps>(\n  (\n    {\n      data,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      copy,\n      breakpoints,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    const boxRef = React.useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: data.title,\n      componentDescription: data.description,\n    })\n\n    React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    const {\n      productsCard = [],\n      isShowTab = false,\n      productsTab = [],\n      tabShape = 'square',\n      tabAlign = 'left',\n      isShowTag = true,\n      showOriginalPrice = true,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n    } = data\n\n    // Tab \u72B6\u6001\n    const [tabId, setTabId] = React.useState<string>(() => {\n      if (isShowTab && productsTab.length > 0) {\n        return productsTab[0].tab\n      }\n      return ''\n    })\n\n    // \u5F53\u524D\u5C55\u793A\u7684\u4EA7\u54C1\u5217\u8868\n    const [currentProducts, setCurrentProducts] = React.useState<ProductCardData[]>(() => {\n      if (isShowTab && productsTab.length > 0) {\n        return productsTab[0].data ?? []\n      }\n      return productsCard\n    })\n\n    // \u6784\u5EFA\u5171\u4EAB props\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n    const sharedProps: SharedProductCardProps = {\n      showTags: isShowTag,\n      showOriginalPrice,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      copy,\n    }\n\n    // \u9ED8\u8BA4\u65AD\u70B9\u914D\u7F6E\uFF08\u57FA\u4E8E currentProducts \u52A8\u6001\u8BA1\u7B97\uFF09\n    const defaultBreakpoints = {\n      0: {\n        spaceBetween: 12,\n        slidesPerView: 1.2,\n      },\n      768: {\n        spaceBetween: 16,\n        slidesPerView: currentProducts.length <= 2 ? 2 : 2.2,\n      },\n      1024: {\n        spaceBetween: 16,\n        slidesPerView: currentProducts.length <= 2 ? 2 : 3,\n      },\n      1440: {\n        spaceBetween: 16,\n        slidesPerView: Math.max(2, Math.min(4, currentProducts.length)),\n      },\n    }\n\n    return (\n      <div ref={boxRef} className={cn('collection-shelves-wrap w-full', className, classNames?.root)} {...props}>\n        {/* \u6807\u9898\u533A\u57DF */}\n        {data.title && (\n          <Heading as=\"h2\" size={4} className={cn('text-info-primary mb-4', classNames?.title)}>\n            {data.title}\n          </Heading>\n        )}\n        {data.description && (\n          <Text size={3} as=\"p\" className={cn('text-info-primary mb-6', classNames?.description)}>\n            {data.description}\n          </Text>\n        )}\n\n        {/* Tab \u5207\u6362 */}\n        {isShowTab && productsTab.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab.find(item => item.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                setCurrentProducts(currentTab.data ?? [])\n              }\n            }}\n            align={tabAlign}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item.id ?? item.tab} value={item.tab}>\n                  {item.tab}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\n        )}\n\n        {/* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */}\n        <Swiper\n          key={tabId || 'default'}\n          spaceBetween={16}\n          slidesPerView=\"auto\"\n          className={cn('!overflow-visible', isShowTab && productsTab.length > 0 ? 'mt-6' : '')}\n          breakpoints={breakpoints || defaultBreakpoints}\n        >\n          {currentProducts.map((product, index) => (\n            <SwiperSlide key={product.sku || index}>\n              <ProductCard product={product} {...sharedProps} />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    )\n  }\n)\n\nImageOverlayShelf.displayName = 'ImageOverlayShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ImageOverlayShelfWithProductCard = ImageOverlayShelf as ImageOverlayShelfComponent\nImageOverlayShelfWithProductCard.ProductCard = ProductCard\n\nexport { ProductCard }\nconst ImageOverlayShelfWrapped = withLayout(ImageOverlayShelfWithProductCard)\nexport default ImageOverlayShelfWrapped\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport 'swiper/css'\n\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/heading.js'\nimport { forwardRef } from 'react'\n\nimport ProductCard from './ProductCard.js'\nimport type {\n  ProductCardData,\n  ProductCardProps,\n  ButtonFunctionType,\n  ImageOverlayShelfSemanticName,\n  CopyConfig,\n  ProductsTab,\n} from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\n\nconst componentType = 'shelf'\nconst componentName = 'image_overlay_shelf'\n\n// Re-export types for external use\nexport type {\n  ButtonFunctionType,\n  ProductCardData,\n  ProductCardProps,\n  ImageOverlayShelfSemanticName,\n  CopyConfig,\n  ImageObjectPosition,\n  ProductsTab,\n} from './types.js'\n\n/**\n * ImageOverlayShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ImageOverlayShelfData {\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u5217\u8868\uFF08\u975E Tab \u6A21\u5F0F\uFF09 */\n  productsCard: ProductCardData[]\n  /** \u662F\u5426\u663E\u793A Tab \u5207\u6362\uFF0C\u9ED8\u8BA4 false */\n  isShowTab?: boolean\n  /** Tab \u6570\u636E\u5217\u8868\uFF08isShowTab=true \u65F6\u4F7F\u7528\uFF09 */\n  productsTab?: ProductsTab[]\n  /** Tab \u5F62\u72B6\uFF0C\u9ED8\u8BA4 square */\n  tabShape?: 'square' | 'rounded'\n  /** Tab \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left */\n  tabAlign?: 'left' | 'center' | 'right'\n  /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n  isShowTag?: boolean\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n  showOriginalPrice?: boolean\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n}\n\n/**\n * ImageOverlayShelf Props \u63A5\u53E3\n */\nexport interface ImageOverlayShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: ImageOverlayShelfData\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u4EA7\u54C1\u56FE\u7247\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<ImageOverlayShelfSemanticName, string>>\n  /** \u6837\u5F0F\u7C7B\u540D */\n  className?: string\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /** \u65AD\u70B9\u914D\u7F6E */\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n}\n\n/**\n * ImageOverlayShelf \u590D\u5408\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n */\nexport interface ImageOverlayShelfComponent extends React.ForwardRefExoticComponent<\n  ImageOverlayShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n  /** \u72EC\u7ACB\u7684 ProductCard \u7EC4\u4EF6 */\n  ProductCard: typeof ProductCard\n}\n\n/**\n * \u5171\u4EAB Props \u7C7B\u578B\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n */\ntype SharedProductCardProps = Omit<ProductCardProps, 'product' | 'className'>\n\nconst ImageOverlayShelf = forwardRef<HTMLDivElement, ImageOverlayShelfProps>(\n  (\n    {\n      data,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      copy,\n      breakpoints,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    const boxRef = React.useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: data.title,\n      componentDescription: data.description,\n    })\n\n    React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    const {\n      productsCard = [],\n      isShowTab = false,\n      productsTab = [],\n      tabShape = 'square',\n      tabAlign = 'left',\n      isShowTag = true,\n      showOriginalPrice = true,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n    } = data\n\n    // Tab \u72B6\u6001\n    const [tabId, setTabId] = React.useState<string>(() => {\n      if (isShowTab && productsTab.length > 0) {\n        return productsTab[0].tab\n      }\n      return ''\n    })\n\n    // \u5F53\u524D\u5C55\u793A\u7684\u4EA7\u54C1\u5217\u8868\n    const [currentProducts, setCurrentProducts] = React.useState<ProductCardData[]>(() => {\n      if (isShowTab && productsTab.length > 0) {\n        return productsTab[0].data ?? []\n      }\n      return productsCard\n    })\n\n    // \u6784\u5EFA\u5171\u4EAB props\uFF08\u900F\u4F20\u7ED9 ProductCard\uFF09\n    const sharedProps: SharedProductCardProps = {\n      showTags: isShowTag,\n      showOriginalPrice,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      copy,\n    }\n\n    // \u9ED8\u8BA4\u65AD\u70B9\u914D\u7F6E\uFF08\u57FA\u4E8E currentProducts \u52A8\u6001\u8BA1\u7B97\uFF09\n    const defaultBreakpoints = {\n      0: {\n        spaceBetween: 12,\n        slidesPerView: 1.2,\n      },\n      768: {\n        spaceBetween: 16,\n        slidesPerView: currentProducts.length <= 2 ? 2 : 2.2,\n      },\n      1024: {\n        spaceBetween: 16,\n        slidesPerView: currentProducts.length <= 2 ? 2 : 3,\n      },\n      1440: {\n        spaceBetween: 16,\n        slidesPerView: Math.max(2, Math.min(4, currentProducts.length)),\n      },\n    }\n\n    return (\n      <div ref={boxRef} className={cn('collection-shelves-wrap w-full', className, classNames?.root)} {...props}>\n        {/* \u6807\u9898\u533A\u57DF */}\n        {data.title && (\n          <Heading as=\"h2\" size={4} className={cn('text-info-primary mb-4', classNames?.title)}>\n            {data.title}\n          </Heading>\n        )}\n        {data.description && (\n          <Text size={3} as=\"p\" className={cn('text-info-primary mb-6', classNames?.description)}>\n            {data.description}\n          </Text>\n        )}\n\n        {/* Tab \u5207\u6362 */}\n        {isShowTab && productsTab.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab.find(item => item.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                setCurrentProducts(currentTab.data ?? [])\n              }\n            }}\n            align={tabAlign}\n            shape=\"rounded\"\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item.id ?? item.tab} value={item.tab}>\n                  {item.tab}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\n        )}\n\n        {/* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */}\n        <Swiper\n          key={tabId || 'default'}\n          spaceBetween={16}\n          slidesPerView=\"auto\"\n          className={cn('!overflow-visible', isShowTab && productsTab.length > 0 ? 'mt-6' : '')}\n          breakpoints={breakpoints || defaultBreakpoints}\n        >\n          {currentProducts.map((product, index) => (\n            <SwiperSlide key={product.sku || index}>\n              <ProductCard product={product} {...sharedProps} />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    )\n  }\n)\n\nImageOverlayShelf.displayName = 'ImageOverlayShelf'\n\n// \u521B\u5EFA\u590D\u5408\u7EC4\u4EF6\nconst ImageOverlayShelfWithProductCard = ImageOverlayShelf as ImageOverlayShelfComponent\nImageOverlayShelfWithProductCard.ProductCard = ProductCard\n\nexport { ProductCard }\nconst ImageOverlayShelfWrapped = withLayout(ImageOverlayShelfWithProductCard)\nexport default ImageOverlayShelfWrapped\n"],
+  "mappings": "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",
   "names": ["ImageOverlayShelf_exports", "__export", "ProductCard", "ImageOverlayShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_Styles", "import_react", "import_css", "import_text", "import_heading", "import_ProductCard", "import_useExposure", "import_tabs", "componentType", "componentName", "ImageOverlayShelf", "data", "onLearnMore", "onShopNow", "onAddToCart", "onProductImageClick", "classNames", "copy", "breakpoints", "className", "props", "ref", "boxRef", "productsCard", "isShowTab", "productsTab", "tabShape", "tabAlign", "isShowTag", "showOriginalPrice", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "tabId", "setTabId", "currentProducts", "setCurrentProducts", "sharedProps", "defaultBreakpoints", "value", "currentTab", "item", "product", "index", "ImageOverlayShelfWithProductCard", "ImageOverlayShelfWrapped"]
 }

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

@@ -1,4 +1,4 @@
-"use strict";"use client";var H=Object.create;var E=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var a in e)E(t,a,{get:e[a],enumerable:!0})},v=(t,e,a,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of V(e))!z.call(t,s)&&s!==a&&E(t,s,{get:()=>e[s],enumerable:!(d=B(e,s))||d.enumerable});return t};var Q=(t,e,a)=>(a=t!=null?H(j(t)):{},v(e||!t||!t.__esModule?E(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>v(E({},"__esModule",{value:!0}),t);var U={};q(U,{default:()=>K});module.exports=F(U);var o=require("react/jsx-runtime"),b=Q(require("react")),y=require("class-variance-authority"),l=require("swiper/react"),m=require("swiper/modules"),N=require("react-responsive"),X=require("swiper/css/pagination"),n=require("../../helpers/index.js"),p=require("../../index.js"),T=require("../../shared/Styles.js"),S=require("../../hooks/useExposure.js");const G="image",Y="Media Endorsement",x=3;function $(t,e){const a=[];for(let d=0;d<t.length;d+=e)a.push(t.slice(d,d+e));return a}const J=(0,y.cva)("rounded-box lg-desktop:h-[240px] desktop:px-6 flex h-[200px] flex-col justify-start gap-[26px] bg-[#EAEAEC] p-4",{variants:{theme:{light:"",dark:""},rounded:{true:"rounded-card",false:""}},defaultVariants:{theme:"light",rounded:!1}}),k=b.forwardRef(({className:t,classNames:e={},data:a,onItemClick:d,...s},D)=>{const{title:c,subtitle:u,items:g,theme:w="light",rounded:I=!1,layout:P="grid"}=a,C=(0,N.useMediaQuery)({query:"(max-width: 767px)"}),h=b.useRef(null);b.useImperativeHandle(D,()=>h.current),(0,S.useExposure)(h,{componentType:G,componentName:Y,componentTitle:c,componentDescription:u});const _=b.useCallback((r,i)=>f=>{d?.(r,i,f)},[d]),M=(r,i)=>(0,o.jsxs)("div",{className:(0,n.cn)("media-endorsement-card text-info-primary",J({theme:w,rounded:I}),e.card),onClick:_(r,i),"aria-label":r.mediaName?`${r.mediaName} endorsement`:void 0,children:[(0,o.jsx)("div",{className:(0,n.cn)("media-endorsement-card-icon","lg-desktop:h-16 flex h-12 items-center justify-start overflow-hidden",e.cardIcon),children:(0,o.jsx)("img",{src:r.icon.url,alt:r.icon.alt||r.mediaName||"Media logo",className:"lg-desktop:h-16 h-12 w-auto object-contain",loading:"lazy"})}),(0,o.jsx)(p.Heading,{size:2,as:"h6",html:r.text,className:(0,n.cn)("media-endorsement-card-quote line-clamp-4",e.cardQuote)})]},i),A=()=>{const r=$(g,x);return(0,o.jsx)(l.Swiper,{className:(0,n.cn)("media-endorsement-mobile-swiper","w-full !overflow-visible pb-8",e.carousel),modules:[m.Pagination],slidesPerView:1,spaceBetween:12,pagination:{clickable:!0,bulletClass:"media-endorsement-bullet",bulletActiveClass:"media-endorsement-bullet-active"},children:r.map((i,f)=>(0,o.jsx)(l.SwiperSlide,{className:"!h-auto",children:(0,o.jsx)("div",{className:"flex flex-col gap-3",children:i.map((R,O)=>{const L=f*x+O;return M(R,L)})})},f))})};return(0,o.jsxs)("div",{ref:h,className:(0,n.cn)("media-endorsement-root text-info-primary","w-full",t,e.root,{"aiui-dark":w==="dark"}),...s,children:[(0,o.jsx)("style",{children:`
+"use strict";"use client";var L=Object.create;var E=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var z=(t,e)=>{for(var i in e)E(t,i,{get:e[i],enumerable:!0})},v=(t,e,i,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of B(e))!j.call(t,s)&&s!==i&&E(t,s,{get:()=>e[s],enumerable:!(d=H(e,s))||d.enumerable});return t};var q=(t,e,i)=>(i=t!=null?L(V(t)):{},v(e||!t||!t.__esModule?E(i,"default",{value:t,enumerable:!0}):i,t)),Q=t=>v(E({},"__esModule",{value:!0}),t);var K={};z(K,{default:()=>J});module.exports=Q(K);var o=require("react/jsx-runtime"),b=q(require("react")),y=require("class-variance-authority"),l=require("swiper/react"),m=require("swiper/modules"),N=require("react-responsive"),X=require("swiper/css/pagination"),n=require("../../helpers/index.js"),p=require("../../index.js"),T=require("../../shared/Styles.js"),S=require("../../hooks/useExposure.js");const F="image",G="Media Endorsement",x=3;function Y(t,e){const i=[];for(let d=0;d<t.length;d+=e)i.push(t.slice(d,d+e));return i}const $=(0,y.cva)("rounded-box lg-desktop:h-[240px] desktop:px-6 flex h-[200px] flex-col justify-start gap-[26px] bg-[#EAEAEC] p-4",{variants:{theme:{light:"",dark:""}},defaultVariants:{theme:"light"}}),k=b.forwardRef(({className:t,classNames:e={},data:i,onItemClick:d,...s},D)=>{const{title:c,subtitle:u,items:g,theme:w="light",rounded:U=!1,layout:I="grid"}=i,P=(0,N.useMediaQuery)({query:"(max-width: 767px)"}),h=b.useRef(null);b.useImperativeHandle(D,()=>h.current),(0,S.useExposure)(h,{componentType:F,componentName:G,componentTitle:c,componentDescription:u});const C=b.useCallback((r,a)=>f=>{d?.(r,a,f)},[d]),M=(r,a)=>(0,o.jsxs)("div",{className:(0,n.cn)("media-endorsement-card text-info-primary",$({theme:w}),e.card),onClick:C(r,a),"aria-label":r.mediaName?`${r.mediaName} endorsement`:void 0,children:[(0,o.jsx)("div",{className:(0,n.cn)("media-endorsement-card-icon","lg-desktop:h-16 flex h-12 items-center justify-start overflow-hidden",e.cardIcon),children:(0,o.jsx)("img",{src:r.icon.url,alt:r.icon.alt||r.mediaName||"Media logo",className:"lg-desktop:h-16 h-12 w-auto object-contain",loading:"lazy"})}),(0,o.jsx)(p.Heading,{size:2,as:"h6",html:r.text,className:(0,n.cn)("media-endorsement-card-quote line-clamp-4",e.cardQuote)})]},a),_=()=>{const r=Y(g,x);return(0,o.jsx)(l.Swiper,{className:(0,n.cn)("media-endorsement-mobile-swiper","w-full !overflow-visible pb-8",e.carousel),modules:[m.Pagination],slidesPerView:1,spaceBetween:12,pagination:{clickable:!0,bulletClass:"media-endorsement-bullet",bulletActiveClass:"media-endorsement-bullet-active"},children:r.map((a,f)=>(0,o.jsx)(l.SwiperSlide,{className:"!h-auto",children:(0,o.jsx)("div",{className:"flex flex-col gap-3",children:a.map((A,R)=>{const O=f*x+R;return M(A,O)})})},f))})};return(0,o.jsxs)("div",{ref:h,className:(0,n.cn)("media-endorsement-root text-info-primary","w-full",t,e.root,{"aiui-dark":w==="dark"}),...s,children:[(0,o.jsx)("style",{children:`
           .media-endorsement-bullet {
             display: inline-block;
             width: 8px;
@@ -19,5 +19,5 @@
             right: 0;
             text-align: center;
           }
-        `}),(c||u)&&(0,o.jsxs)("div",{className:(0,n.cn)("media-endorsement-header mb-6",e.header),children:[c&&(0,o.jsx)(p.Heading,{as:"h2",size:4,html:c,className:(0,n.cn)("media-endorsement-title",e.title)}),u&&(0,o.jsx)(p.Text,{as:"p",size:3,className:(0,n.cn)("",e?.subtitle),html:u})]}),P==="carousel"?(0,o.jsx)(l.Swiper,{className:(0,n.cn)("media-endorsement-carousel","w-full !overflow-visible",e.carousel),modules:[m.FreeMode,m.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},slidesPerView:"auto",spaceBetween:12,breakpoints:{768:{spaceBetween:16}},children:g.map((r,i)=>(0,o.jsx)(l.SwiperSlide,{className:"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]",children:M(r,i)},i))}):C?A():(0,o.jsx)("div",{className:(0,n.cn)("media-endorsement-grid","laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3",e.grid),children:g.map((r,i)=>M(r,i))})]})});k.displayName="MediaEndorsement";var K=(0,T.withLayout)(k);
+        `}),(c||u)&&(0,o.jsxs)("div",{className:(0,n.cn)("media-endorsement-header mb-6",e.header),children:[c&&(0,o.jsx)(p.Heading,{as:"h2",size:4,html:c,className:(0,n.cn)("media-endorsement-title",e.title)}),u&&(0,o.jsx)(p.Text,{as:"p",size:3,className:(0,n.cn)("",e?.subtitle),html:u})]}),I==="carousel"?(0,o.jsx)(l.Swiper,{className:(0,n.cn)("media-endorsement-carousel","w-full !overflow-visible",e.carousel),modules:[m.FreeMode,m.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},slidesPerView:"auto",spaceBetween:12,breakpoints:{768:{spaceBetween:16}},children:g.map((r,a)=>(0,o.jsx)(l.SwiperSlide,{className:"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]",children:M(r,a)},a))}):P?_():(0,o.jsx)("div",{className:(0,n.cn)("media-endorsement-grid","laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3",e.grid),children:g.map((r,a)=>M(r,a))})]})});k.displayName="MediaEndorsement";var J=(0,T.withLayout)(k);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaEndorsement/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Pagination } from 'swiper/modules'\nimport { useMediaQuery } from 'react-responsive'\nimport 'swiper/css/pagination'\nimport { cn } from '../../helpers/index.js'\nimport type {\n  MediaEndorsementProps,\n  MediaEndorsementData,\n  MediaEndorsementItem,\n  MediaEndorsementSemanticName,\n} from './types.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst MEDIA_ENDORSEMENT_COMPONENT_TYPE = 'image'\nconst MEDIA_ENDORSEMENT_COMPONENT_NAME = 'Media Endorsement'\n\nconst MOBILE_ITEMS_PER_SLIDE = 3\n\n// Helper to chunk array into groups\nfunction chunkArray<T>(array: T[], size: number): T[][] {\n  const result: T[][] = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\n/**\n * \u5361\u7247\u5BB9\u5668\u53D8\u4F53\n */\nconst cardVariants = cva(\n  'rounded-box lg-desktop:h-[240px] desktop:px-6 flex h-[200px] flex-col justify-start gap-[26px] bg-[#EAEAEC] p-4',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: '',\n      },\n      rounded: {\n        true: 'rounded-card',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      rounded: false,\n    },\n  }\n)\n\n/**\n * MediaEndorsement - \u5A92\u4F53\u80CC\u4E66\n *\n * @description \u5A92\u4F53\u80CC\u4E66\u7EC4\u4EF6\u7684\u4F5C\u7528\u662F\u901A\u8FC7\u5C55\u793A\u7B2C\u4E09\u65B9\u5A92\u4F53\u7684\u8BC4\u4EF7\u6216\u62A5\u9053\uFF0C\u63D0\u5347\u54C1\u724C\u6216\u4EA7\u54C1\u7684\u53EF\u4FE1\u5EA6\u548C\u5F71\u54CD\u529B\n */\nconst MediaEndorsement = React.forwardRef<HTMLDivElement, MediaEndorsementProps>(\n  ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n    const { title, subtitle, items, theme = 'light', rounded = false, layout = 'grid' } = data\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n\n    const innerRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType: MEDIA_ENDORSEMENT_COMPONENT_TYPE,\n      componentName: MEDIA_ENDORSEMENT_COMPONENT_NAME,\n      componentTitle: title,\n      componentDescription: subtitle,\n    })\n    const handleCardClick = React.useCallback(\n      (item: MediaEndorsementItem, index: number) => (event: React.MouseEvent) => {\n        onItemClick?.(item, index, event)\n      },\n      [onItemClick]\n    )\n\n    const renderCard = (item: MediaEndorsementItem, index: number) => (\n      <div\n        key={index}\n        className={cn('media-endorsement-card text-info-primary', cardVariants({ theme, rounded }), classNames.card)}\n        onClick={handleCardClick(item, index)}\n        aria-label={item.mediaName ? `${item.mediaName} endorsement` : undefined}\n      >\n        {/* \u5A92\u4F53 Logo */}\n        <div\n          className={cn(\n            'media-endorsement-card-icon',\n            'lg-desktop:h-16 flex h-12 items-center justify-start overflow-hidden',\n            classNames.cardIcon\n          )}\n        >\n          <img\n            src={item.icon.url}\n            alt={item.icon.alt || item.mediaName || 'Media logo'}\n            className=\"lg-desktop:h-16 h-12 w-auto object-contain\"\n            loading=\"lazy\"\n          />\n        </div>\n\n        {/* \u5F15\u7528\u6587\u6848 */}\n        <Heading\n          size={2}\n          as={'h6'}\n          html={item.text}\n          className={cn('media-endorsement-card-quote line-clamp-4', classNames.cardQuote)}\n        />\n      </div>\n    )\n\n    // Mobile swiper for grid layout\n    const renderMobileGridSwiper = () => {\n      const chunkedItems = chunkArray(items, MOBILE_ITEMS_PER_SLIDE)\n      return (\n        <Swiper\n          className={cn('media-endorsement-mobile-swiper', 'w-full !overflow-visible pb-8', classNames.carousel)}\n          modules={[Pagination]}\n          slidesPerView={1}\n          spaceBetween={12}\n          pagination={{\n            clickable: true,\n            bulletClass: 'media-endorsement-bullet',\n            bulletActiveClass: 'media-endorsement-bullet-active',\n          }}\n        >\n          {chunkedItems.map((group, slideIndex) => (\n            <SwiperSlide key={slideIndex} className=\"!h-auto\">\n              <div className=\"flex flex-col gap-3\">\n                {group.map((item, itemIndex) => {\n                  const globalIndex = slideIndex * MOBILE_ITEMS_PER_SLIDE + itemIndex\n                  return renderCard(item, globalIndex)\n                })}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      )\n    }\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('media-endorsement-root text-info-primary', 'w-full', className, classNames.root, {\n          'aiui-dark': theme === 'dark',\n        })}\n        {...props}\n      >\n        <style>{`\n          .media-endorsement-bullet {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #D9D9D9;\n            margin: 0 4px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n          }\n          .media-endorsement-bullet-active {\n            background: var(--info-primary-color);\n          }\n          .media-endorsement-mobile-swiper .swiper-pagination {\n            position: absolute;\n            bottom: -28px;\n            left: 0;\n            right: 0;\n            text-align: center;\n          }\n        `}</style>\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('media-endorsement-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('media-endorsement-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {layout === 'carousel' ? (\n          <Swiper\n            className={cn('media-endorsement-carousel', 'w-full !overflow-visible', classNames.carousel)}\n            modules={[FreeMode, Mousewheel]}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]\">\n                {renderCard(item, index)}\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        ) : isMobile ? (\n          renderMobileGridSwiper()\n        ) : (\n          <div\n            className={cn(\n              'media-endorsement-grid',\n              'laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3',\n              classNames.grid\n            )}\n          >\n            {items.map((item, index) => renderCard(item, index))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaEndorsement.displayName = 'MediaEndorsement'\n\nexport default withLayout(MediaEndorsement)\nexport type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Pagination } from 'swiper/modules'\nimport { useMediaQuery } from 'react-responsive'\nimport 'swiper/css/pagination'\nimport { cn } from '../../helpers/index.js'\nimport type {\n  MediaEndorsementProps,\n  MediaEndorsementData,\n  MediaEndorsementItem,\n  MediaEndorsementSemanticName,\n} from './types.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst MEDIA_ENDORSEMENT_COMPONENT_TYPE = 'image'\nconst MEDIA_ENDORSEMENT_COMPONENT_NAME = 'Media Endorsement'\n\nconst MOBILE_ITEMS_PER_SLIDE = 3\n\n// Helper to chunk array into groups\nfunction chunkArray<T>(array: T[], size: number): T[][] {\n  const result: T[][] = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\n/**\n * \u5361\u7247\u5BB9\u5668\u53D8\u4F53\n */\nconst cardVariants = cva(\n  'rounded-box lg-desktop:h-[240px] desktop:px-6 flex h-[200px] flex-col justify-start gap-[26px] bg-[#EAEAEC] p-4',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: '',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * MediaEndorsement - \u5A92\u4F53\u80CC\u4E66\n *\n * @description \u5A92\u4F53\u80CC\u4E66\u7EC4\u4EF6\u7684\u4F5C\u7528\u662F\u901A\u8FC7\u5C55\u793A\u7B2C\u4E09\u65B9\u5A92\u4F53\u7684\u8BC4\u4EF7\u6216\u62A5\u9053\uFF0C\u63D0\u5347\u54C1\u724C\u6216\u4EA7\u54C1\u7684\u53EF\u4FE1\u5EA6\u548C\u5F71\u54CD\u529B\n */\nconst MediaEndorsement = React.forwardRef<HTMLDivElement, MediaEndorsementProps>(\n  ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n    const { title, subtitle, items, theme = 'light', rounded = false, layout = 'grid' } = data\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n\n    const innerRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType: MEDIA_ENDORSEMENT_COMPONENT_TYPE,\n      componentName: MEDIA_ENDORSEMENT_COMPONENT_NAME,\n      componentTitle: title,\n      componentDescription: subtitle,\n    })\n    const handleCardClick = React.useCallback(\n      (item: MediaEndorsementItem, index: number) => (event: React.MouseEvent) => {\n        onItemClick?.(item, index, event)\n      },\n      [onItemClick]\n    )\n\n    const renderCard = (item: MediaEndorsementItem, index: number) => (\n      <div\n        key={index}\n        className={cn('media-endorsement-card text-info-primary', cardVariants({ theme }), classNames.card)}\n        onClick={handleCardClick(item, index)}\n        aria-label={item.mediaName ? `${item.mediaName} endorsement` : undefined}\n      >\n        {/* \u5A92\u4F53 Logo */}\n        <div\n          className={cn(\n            'media-endorsement-card-icon',\n            'lg-desktop:h-16 flex h-12 items-center justify-start overflow-hidden',\n            classNames.cardIcon\n          )}\n        >\n          <img\n            src={item.icon.url}\n            alt={item.icon.alt || item.mediaName || 'Media logo'}\n            className=\"lg-desktop:h-16 h-12 w-auto object-contain\"\n            loading=\"lazy\"\n          />\n        </div>\n\n        {/* \u5F15\u7528\u6587\u6848 */}\n        <Heading\n          size={2}\n          as={'h6'}\n          html={item.text}\n          className={cn('media-endorsement-card-quote line-clamp-4', classNames.cardQuote)}\n        />\n      </div>\n    )\n\n    // Mobile swiper for grid layout\n    const renderMobileGridSwiper = () => {\n      const chunkedItems = chunkArray(items, MOBILE_ITEMS_PER_SLIDE)\n      return (\n        <Swiper\n          className={cn('media-endorsement-mobile-swiper', 'w-full !overflow-visible pb-8', classNames.carousel)}\n          modules={[Pagination]}\n          slidesPerView={1}\n          spaceBetween={12}\n          pagination={{\n            clickable: true,\n            bulletClass: 'media-endorsement-bullet',\n            bulletActiveClass: 'media-endorsement-bullet-active',\n          }}\n        >\n          {chunkedItems.map((group, slideIndex) => (\n            <SwiperSlide key={slideIndex} className=\"!h-auto\">\n              <div className=\"flex flex-col gap-3\">\n                {group.map((item, itemIndex) => {\n                  const globalIndex = slideIndex * MOBILE_ITEMS_PER_SLIDE + itemIndex\n                  return renderCard(item, globalIndex)\n                })}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      )\n    }\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('media-endorsement-root text-info-primary', 'w-full', className, classNames.root, {\n          'aiui-dark': theme === 'dark',\n        })}\n        {...props}\n      >\n        <style>{`\n          .media-endorsement-bullet {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #D9D9D9;\n            margin: 0 4px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n          }\n          .media-endorsement-bullet-active {\n            background: var(--info-primary-color);\n          }\n          .media-endorsement-mobile-swiper .swiper-pagination {\n            position: absolute;\n            bottom: -28px;\n            left: 0;\n            right: 0;\n            text-align: center;\n          }\n        `}</style>\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('media-endorsement-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('media-endorsement-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {layout === 'carousel' ? (\n          <Swiper\n            className={cn('media-endorsement-carousel', 'w-full !overflow-visible', classNames.carousel)}\n            modules={[FreeMode, Mousewheel]}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]\">\n                {renderCard(item, index)}\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        ) : isMobile ? (\n          renderMobileGridSwiper()\n        ) : (\n          <div\n            className={cn(\n              'media-endorsement-grid',\n              'laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3',\n              classNames.grid\n            )}\n          >\n            {items.map((item, index) => renderCard(item, index))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaEndorsement.displayName = 'MediaEndorsement'\n\nexport default withLayout(MediaEndorsement)\nexport type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName }\n"],
+  "mappings": "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",
   "names": ["MediaEndorsement_exports", "__export", "MediaEndorsement_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_react", "import_modules", "import_react_responsive", "import_pagination", "import_helpers", "import__", "import_Styles", "import_useExposure", "MEDIA_ENDORSEMENT_COMPONENT_TYPE", "MEDIA_ENDORSEMENT_COMPONENT_NAME", "MOBILE_ITEMS_PER_SLIDE", "chunkArray", "array", "size", "result", "i", "cardVariants", "MediaEndorsement", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "theme", "rounded", "layout", "isMobile", "innerRef", "handleCardClick", "item", "index", "event", "renderCard", "renderMobileGridSwiper", "chunkedItems", "group", "slideIndex", "itemIndex", "globalIndex"]
 }

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

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

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

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

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

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

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

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

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

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