@anker-in/headless-ui 1.1.87 → 1.1.88

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

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

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

@@ -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'\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 bg-container-secondary-0 flex h-[200px] flex-col justify-start gap-[26px] 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 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 rounded-full',\n            'lg-desktop::h-14 flex h-12 w-auto  items-center 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-12 h-[42px] w-auto object-contain\"\n            loading=\"lazy\"\n          />\n        </div>\n\n        {/* \u5F15\u7528\u6587\u6848 */}\n        <Heading size={2} as={'h6'} className={cn('media-endorsement-card-quote line-clamp-4', classNames.cardQuote)}>\n          {item.text}\n        </Heading>\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={ref}\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": ["jsx", "jsxs", "React", "cva", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Pagination", "useMediaQuery", "cn", "Heading", "Text", "withLayout", "MOBILE_ITEMS_PER_SLIDE", "chunkArray", "array", "size", "result", "cardVariants", "MediaEndorsement", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "theme", "rounded", "layout", "isMobile", "handleCardClick", "item", "index", "event", "renderCard", "renderMobileGridSwiper", "chunkedItems", "group", "slideIndex", "itemIndex", "globalIndex", "MediaEndorsement_default"]
+  "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 size={2} as={'h6'} className={cn('media-endorsement-card-quote line-clamp-4', classNames.cardQuote)}>\n          {item.text}\n        </Heading>\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": ["jsx", "jsxs", "React", "cva", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Pagination", "useMediaQuery", "cn", "Heading", "Text", "withLayout", "useExposure", "MEDIA_ENDORSEMENT_COMPONENT_TYPE", "MEDIA_ENDORSEMENT_COMPONENT_NAME", "MOBILE_ITEMS_PER_SLIDE", "chunkArray", "array", "size", "result", "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", "MediaEndorsement_default"]
 }

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

@@ -1,5 +1,5 @@
 import type { MediaPlayerBaseProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

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

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

@@ -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 { 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        ...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    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 !h-auto\"\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 min-h-screen w-full\"\n                  videoClassName=\"object-cover w-full h-auto\"\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": "aAuMM,mBAAAA,GAmBc,OAAAC,EAFJ,QAAAC,MAjBV,oBAtMN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,WAAAC,GAAS,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,OAA2B,QACtF,OAAS,YAAAC,OAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,MAAY,6BACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtBJ,EAAK,eAAeE,EAAeD,EAAS,EAE5C,MAAMI,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,GAAkBpB,GACtB,CACE,CACE,UAAAqB,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,GACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,EAAI3C,EAAS,EAAK,EAC1C,CAAC4C,EAAKC,EAAM,EAAI7C,EAAS,CAAC,EAC1B,CAAC8C,GAAaC,EAAc,EAAI/C,EAAS,CAAC,EAC1C,CAACgD,EAAqBC,EAAsB,EAAIjD,EAAS,CAAC,EAC1D,CAACkD,EAASC,CAAU,EAAInD,EAAkB,EAAK,EAE/CoD,EAAWnD,EAAyB,IAAI,EACxCoD,EAAQpD,EAAyB,IAAI,EACrCqD,EAAWrD,EAAuB,IAAI,EACtCsD,EAAiBtD,EAAuB,IAAI,EAC5CuD,EAAWvD,EAAuB,IAAI,EACtCwD,EAAoBxD,EAAyB,IAAI,EACjDyD,EAAezD,EAA0B,IAAI,EAC7C0D,EAAmB1D,EAA6B,IAAI,EACpD2D,EAAmB3D,EAA6B,IAAI,EACpD,CAAE,IAAK4D,GAAW,OAAAC,CAAO,EAAIlD,GAAU,EAE7CP,GAAoBmC,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOnC,GAAU,SAAWA,EAAQA,GAASjB,EAAqB,CAAE,KAAMiB,EAAO,WAAYR,EAAe,CAAC,EACzG4C,EACJ,OAAOnC,GAAe,SAClBA,EACAA,GAAclB,EAAqB,CAAE,KAAMkB,EAAY,WAAYT,EAAe,CAAC,EAEzFjB,EAAU,IAAM,CACV2D,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,EAAwB3D,GAAS,IAAM,CAC3C,GAAIgD,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,EAENhE,EAAU,KACR8D,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAEL9D,EAAU,IAAM,CACd,SAASoE,GAAa,CACpB,GAAI,CAAChB,EAAe,SAAWlB,IAAmB,UAAW,OAC7D,MAAMmC,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAIzC,GAAUuC,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC1C,EAAK,IAAI0D,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS3C,EAAK,IAAI2C,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU1C,EAAc,OAAO,CAC9C,QAASqC,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CpE,EAAK,IAAIgE,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACDpE,EAAK,IAAIsC,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf3C,EAAK,IAAI2C,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU3C,EAAc,OAAO,CAC9C,QAASqC,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACvB,EAAgByB,CAAM,CAAC,EAE3BjD,GAAY2C,EAAU,CACpB,cAAArC,GACA,cAAAD,GACA,eAAgB6C,CAClB,CAAC,EAED,MAAMsB,GAAcnF,GAAQ,IACtB4D,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAE1BwB,EACJ,6NACF,OACEvF,EAAAF,GAAA,CACG,UAAA4C,GACC3C,EAAC,OACE,GAAGyC,EACJ,IAAKe,EACL,UAAW/C,EACT,oCACA+E,EACA,CACE,YAAapD,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,SAAA3B,EAAC,OAAI,IAAK+D,GACP,UAACxB,GACAtC,EAAC,OAAI,UAAU,yGACZ,UAAAgE,GAAc,CAACrB,GACd5C,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQiE,CAAW,EAChD,EAEDC,GAAmBtB,GAClB5C,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQkE,CAAgB,EACrD,EAEDlC,GACChC,EAACW,EAAA,CACC,QAAQ,OACR,UAAWF,EAAG,kDAAkD,EAChE,QAAS,IAAM,CACb4C,EAAW,EAAI,EAYfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,EAEF/B,EAAC,OACE,GAAK0C,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,UAAW9E,EAAG,WAAYkB,CAAS,EAEnC,UAAA3B,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,GAAI2B,EACJ,UAAWnB,EAAG,2BAA4BkC,EAAS,kBAAoB6C,EAAQ,CAC7E,YAAapD,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAClBtC,EAAC,OACC,UAAWQ,EACT,wFACAkC,EAAS,qDAAuD,cAClE,EAEC,UAAAsB,GACCjE,EAAC,OACC,IAAKyD,EACL,UAAU,kHACV,wBAAyB,CAAE,OAAQQ,CAAW,EAChD,EAEDjC,GACChC,EAACW,EAAA,CACC,IAAKiD,EACL,QAAQ,OACR,UAAWnD,EAAG,2EAA2E,EACzF,QAAS,IAAM,CACb4C,EAAW,EAAI,EACfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,EAEF/B,EAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMiD,EAAsB,GAAG,IAAK,EAExD,UAAAlD,EAACgB,EAAA,CACC,SAAUsC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,wCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAlC,EAACgB,EAAA,CACC,SAAUsC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,0CACV,eAAe,6BACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAlC,EAAC,OACC,IAAKuD,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACCZ,GACC3C,EAAC,OACC,UAAWS,EAAGkC,GAAU,iDAAkD6C,CAAM,EAChF,MAAO7C,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWnB,GACVjC,EAACY,GAAA,CAAW,QAASwC,EAAS,UAAWnB,EAAW,aAAc,IAAMoB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA3B,GAAgB,YAAc,kBAE9B,IAAO+D,GAAQ/E,GAAWgB,EAAe",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "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", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        variant,\n        headline,\n        paragraphs,\n        metrics,\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    if (variant === 'text-layout') {\n      return (\n        <div\n          {...rest}\n          ref={titleRef}\n          className={cn(\n            'relative flex w-full items-center overflow-hidden',\n            'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n            'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            },\n            className\n          )}\n        >\n          <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n          {/* Video Background */}\n          <div className=\"absolute inset-0 z-0\">\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={video?.url!}\n              className=\"tablet:block hidden size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <ScrollLoadVideo\n              videoRef={videoRef}\n              poster={img?.url || ''}\n              src={mobileVideo?.url || video?.url!}\n              className=\"tablet:hidden block size-full\"\n              videoClassName=\"size-full object-cover\"\n              muted\n              loop\n              playsInline\n              autoplay\n              webkit-playsinline\n              x5-playsinline\n            />\n            <div className=\"absolute inset-0 bg-black/30\" />\n          </div>\n\n          {/* Content */}\n          {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n          <div\n            className={cn(\n              'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n              'gap-6 px-4 py-10',\n              'tablet:gap-8 tablet:px-8',\n              'laptop:flex-row laptop:gap-12 laptop:px-16',\n              'desktop:gap-16 desktop:px-20',\n              'lg-desktop:px-24'\n            )}\n          >\n            {/* 1. Headline */}\n            {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n            <div className=\"laptop:w-1/2 w-full shrink-0\">\n              {headline && (\n                <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n                  {headline}\n                </Heading>\n              )}\n            </div>\n\n            {/* Right column for paragraphs and metrics */}\n            {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n            <div\n              className={cn(\n                'laptop:w-1/2 flex w-full flex-col justify-start',\n                'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n              )}\n            >\n              {/* 2. Paragraphs */}\n              {paragraphs && paragraphs.length > 0 && (\n                <div className=\"tablet:gap-4 flex flex-col gap-3\">\n                  {paragraphs.map((p, i) => (\n                    <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n                      {typeof p === 'string' ? p : p.text}\n                    </Text>\n                  ))}\n                </div>\n              )}\n\n              {/* 3. Metrics */}\n              {metrics && metrics.length > 0 && (\n                <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n                  {metrics.map((m, i) => (\n                    <div key={i} className=\"flex flex-col gap-1\">\n                      {/* Fix#7: Heading size=4 equivalent classes on span */}\n                      <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n                        {m.value}\n                      </span>\n                      {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n                      <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n                        {m.label}\n                      </Text>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      )\n    }\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full !h-auto\"\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 min-h-screen w-full\"\n                  videoClassName=\"object-cover w-full h-auto\"\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": "aA0NU,OAoGJ,YAAAA,GApGI,OAAAC,EAGA,QAAAC,MAHA,oBAzNV,OAAS,YAAAC,EAAU,UAAAC,EAAQ,WAAAC,GAAS,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,OAA2B,QACtF,OAAS,YAAAC,OAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,OAAY,6BACnB,OAAS,WAAAC,GAAS,QAAAC,OAAY,4BAC9B,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,OAA4B,oCAGrC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAGtBJ,EAAK,eAAeE,EAAeD,EAAS,EAE5C,MAAMI,GAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,GAAkBtB,GACtB,CACE,CACE,UAAAuB,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,QAAAC,GACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,EAAIjD,EAAS,EAAK,EAC1C,CAACkD,EAAKC,EAAM,EAAInD,EAAS,CAAC,EAC1B,CAACoD,GAAaC,EAAc,EAAIrD,EAAS,CAAC,EAC1C,CAACsD,EAAqBC,EAAsB,EAAIvD,EAAS,CAAC,EAC1D,CAACwD,EAASC,CAAU,EAAIzD,EAAkB,EAAK,EAE/C0D,EAAWzD,EAAyB,IAAI,EACxC0D,EAAQ1D,EAAyB,IAAI,EACrC2D,EAAW3D,EAAuB,IAAI,EACtC4D,EAAiB5D,EAAuB,IAAI,EAC5C6D,EAAW7D,EAAuB,IAAI,EACtC8D,EAAoB9D,EAAyB,IAAI,EACjD+D,EAAe/D,EAA0B,IAAI,EAC7CgE,EAAmBhE,EAA6B,IAAI,EACpDiE,EAAmBjE,EAA6B,IAAI,EACpD,CAAE,IAAKkE,EAAW,OAAAC,CAAO,EAAItD,GAAU,EAE7CT,GAAoByC,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMS,EACJ,OAAOvC,GAAU,SAAWA,EAAQA,GAASjB,GAAqB,CAAE,KAAMiB,EAAO,WAAYR,EAAe,CAAC,EACzGgD,EACJ,OAAOvC,GAAe,SAClBA,EACAA,GAAclB,GAAqB,CAAE,KAAMkB,EAAY,WAAYT,EAAe,CAAC,EAEzFnB,EAAU,IAAM,CACViE,GACFV,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACmB,CAAM,CAAC,EAEX,MAAMG,EAAwBjE,GAAS,IAAM,CAC3C,GAAIsD,EAAS,QAAS,CACpB,MAAMY,EAAOZ,EAAS,QAAQ,sBAAsB,EAC9Ca,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CxB,GAAOyB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIhB,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/Ba,EAAe,OAAO,YAC5BpB,GAAeD,EAAcqB,CAAY,CAC3C,CACF,EAAG,GAAG,EAENtE,EAAU,KACRoE,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAELpE,EAAU,IAAM,CACd,SAAS0E,GAAa,CACpB,GAAI,CAAChB,EAAe,SAAWtB,IAAmB,UAAW,OAC7D,MAAMuC,EAASjB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI7C,GAAU2C,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMkB,EAAQhB,EAAkB,QAAQ,MACxC9C,EAAK,IAAI8D,EAAO,CAAE,QAAS,CAAE,CAAC,EAC1Bf,EAAa,SAAS/C,EAAK,IAAI+C,EAAa,QAAS,CAAE,QAAS,CAAE,CAAC,EACvEC,EAAiB,QAAU9C,EAAc,OAAO,CAC9C,QAASyC,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQkB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,IAAc,CACvB,MAAMC,EAAWD,GAAK,SAChBE,GAAQH,EAAM,OACdI,GAAW,EAAID,GACfE,GAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,IAAU,EAAIE,IAC3BI,GAAQL,IAAY,EAAIC,IAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CxE,EAAK,IAAIoE,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACDxE,EAAK,IAAI0C,EAAM,QAAS,CAAE,QAASsB,CAAS,CAAC,EACzCjB,EAAa,SACf/C,EAAK,IAAI+C,EAAa,QAAS,CAAE,QAASiB,GAAY,GAAM,EAAI,CAAE,CAAC,CAEvE,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU/C,EAAc,OAAO,CAC9C,QAASyC,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWoB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtBzB,GAAuB0B,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX3B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DE,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAAC3B,EAAgB6B,CAAM,CAAC,EAE3BrD,GAAY+C,EAAU,CACpB,cAAAzC,GACA,cAAAD,GACA,eAAgBiD,CAClB,CAAC,EAED,MAAMsB,GAAczF,GAAQ,IACtBkE,GAAUd,EAAsB,GAAKA,EAAsB,GAAY,EACvEc,EAAe,EACZ,EACN,CAACd,EAAqBc,CAAM,CAAC,EAEhC,GAAI5B,KAAY,cACd,OACEzC,EAAC,OACE,GAAG8C,EACJ,IAAKe,EACL,UAAWrD,EACT,oDACA,4EACA,8FACA,uDACA,CACE,YAAa6B,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,UAAA7B,EAAC,OAAI,IAAKqE,EAAW,UAAU,uCAAuC,EAGtEpE,EAAC,OAAI,UAAU,uBACb,UAAAD,EAACkB,EAAA,CACC,SAAU0C,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAACkB,EAAA,CACC,SAAU0C,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,yBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAAC,OAAI,UAAU,+BAA+B,GAChD,EAIAC,EAAC,OACC,UAAWQ,EACT,4DACA,mBACA,2BACA,6CACA,+BACA,kBACF,EAIA,UAAAT,EAAC,OAAI,UAAU,+BACZ,SAAA2C,GACC3C,EAACY,GAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAU,oBACjC,SAAA+B,EACH,EAEJ,EAIA1C,EAAC,OACC,UAAWQ,EACT,kDACA,iDACF,EAGC,UAAAmC,GAAcA,EAAW,OAAS,GACjC5C,EAAC,OAAI,UAAU,mCACZ,SAAA4C,EAAW,IAAI,CAACkD,EAAGN,IAClBxF,EAACa,GAAA,CAAa,GAAG,IAAI,KAAM,EAAG,UAAU,sDACrC,gBAAOiF,GAAM,SAAWA,EAAIA,EAAE,MADtBN,CAEX,CACD,EACH,EAID3C,GAAWA,EAAQ,OAAS,GAC3B7C,EAAC,OAAI,UAAWS,EAAG,sCAAuC,kCAAkC,EACzF,SAAAoC,EAAQ,IAAI,CAACkD,EAAGP,IACfvF,EAAC,OAAY,UAAU,sBAErB,UAAAD,EAAC,QAAK,UAAU,oIACb,SAAA+F,EAAE,MACL,EAEA/F,EAACa,GAAA,CAAK,GAAG,OAAO,KAAM,EAAG,UAAU,+BAChC,SAAAkF,EAAE,MACL,IARQP,CASV,CACD,EACH,GAEJ,GACF,GACF,EAIJ,MAAMQ,EACJ,6NACF,OACE/F,EAAAF,GAAA,CACG,UAAAkD,GACCjD,EAAC,OACE,GAAG+C,EACJ,IAAKe,EACL,UAAWrD,EACT,oCACAuF,EACA,CACE,YAAa1D,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,SAAA7B,EAAC,OAAI,IAAKqE,EACP,UAAC5B,GACAxC,EAAC,OAAI,UAAU,yGACZ,UAAAsE,GAAc,CAACrB,GACdlD,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQuE,CAAW,EAChD,EAEDC,GAAmBtB,GAClBlD,EAAC,OACC,UAAU,sGACV,wBAAyB,CAAE,OAAQwE,CAAgB,EACrD,EAEDtC,GACClC,EAACW,GAAA,CACC,QAAQ,OACR,UAAWF,EAAG,kDAAkD,EAChE,QAAS,IAAM,CACbkD,EAAW,EAAI,EAYf5B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,EAEFjC,EAAC,OACE,GAAKgD,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQuC,EACV,EACA,CAAE,OAAQ,CAAE,EAElB,UAAWpF,EAAG,WAAYoB,CAAS,EAEnC,UAAA7B,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,GAAI6B,EACJ,UAAWrB,EAAG,2BAA4BwC,EAAS,kBAAoB+C,EAAQ,CAC7E,YAAa1D,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAClBxC,EAAC,OACC,UAAWQ,EACT,wFACAwC,EAAS,qDAAuD,cAClE,EAEC,UAAAsB,GACCvE,EAAC,OACC,IAAK+D,EACL,UAAU,kHACV,wBAAyB,CAAE,OAAQQ,CAAW,EAChD,EAEDrC,GACClC,EAACW,GAAA,CACC,IAAKuD,EACL,QAAQ,OACR,UAAWzD,EAAG,2EAA2E,EACzF,QAAS,IAAM,CACbkD,EAAW,EAAI,EACf5B,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,GAEJ,EAEFjC,EAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMuD,EAAsB,GAAG,IAAK,EAExD,UAAAxD,EAACkB,EAAA,CACC,SAAU0C,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,wCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAACkB,EAAA,CACC,SAAU0C,EACV,OAAQrB,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,0CACV,eAAe,6BACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACApC,EAAC,OACC,IAAK6D,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACCZ,GACCjD,EAAC,OACC,UAAWS,EAAGwC,GAAU,iDAAkD+C,CAAM,EAChF,MAAO/C,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWvB,GACVnC,EAACc,GAAA,CAAW,QAAS4C,EAAS,UAAWvB,EAAW,aAAc,IAAMwB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA/B,GAAgB,YAAc,kBAE9B,IAAOqE,GAAQvF,GAAWkB,EAAe",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "Heading", "Text", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "p", "m", "aspect", "MediaPlayerBase_default"]
 }

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

@@ -1,4 +1,17 @@
 import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js';
+/** Fixed shape for a single stat/metric entry in the text-layout variant. */
+export interface MediaPlayerBaseMetric {
+    value: string;
+    label: string;
+}
+/**
+ * A single paragraph item. Accepts a plain string OR the Payload CMS array item shape
+ * (`{ text: string; id?: string | null }`) to avoid a consumer-side normalization step.
+ */
+export type MediaPlayerBaseParagraph = string | {
+    text: string;
+    id?: string | null;
+};
 export interface MediaPlayerBaseProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {
     data: {
         sticky?: boolean;
@@ -13,6 +26,19 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps, React.HTMLAt
         mobileVideo?: Video;
         youtubeId?: string;
         titleAnimation?: 'fade-in' | null;
+        /**
+         * Variant selector.
+         * - Omit or set to `'default'` to preserve all existing behaviour.
+         * - Set to `'text-layout'` to activate the fixed 3-section text layout.
+         */
+        variant?: 'default' | 'text-layout';
+        /** Static headline rendered only in the `text-layout` variant. Never animated. */
+        headline?: string;
+        /** Paragraph blocks rendered only in the `text-layout` variant. */
+        /** Paragraph blocks rendered only in the `text-layout` variant. */
+        paragraphs?: MediaPlayerBaseParagraph[];
+        /** Metric items rendered only in the `text-layout` variant. Fixed shape: value + label only. */
+        metrics?: MediaPlayerBaseMetric[];
     };
     onBtnClick?: () => void;
 }

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

@@ -1,5 +1,5 @@
 import type { MediaPlayerMultiProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { MediaPlayerBaseProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & React.RefAttributes<{
     mediaPlayerStickyRef: HTMLDivElement;
-}>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+}>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts

@@ -1,6 +1,6 @@
 import type { MediaSceneSwitcherProps } from './types.js';
 import 'swiper/css';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

@@ -54,7 +54,7 @@ export interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivE
     /** 场景切换回调 */
     onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<MediaSceneSwitcherV2Props & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<MediaSceneSwitcherV2Props & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

@@ -114,7 +114,7 @@ export interface MediaShelfComponent extends React.ForwardRefExoticComponent<Med
     /** 独立的 ProductCard 组件 */
     ProductCard: typeof ProductCard;
 }
-declare const MediaShelfWrapped: React.ForwardRefExoticComponent<Omit<MediaShelfProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const MediaShelfWrapped: React.ForwardRefExoticComponent<Omit<MediaShelfProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
     ProductCard: typeof ProductCard;
 };

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { MemberEquityProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<MemberEquityProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {};
+declare const _default: React.ForwardRefExoticComponent<Omit<MemberEquityProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {};
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import*as a from"react";import{cn as o}from"../../helpers/index.js";import{Button as vt}from"../../components/index.js";import{Text as h}from"../../components/index.js";import{Heading as m}from"../../components/index.js";import wt from"./CircleProgress.js";import{useExposure as yt}from"../../hooks/useExposure.js";const Ct="cart",kt="mini_cart",W=a.forwardRef(({className:q,classNames:n={},data:G,cart:l,progressConfig:s,onRemoveItem:U,onCheckout:X,onClickToView:k,...F},O)=>{const b=a.useRef(null),{copy:c,theme:L="light",locale:Lt="us",showMobileViewMore:Y=!0}=G||{};yt(b,{componentType:Ct,componentName:kt,componentTitle:c?.itemsInCart||"Mini Cart",componentDescription:c?.description}),a.useImperativeHandle(O,()=>b.current);const Z=c?.emptyCart||"Your Cart is Empty",M=c?.description||"",_=c?.itemsInCart||"You have selected {count} items",$=c?.total||"Total {total}",Mt=c?.totalWithCoupon||"total: {total} ({subtotal})",N=c?.clickToView||"Click to view cart",J=c?.buyNowText||"Buy Now",K=c?.savingText||"Saving {amount}",d=a.useMemo(()=>l?.lineItems||[],[l?.lineItems]),S=d.reduce((e,r)=>e+(r?.quantity||0),0),Q=S===0,tt=parseFloat(l?.cost?.totalAmount?.amount||"0"),et=parseFloat(l?.cost?.subtotalAmount?.amount||"0"),ot=parseFloat(l?.cost?.savingAmount?.amount||"0"),rt=l?.cost?.totalAmount?.formattedPrice||"",I=et>tt?l?.cost?.subtotalAmount?.formattedPrice:null,P=ot>0?l?.cost?.savingAmount?.formattedPrice:null,p=a.useRef(null),[v,nt]=a.useState(!1),[z,T]=a.useState(!1),[A,B]=a.useState(null),D=async e=>{if(!A){B(e);try{await U?.(e,l)}finally{B(null)}}},[j,w]=a.useState(!1),[at,it]=a.useState(0),[lt,st]=a.useState(0),[R,ct]=a.useState(!1),[E,pt]=a.useState(!0),f=a.useCallback(()=>{const e=p.current;if(!e)return;const{scrollLeft:r,scrollWidth:u,clientWidth:x}=e;ct(r>0),pt(r<u-x-1)},[]),dt=a.useCallback(()=>{f()},[f]);a.useEffect(()=>{f()},[d.length,f]);const ut=e=>{p.current&&(w(!0),it(e.pageX-p.current.offsetLeft),st(p.current.scrollLeft))},mt=e=>{if(!j||!p.current)return;e.preventDefault();const u=(e.pageX-p.current.offsetLeft-at)*1.5;p.current.scrollLeft=lt-u},gt=()=>{w(!1)},ft=()=>{w(!1)},H=e=>{if(p.current){const r=p.current,u=100;r.scrollBy({left:e==="right"?u:-u,behavior:"smooth"})}},y=({className:e})=>t("svg",{className:e,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 4L10 8L6 12",stroke:"currentColor",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"})}),xt=({className:e})=>t("svg",{className:e,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}),ht=e=>d.length?i("div",{className:o("laptop:bg-container-secondary-0 flex gap-1 rounded-lg p-1",n?.itemsGrid),children:[d.length>=5&&t("button",{onClick:()=>H("left"),className:o("border-border laptop:flex hover:bg-muted-foreground/10 hidden w-[32px] shrink-0 items-center justify-center rounded-lg px-2 transition-colors",!R&&"laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-ml-1 laptop:py-1 laptop:pl-1 laptop:rounded-r-none",n?.expandButton,{"laptop:bg-container-secondary-0":e==="dark","laptop:bg-container-primary":e==="dark"&&!R}),"aria-label":"Scroll left to see more items",children:t(y,{className:"laptop:size-4 size-5 rotate-180"})}),i("div",{ref:p,onMouseDown:ut,onMouseMove:mt,onMouseUp:gt,onMouseLeave:ft,onScroll:dt,className:o("scrollbar-hide laptop:gap-1 laptop:w-[256px] laptop:shrink-0 flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",j?"cursor-grabbing":"cursor-grab",n?.itemGridContainer),children:[d.filter(r=>r&&r.id).map(r=>{const x=(r.merchandise||{}).image||{},V=x.url,bt=x.altText||"Product image",C=A===r.id;return i("div",{className:o("laptop:size-12 group relative size-16 shrink-0",n?.gridItem),children:[V&&t("img",{src:V,alt:bt,draggable:!1,className:"pointer-events-none size-full select-none rounded-lg object-cover"}),C&&t("div",{className:"absolute inset-0 flex items-center justify-center rounded-lg bg-black/50",children:i("svg",{width:"20",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"animate-spin text-white",children:[t("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2",opacity:"0.3"}),t("path",{d:"M14 8a6 6 0 0 0-6-6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}),t("span",{role:"button",onClick:()=>D(r.id),className:o("laptop:hidden absolute right-[2px] top-[2px] cursor-pointer",C&&"pointer-events-none opacity-0"),"aria-label":"delete",children:i("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"pointer-events-none",children:[t("rect",{x:"1.33301",y:"1.33301",width:"13.3333",height:"13.3333",rx:"6.66667",fill:"white"}),t("path",{d:"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z",fill:"#767880"})]})}),r.productLabel&&t("div",{className:"absolute inset-x-0 bottom-0 flex items-center justify-center",children:t("div",{className:"relative flex w-full items-center justify-center rounded-b-lg  px-1 py-px backdrop-blur-sm",style:{backgroundColor:"rgba(251, 148, 63, 0.60)"},children:t(h,{size:1,className:"relative text-center text-white",html:r.productLabel})})}),r.quantity>1&&!r.productLabel&&t("div",{className:"mini-cart-quantity bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex size-4  items-center justify-center rounded-full text-white",children:t(h,{className:"text-sm",html:String(r.quantity)})}),t("div",{role:"button",onClick:()=>D(r.id),className:o("absolute inset-0 hidden cursor-pointer items-center justify-center rounded-lg bg-black/60 transition-opacity","laptop:flex laptop:opacity-0 laptop:group-hover:opacity-100",C&&"laptop:hidden",n?.gridItemOverlay),"aria-label":"Remove item",children:t(xt,{className:"pointer-events-none size-[20px] text-white"})})]},r.id)}),Y&&t("button",{onClick:()=>k?.(l),className:o("bg-container-secondary-0 laptop:hidden flex size-16 shrink-0 items-center justify-center rounded-md",n?.mobileViewMoreButton),"aria-label":N,children:t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-quaternary",children:t("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),d.length>=5&&t("button",{onClick:()=>H("right"),className:o("border-border laptop:flex hover:bg-muted-foreground/10 hidden w-[32px] shrink-0 items-center justify-center rounded-lg px-2 transition-colors",!E&&"laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-mr-1 laptop:py-1 laptop:pr-1 laptop:rounded-l-none",n?.expandButton,{"laptop:bg-container-secondary-0":e==="dark","laptop:bg-container-primary":e==="dark"&&!E}),"aria-label":"Scroll right to see more items",children:t(y,{className:"laptop:size-4 size-5"})})]}):null,g=!Q&&d.length>0;return t("div",{ref:b,className:o("bg-container-secondary-1 text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]","flex-col items-stretch gap-3","laptop:flex-row laptop:items-center laptop:justify-around","laptop:items-center laptop:gap-4","tablet:gap-6 laptop:gap-8",q,n?.root,{"aiui-dark bg-container-primary":L==="dark"}),...F,children:i("div",{className:o("laptop:flex-row flex w-full flex-col gap-4","laptop:flex-1 laptop:items-center laptop:justify-between","tablet:gap-6 laptop:gap-8",n?.content),children:[i("div",{className:o("relative flex shrink flex-row items-center gap-2","desktop:gap-4",s&&"laptop:pl-[104px] pl-[72px]"),children:[s&&t(wt,{totalSteps:s.totalSteps,currentStep:s.currentStep,image:s.image,label:s.label,progressColor:s.progressColor,labelColor:s.labelColor,backgroundColor:s.backgroundColor,size:s.size,laptopSize:s.laptopSize,className:o("absolute bottom-0 left-0","lg-desktop:bottom-auto lg-desktop:top-[-46px] desktop:bottom-auto desktop:top-[-52px]",n?.circleProgress)}),i("div",{className:"laptop:flex-1 flex w-full flex-col",children:[t("div",{className:o("tablet:gap-2 flex flex-col gap-1",n?.cartInfo),children:g?i("div",{className:"flex w-full items-center gap-2",children:[t(m,{size:2,as:"h3",className:o("",n?.cartTitle),html:_.replace("{count}",`<span class="text-brand-0">${S||0}</span>`)}),i(m,{size:1,as:"h5",onClick:()=>{window.innerWidth<1025?nt(!v):k?.(l)},className:o("flex cursor-pointer items-center gap-1",n?.expandButton),children:[t(h,{as:"span",size:1,className:"desktop:block hidden text-nowrap text-[16px] ",html:N}),t(y,{className:o("size-4 transition-transform",v?"laptop:rotate-0 -rotate-90":"laptop:rotate-0 rotate-90")})]})]}):t(m,{as:"h3",size:2,className:o("tablet:text-2xl text-xl font-semibold",n?.cartTitle),html:Z})}),M&&t(h,{size:2,className:o("mini-cart-description text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",n?.cartDescription),html:M})]})]}),g&&t("div",{className:o("laptop:block laptop:shrink",v?"block":"hidden"),children:ht(L)}),g&&t("hr",{className:"laptop:hidden border-lines w-full border-t"}),i("div",{className:o("tablet:gap-6 laptop:gap-4 laptop:justify-end flex flex-row items-stretch justify-between gap-4",n?.priceSection),children:[i("div",{className:"flex flex-col items-end justify-center",children:[i("div",{className:"flex items-center gap-2",children:[t(m,{as:"h6",size:2,className:o("whitespace-nowrap text-nowrap",n?.totalPrice),html:$.replace("{total}",rt)}),I&&t(m,{as:"h6",size:2,className:o("text-info-tertiary  whitespace-nowrap line-through",n?.originalPrice),html:I})]}),P&&t(m,{size:2,as:"h6",className:o("laptop:text-right text-marketing-1 w-full whitespace-nowrap text-nowrap text-left",n?.saveAmount),html:K.replace("{amount}",P)})]}),t(vt,{disabled:!g,loading:z,onClick:async()=>{if(!z){T(!0);try{await X?.(l)}finally{T(!1)}}},className:o("whitespace-nowrap",n?.actionButton),children:J})]})]})})});W.displayName="MiniCart";var At=W;export{At as default};
+"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import*as a from"react";import{cn as o}from"../../helpers/index.js";import{Button as vt}from"../../components/index.js";import{Text as h}from"../../components/index.js";import{Heading as m}from"../../components/index.js";import wt from"./CircleProgress.js";import{useExposure as yt}from"../../hooks/useExposure.js";const Ct="cart",kt="mini_cart",W=a.forwardRef(({className:q,classNames:n={},data:G,cart:l,progressConfig:s,onRemoveItem:U,onCheckout:X,onClickToView:k,...F},O)=>{const b=a.useRef(null),{copy:c,theme:L="light",locale:Lt="us",showMobileViewMore:Y=!0}=G||{};yt(b,{componentType:Ct,componentName:kt,componentTitle:c?.itemsInCart||"Mini Cart",componentDescription:c?.description}),a.useImperativeHandle(O,()=>b.current);const Z=c?.emptyCart||"Your Cart is Empty",M=c?.description||"",_=c?.itemsInCart||"You have selected {count} items",$=c?.total||"Total {total}",Mt=c?.totalWithCoupon||"total: {total} ({subtotal})",N=c?.clickToView||"Click to view cart",J=c?.buyNowText||"Buy Now",K=c?.savingText||"Saving {amount}",d=a.useMemo(()=>l?.lineItems||[],[l?.lineItems]),S=d.reduce((e,r)=>e+(r?.quantity||0),0),Q=S===0,tt=parseFloat(l?.cost?.totalAmount?.amount||"0"),et=parseFloat(l?.cost?.subtotalAmount?.amount||"0"),ot=parseFloat(l?.cost?.savingAmount?.amount||"0"),rt=l?.cost?.totalAmount?.formattedPrice||"",I=et>tt?l?.cost?.subtotalAmount?.formattedPrice:null,P=ot>0?l?.cost?.savingAmount?.formattedPrice:null,p=a.useRef(null),[v,nt]=a.useState(!1),[z,T]=a.useState(!1),[A,B]=a.useState(null),D=async e=>{if(!A){B(e);try{await U?.(e,l)}finally{B(null)}}},[j,w]=a.useState(!1),[at,it]=a.useState(0),[lt,st]=a.useState(0),[R,ct]=a.useState(!1),[E,pt]=a.useState(!0),f=a.useCallback(()=>{const e=p.current;if(!e)return;const{scrollLeft:r,scrollWidth:u,clientWidth:x}=e;ct(r>0),pt(r<u-x-1)},[]),dt=a.useCallback(()=>{f()},[f]);a.useEffect(()=>{f()},[d.length,f]);const ut=e=>{p.current&&(w(!0),it(e.pageX-p.current.offsetLeft),st(p.current.scrollLeft))},mt=e=>{if(!j||!p.current)return;e.preventDefault();const u=(e.pageX-p.current.offsetLeft-at)*1.5;p.current.scrollLeft=lt-u},gt=()=>{w(!1)},ft=()=>{w(!1)},H=e=>{if(p.current){const r=p.current,u=100;r.scrollBy({left:e==="right"?u:-u,behavior:"smooth"})}},y=({className:e})=>t("svg",{className:e,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 4L10 8L6 12",stroke:"currentColor",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"})}),xt=({className:e})=>t("svg",{className:e,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}),ht=e=>d.length?i("div",{className:o("laptop:bg-container-secondary-0 rounded-box-small flex gap-1 p-1",n?.itemsGrid),children:[d.length>=5&&t("button",{onClick:()=>H("left"),className:o("border-border laptop:flex hover:bg-muted-foreground/10 rounded-box-small hidden w-[32px] shrink-0 items-center justify-center px-2 transition-colors",!R&&"laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-ml-1 laptop:py-1 laptop:pl-1 laptop:rounded-r-none",n?.expandButton,{"laptop:bg-container-secondary-0":e==="dark","laptop:bg-container-primary":e==="dark"&&!R}),"aria-label":"Scroll left to see more items",children:t(y,{className:"laptop:size-4 size-5 rotate-180"})}),i("div",{ref:p,onMouseDown:ut,onMouseMove:mt,onMouseUp:gt,onMouseLeave:ft,onScroll:dt,className:o("scrollbar-hide laptop:gap-1 laptop:w-[256px] laptop:shrink-0 flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",j?"cursor-grabbing":"cursor-grab",n?.itemGridContainer),children:[d.filter(r=>r&&r.id).map(r=>{const x=(r.merchandise||{}).image||{},V=x.url,bt=x.altText||"Product image",C=A===r.id;return i("div",{className:o("laptop:size-12 bg-container-primary laptop:bg-white rounded-box-small group relative size-16 shrink-0 overflow-hidden",n?.gridItem),children:[V&&t("img",{src:V,alt:bt,draggable:!1,className:"rounded-box-small pointer-events-none size-full select-none object-cover"}),C&&t("div",{className:"rounded-box-small absolute inset-0 flex items-center justify-center bg-black/50",children:i("svg",{width:"20",height:"20",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"animate-spin text-white",children:[t("circle",{cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2",opacity:"0.3"}),t("path",{d:"M14 8a6 6 0 0 0-6-6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}),t("span",{role:"button",onClick:()=>D(r.id),className:o("laptop:hidden absolute right-[2px] top-[2px] cursor-pointer",C&&"pointer-events-none opacity-0"),"aria-label":"delete",children:i("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"pointer-events-none",children:[t("rect",{x:"1.33301",y:"1.33301",width:"13.3333",height:"13.3333",rx:"6.66667",fill:"white"}),t("path",{d:"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z",fill:"#767880"})]})}),r.productLabel&&t("div",{className:"absolute inset-x-0 bottom-0 flex items-center justify-center",children:t("div",{className:"relative flex w-full items-center justify-center rounded-b-lg  px-1 py-px backdrop-blur-sm",style:{backgroundColor:"rgba(251, 148, 63, 0.60)"},children:t(h,{size:1,className:"relative text-center text-white",html:r.productLabel})})}),r.quantity>1&&!r.productLabel&&t("div",{className:"mini-cart-quantity bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex size-4  items-center justify-center rounded-full text-white",children:t(h,{className:"text-sm",html:String(r.quantity)})}),t("div",{role:"button",onClick:()=>D(r.id),className:o("rounded-box-small absolute inset-0 hidden cursor-pointer items-center justify-center bg-black/60 transition-opacity","laptop:flex laptop:opacity-0 laptop:group-hover:opacity-100",C&&"laptop:hidden",n?.gridItemOverlay),"aria-label":"Remove item",children:t(xt,{className:"pointer-events-none size-[20px] text-white"})})]},r.id)}),Y&&t("button",{onClick:()=>k?.(l),className:o("bg-container-secondary-0 laptop:hidden flex size-16 shrink-0 items-center justify-center rounded-md",n?.mobileViewMoreButton),"aria-label":N,children:t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-quaternary",children:t("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),d.length>=5&&t("button",{onClick:()=>H("right"),className:o("border-border laptop:flex hover:bg-muted-foreground/10 rounded-box-small hidden w-[32px] shrink-0 items-center justify-center px-2 transition-colors",!E&&"laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-mr-1 laptop:py-1 laptop:pr-1 laptop:rounded-l-none",n?.expandButton,{"laptop:bg-container-secondary-0":e==="dark","laptop:bg-container-primary":e==="dark"&&!E}),"aria-label":"Scroll right to see more items",children:t(y,{className:"laptop:size-4 size-5"})})]}):null,g=!Q&&d.length>0;return t("div",{ref:b,className:o("bg-container-secondary-1 text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]","flex-col items-stretch gap-3","laptop:flex-row laptop:items-center laptop:justify-around","laptop:items-center laptop:gap-4","tablet:gap-6 laptop:gap-8",q,n?.root,{"aiui-dark bg-container-primary":L==="dark"}),...F,children:i("div",{className:o("laptop:flex-row flex w-full flex-col gap-4","laptop:flex-1 laptop:items-center laptop:justify-between","tablet:gap-6 laptop:gap-8",n?.content),children:[i("div",{className:o("relative flex shrink flex-row items-center gap-2","desktop:gap-4",s&&"laptop:pl-[104px] pl-[72px]"),children:[s&&t(wt,{totalSteps:s.totalSteps,currentStep:s.currentStep,image:s.image,label:s.label,progressColor:s.progressColor,labelColor:s.labelColor,backgroundColor:s.backgroundColor,size:s.size,laptopSize:s.laptopSize,className:o("absolute bottom-0 left-0","lg-desktop:bottom-auto lg-desktop:top-[-46px] desktop:bottom-auto desktop:top-[-52px]",n?.circleProgress)}),i("div",{className:"laptop:flex-1 flex w-full flex-col",children:[t("div",{className:o("tablet:gap-2 flex flex-col gap-1",n?.cartInfo),children:g?i("div",{className:"flex w-full items-center gap-2",children:[t(m,{size:2,as:"h3",className:o("",n?.cartTitle),html:_.replace("{count}",`<span class="text-brand-0">${S||0}</span>`)}),i(m,{size:1,as:"h5",onClick:()=>{window.innerWidth<1025?nt(!v):k?.(l)},className:o("flex cursor-pointer items-center gap-1",n?.expandButton),children:[t(h,{as:"span",size:1,className:"desktop:block hidden text-nowrap text-[16px] ",html:N}),t(y,{className:o("size-4 transition-transform",v?"laptop:rotate-0 -rotate-90":"laptop:rotate-0 rotate-90")})]})]}):t(m,{as:"h3",size:2,className:o("tablet:text-2xl text-xl",n?.cartTitle),html:Z})}),M&&t(h,{size:2,className:o("mini-cart-description text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",n?.cartDescription),html:M})]})]}),g&&t("div",{className:o("laptop:block laptop:shrink",v?"block":"hidden"),children:ht(L)}),g&&t("hr",{className:"laptop:hidden border-lines w-full border-t"}),i("div",{className:o("tablet:gap-6 laptop:gap-4 laptop:justify-end flex flex-row items-stretch justify-between gap-4",n?.priceSection),children:[i("div",{className:"flex flex-col items-end justify-center",children:[i("div",{className:"flex items-center gap-2",children:[t(m,{as:"h6",size:2,className:o("whitespace-nowrap text-nowrap",n?.totalPrice),html:$.replace("{total}",rt)}),I&&t(m,{as:"h6",size:2,className:o("text-info-tertiary  whitespace-nowrap line-through",n?.originalPrice),html:I})]}),P&&t(m,{size:2,as:"h6",className:o("laptop:text-right text-marketing-1 w-full whitespace-nowrap text-nowrap text-left",n?.saveAmount),html:K.replace("{amount}",P)})]}),t(vt,{disabled:!g,loading:z,onClick:async()=>{if(!z){T(!0);try{await X?.(l)}finally{T(!1)}}},className:o("whitespace-nowrap",n?.actionButton),children:J})]})]})})});W.displayName="MiniCart";var At=W;export{At as default};
 //# sourceMappingURL=index.js.map