@anker-in/headless-ui 1.1.99 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
  2. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
  3. package/dist/cjs/biz-components/Faq/Faq.js +1 -1
  4. package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
  5. package/dist/cjs/biz-components/Faq/types.d.ts +1 -0
  6. package/dist/cjs/biz-components/Faq/types.js +1 -1
  7. package/dist/cjs/biz-components/Faq/types.js.map +1 -1
  8. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  9. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
  10. package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.d.ts +6 -6
  11. package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js +1 -1
  12. package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js.map +3 -3
  13. package/dist/cjs/biz-components/SceneShelfV2/index.js +1 -1
  14. package/dist/cjs/biz-components/SceneShelfV2/index.js.map +2 -2
  15. package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
  16. package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
  17. package/dist/esm/biz-components/Faq/Faq.js +1 -1
  18. package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
  19. package/dist/esm/biz-components/Faq/types.d.ts +1 -0
  20. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  21. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
  22. package/dist/esm/biz-components/MediaSceneSwitcherV2/index.d.ts +6 -6
  23. package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js +1 -1
  24. package/dist/esm/biz-components/MediaSceneSwitcherV2/index.js.map +3 -3
  25. package/dist/esm/biz-components/SceneShelfV2/index.js +1 -1
  26. package/dist/esm/biz-components/SceneShelfV2/index.js.map +2 -2
  27. package/package.json +1 -1
  28. package/style.css +0 -3
package/dist/cjs/biz-components/BrandEquity/BrandEquity.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var P=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},g=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of L(t))!A.call(e,s)&&s!==i&&d(e,s,{get:()=>t[s],enumerable:!(a=T(t,s))||a.enumerable});return e};var k=(e,t,i)=>(i=e!=null?P(z(e)):{},g(t||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>g(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var r=require("react/jsx-runtime"),o=require("react"),l=require("../../helpers/utils.js"),f=k(require("../../components/picture.js")),w=require("../../shared/Styles.js"),q=require("react-responsive"),E=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),S=k(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,t)=>{const i=[];for(let a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i},h=(0,o.forwardRef)(({data:{items:e=[],itemShape:t,title:i,theme:a},className:s},M)=>{const[y,B]=(0,o.useState)(!1),x=(0,q.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,o.useRef)(null),u=(0,o.useRef)(null);(0,o.useImperativeHandle)(M,()=>u.current),(0,E.useExposure)(u,{componentType:R,componentName:Q}),(0,o.useEffect)(()=>{B(x)},[x]);const I=y?$(e,3):e;return(0,r.jsxs)("div",{ref:u,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},s),children:[i&&(0,r.jsx)(S.default,{data:{title:i}}),y?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(s),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:v.current},breakpoints:{0:{spaceBetween:12}},children:[I?.map((n,m)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((j,b)=>(0,r.jsx)(N,{data:j,itemShape:t,index:b},b))},"SwiperSlide"+m)),(0,r.jsx)("div",{ref:v,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,m)=>(0,r.jsx)(N,{data:n,itemShape:t,index:m},m))})]})}),N=({data:e,itemShape:t,index:i})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-primary box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"aiui-dark":e.theme==="dark"},t==="round"?"rounded-box":"rounded-none",e.className),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((a,s)=>(0,r.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,r.jsx)(f.default,{source:a.avatar?.url,alt:a.avatar?.alt,className:"size-full object-cover"})},s))}):(0,r.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,r.jsx)(f.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});h.displayName="BrandEquity";var C=(0,w.withLayout)(h);
1
+ "use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},k=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!A.call(e,o)&&o!==i&&d(e,o,{get:()=>t[o],enumerable:!(a=P(t,o))||a.enumerable});return e};var h=(e,t,i)=>(i=e!=null?j(z(e)):{},k(t||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>k(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var r=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=h(require("../../components/picture.js")),q=require("../../shared/Styles.js"),E=require("react-responsive"),S=require("../../hooks/useExposure.js"),c=require("swiper/react"),n=require("swiper/modules"),M=h(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,t)=>{const i=[];for(let a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i},N=(0,s.forwardRef)(({data:{items:e=[],itemShape:t,title:i,theme:a},className:o},u)=>{const[x,B]=(0,s.useState)(!1),v=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,S.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{B(v)},[v]);const T=x?$(e,3):e;return(0,r.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},o),children:[i&&(0,r.jsx)(M.default,{data:{title:i}}),x?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[n.FreeMode,n.Mousewheel,n.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[T?.map((p,m)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((I,g)=>(0,r.jsx)(w,{data:I,itemShape:t,index:g,theme:a},g))},"SwiperSlide"+m)),(0,r.jsx)("div",{ref:b,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((p,m)=>(0,r.jsx)(w,{data:p,itemShape:t,index:m,theme:a},m))})]})}),w=({data:e,itemShape:t,index:i,theme:a})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"bg-container-primary":a==="dark"},t==="round"?"rounded-box":"rounded-none",e.className),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,r.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,r.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,r.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,r.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});N.displayName="BrandEquity";var C=(0,q.withLayout)(N);
2
2
  //# sourceMappingURL=BrandEquity.js.map
package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
4
- "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-primary box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'aiui-dark': data.theme === 'dark',\n },\n itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img, Theme } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n ({ data: { items = [], itemShape, title, theme }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', { 'aiui-dark': theme === 'dark' }, className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n ))}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nconst BrandEquityItem = ({\n data,\n itemShape,\n index,\n theme,\n}: {\n data: BrandEquityItemProps\n itemShape?: 'round' | 'square'\n index: number\n theme?: Theme\n}) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n `brand-equity-item-${index + 1}`,\n data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n 'bg-container-secondary-1 box-border flex w-full flex-col p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n 'bg-container-primary': theme === 'dark',\n },\n itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n data.className\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex shrink-0 -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n 'relative inline-block shrink-0',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n <Picture\n className=\"size-full object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nBrandEquity.displayName = 'BrandEquity'\n\nexport default withLayout(BrandEquity)\n"],
5
+ "mappings": "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",
6
6
  "names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "title", "theme", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "Title", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
7
7
  }
package/dist/cjs/biz-components/Faq/Faq.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var x=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var w=(t,a)=>{for(var e in a)m(t,e,{get:a[e],enumerable:!0})},f=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of b(a))!q.call(t,r)&&r!==e&&m(t,r,{get:()=>a[r],enumerable:!(o=h(a,r))||o.enumerable});return t};var N=(t,a,e)=>(e=t!=null?x(F(t)):{},f(a||!t||!t.__esModule?m(e,"default",{value:t,enumerable:!0}):e,t)),C=t=>f(m({},"__esModule",{value:!0}),t);var k={};w(k,{FaqItem:()=>l,default:()=>L});module.exports=C(k);var i=require("react/jsx-runtime"),s=N(require("react")),p=require("../../components/index.js"),n=require("../../helpers/index.js"),u=require("../../shared/Styles.js");const v=s.default.forwardRef(({data:t,className:a,defaultOpenIndex:e,classNames:o={}},r)=>{const d=(0,s.useRef)(null);(0,s.useImperativeHandle)(r,()=>d.current);const y=Array.isArray(e)?e:e!==void 0?[e]:[];return(0,i.jsx)("div",{ref:d,className:(0,n.cn)(a,o.root),children:(0,i.jsx)("div",{children:t?.productData?.map((g,c)=>(0,i.jsx)(l,{data:g,defaultOpen:y.includes(c),classNames:o},c))})})});v.displayName="Faq";const l=({data:t,defaultOpen:a=!1,classNames:e={}})=>{const[o,r]=(0,s.useState)(a),d=()=>{r(!o)};return(0,i.jsx)("div",{className:(0,n.cn)("tablet:py-6 border-b border-[#E4E5E6] py-4",e.item),children:(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{onClick:d,className:(0,n.cn)("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",e.itemHeader),children:[(0,i.jsx)(p.Heading,{as:"h3",html:t?.title,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",e.title)}),(0,i.jsx)("div",{className:(0,n.cn)("transition-transform duration-300",e.icon),children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,n.cn)("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,i.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,i.jsx)("div",{className:(0,n.cn)("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",e.content),children:(0,i.jsx)(p.Text,{html:t?.richDesc??t?.desc,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",e.description)})})]})})};l.displayName="FaqItem";var L=(0,u.withLayout)(v);
1
+ "use strict";"use client";var x=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var w=(t,a)=>{for(var e in a)d(t,e,{get:a[e],enumerable:!0})},f=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of b(a))!q.call(t,r)&&r!==e&&d(t,r,{get:()=>a[r],enumerable:!(o=h(a,r))||o.enumerable});return t};var N=(t,a,e)=>(e=t!=null?x(F(t)):{},f(a||!t||!t.__esModule?d(e,"default",{value:t,enumerable:!0}):e,t)),C=t=>f(d({},"__esModule",{value:!0}),t);var k={};w(k,{FaqItem:()=>l,default:()=>L});module.exports=C(k);var i=require("react/jsx-runtime"),s=N(require("react")),p=require("../../components/index.js"),n=require("../../helpers/index.js"),u=require("../../shared/Styles.js");const v=s.default.forwardRef(({data:t,className:a,defaultOpenIndex:e,classNames:o={}},r)=>{const m=(0,s.useRef)(null);(0,s.useImperativeHandle)(r,()=>m.current);const y=Array.isArray(e)?e:e!==void 0?[e]:t?.openFirst??!0?[0]:[];return(0,i.jsx)("div",{ref:m,className:(0,n.cn)(a,o.root),children:(0,i.jsx)("div",{children:t?.productData?.map((g,c)=>(0,i.jsx)(l,{data:g,defaultOpen:y.includes(c),classNames:o},c))})})});v.displayName="Faq";const l=({data:t,defaultOpen:a=!1,classNames:e={}})=>{const[o,r]=(0,s.useState)(a),m=()=>{r(!o)};return(0,i.jsx)("div",{className:(0,n.cn)("tablet:py-6 border-b border-[#E4E5E6] py-4",e.item),children:(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{onClick:m,className:(0,n.cn)("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",e.itemHeader),children:[(0,i.jsx)(p.Heading,{as:"h3",html:t?.title,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",e.title)}),(0,i.jsx)("div",{className:(0,n.cn)("transition-transform duration-300",e.icon),children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,n.cn)("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,i.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,i.jsx)("div",{className:(0,n.cn)("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",e.content),children:(0,i.jsx)(p.Text,{html:t?.richDesc??t?.desc,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",e.description)})})]})})};l.displayName="FaqItem";var L=(0,u.withLayout)(v);
2
2
  //# sourceMappingURL=Faq.js.map
package/dist/cjs/biz-components/Faq/Faq.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAuBY,IAAAK,EAAA,6BAtBZC,EAA6D,oBAE7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAChB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBD,EAAK,IAAMC,EAAS,OAAQ,EAGhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EACjB,CAAC,EAEP,SACE,OAAC,OAAI,IAAKG,EAAU,aAAW,MAAGJ,EAAWE,EAAW,IAAI,EAC1D,mBAAC,OACE,SAAAH,GAAM,aAAa,IAAI,CAACO,EAAWC,OAClC,OAAClB,EAAA,CAAoB,KAAMiB,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAV,EAAI,YAAc,MAQlB,MAAMR,EAAU,CAAC,CAAE,KAAAU,EAAM,YAAAS,EAAc,GAAO,WAAAN,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACO,EAAMC,CAAO,KAAI,YAASF,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,SACE,OAAC,OAAI,aAAW,MAAG,6CAA8CP,EAAW,IAAI,EAC9E,oBAAC,OACC,qBAAC,OACC,QAASS,EACT,aAAW,MACT,4EACAT,EAAW,UACb,EAEA,oBAAC,WACC,GAAG,KACH,KAAMH,GAAM,MACZ,aAAW,MACT,yFACAG,EAAW,KACb,EACF,KACA,OAAC,OAAI,aAAW,MAAG,oCAAqCA,EAAW,IAAI,EACrE,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CO,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,6DACAA,EAAO,iCAAmC,oBAC1CP,EAAW,OACb,EAEA,mBAAC,QACC,KAAMH,GAAM,UAAYA,GAAM,KAC9B,aAAW,MACT,8HACAG,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAb,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : (data?.openFirst ?? true)\n ? [0]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-secondary [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAwBY,IAAAK,EAAA,6BAvBZC,EAA6D,oBAE7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAChB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBD,EAAK,IAAMC,EAAS,OAAQ,EAEhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EAChBF,GAAM,WAAa,GAClB,CAAC,CAAC,EACF,CAAC,EAET,SACE,OAAC,OAAI,IAAKK,EAAU,aAAW,MAAGJ,EAAWE,EAAW,IAAI,EAC1D,mBAAC,OACE,SAAAH,GAAM,aAAa,IAAI,CAACO,EAAWC,OAClC,OAAClB,EAAA,CAAoB,KAAMiB,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAV,EAAI,YAAc,MAQlB,MAAMR,EAAU,CAAC,CAAE,KAAAU,EAAM,YAAAS,EAAc,GAAO,WAAAN,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACO,EAAMC,CAAO,KAAI,YAASF,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,SACE,OAAC,OAAI,aAAW,MAAG,6CAA8CP,EAAW,IAAI,EAC9E,oBAAC,OACC,qBAAC,OACC,QAASS,EACT,aAAW,MACT,4EACAT,EAAW,UACb,EAEA,oBAAC,WACC,GAAG,KACH,KAAMH,GAAM,MACZ,aAAW,MACT,yFACAG,EAAW,KACb,EACF,KACA,OAAC,OAAI,aAAW,MAAG,oCAAqCA,EAAW,IAAI,EACrE,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CO,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,6DACAA,EAAO,iCAAmC,oBAC1CP,EAAW,OACb,EAEA,mBAAC,QACC,KAAMH,GAAM,UAAYA,GAAM,KAC9B,aAAW,MACT,8HACAG,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAb,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
6
6
  "names": ["Faq_exports", "__export", "FaqItem", "Faq_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "Faq", "React", "data", "className", "defaultOpenIndex", "classNames", "ref", "innerRef", "openIndexes", "item", "index", "defaultOpen", "open", "setOpen", "handleToggle"]
7
7
  }
package/dist/cjs/biz-components/Faq/types.d.ts CHANGED
@@ -10,6 +10,7 @@ export type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon'
10
10
  export interface FaqProps {
11
11
  data: {
12
12
  productData: FaqItem[];
13
+ openFirst?: boolean;
13
14
  };
14
15
  className?: string;
15
16
  /** 默认展开的 item 索引，可以是单个数字或数字数组 */
package/dist/cjs/biz-components/Faq/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var o=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of m(e))!c.call(t,a)&&a!==n&&i(t,a,{get:()=>e[a],enumerable:!(r=s(e,a))||r.enumerable});return t};var p=t=>o(i({},"__esModule",{value:!0}),t);var d={};module.exports=p(d);
1
+ "use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of o(e))!m.call(t,a)&&a!==n&&i(t,a,{get:()=>e[a],enumerable:!(r=s(e,a))||r.enumerable});return t};var p=t=>c(i({},"__esModule",{value:!0}),t);var d={};module.exports=p(d);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/Faq/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/types.ts"],
4
- "sourcesContent": ["import type { Media } from '../../types/props.js'\n\nexport interface FaqItem {\n title: string\n desc: string\n richDesc: string\n img: Media\n}\n\n/** Faq \u7EC4\u4EF6\u8BED\u4E49\u5316\u6837\u5F0F\u540D\u79F0 */\nexport type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon' | 'content' | 'description'\n\nexport interface FaqProps {\n data: {\n productData: FaqItem[]\n }\n className?: string\n /** \u9ED8\u8BA4\u5C55\u5F00\u7684 item \u7D22\u5F15\uFF0C\u53EF\u4EE5\u662F\u5355\u4E2A\u6570\u5B57\u6216\u6570\u5B57\u6570\u7EC4 */\n defaultOpenIndex?: number | number[]\n /** \u8BED\u4E49\u5316\u6837\u5F0F\u900F\u4F20 */\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n"],
4
+ "sourcesContent": ["import type { Media } from '../../types/props.js'\n\nexport interface FaqItem {\n title: string\n desc: string\n richDesc: string\n img: Media\n}\n\n/** Faq \u7EC4\u4EF6\u8BED\u4E49\u5316\u6837\u5F0F\u540D\u79F0 */\nexport type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon' | 'content' | 'description'\n\nexport interface FaqProps {\n data: {\n productData: FaqItem[]\n openFirst?: boolean\n }\n className?: string\n /** \u9ED8\u8BA4\u5C55\u5F00\u7684 item \u7D22\u5F15\uFF0C\u53EF\u4EE5\u662F\u5355\u4E2A\u6570\u5B57\u6216\u6570\u5B57\u6570\u7EC4 */\n defaultOpenIndex?: number | number[]\n /** \u8BED\u4E49\u5316\u6837\u5F0F\u900F\u4F20 */\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Me=Object.create;var R=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Pe=(o,s)=>{for(var l in s)R(o,l,{get:s[l],enumerable:!0})},ae=(o,s,l,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of Re(s))!Ee.call(o,n)&&n!==l&&R(o,n,{get:()=>s[n],enumerable:!(d=Le(s,n))||d.enumerable});return o};var re=(o,s,l)=>(l=o!=null?Me(Ie(o)):{},ae(s||!o||!o.__esModule?R(l,"default",{value:o,enumerable:!0}):l,o)),Se=o=>ae(R({},"__esModule",{value:!0}),o);var Ce={};Pe(Ce,{default:()=>Be});module.exports=Se(Ce);var e=require("react/jsx-runtime"),t=require("react"),ce=require("lodash"),r=require("../../helpers/utils.js"),pe=require("../../shared/Styles.js"),q=re(require("../../components/button.js")),w=require("../../components/index.js"),de=require("../VideoModal/index.js"),U=require("@payloadcms/richtext-lexical/html"),ue=require("react-intersection-observer"),me=require("../../hooks/useExposure.js"),h=re(require("../../helpers/ScrollLoadVideo.js")),f=require("gsap"),Y=require("gsap/dist/SplitText"),I=require("gsap/dist/ScrollTrigger");const _e="media_player_base",$e="video";f.gsap.registerPlugin(I.ScrollTrigger,Y.SplitText);const ne=({defaultConverters:o})=>({...o,text:s=>{const{node:l}=s;return l.$&&l.$.color?`<span class="lexical-${l.$.color}">${l.text}</span>`:l.text}}),ie=(0,t.forwardRef)(({className:o="",id:s,onBtnClick:l,data:{title:d,videoTitle:n,btnText:k,youtubeId:O,video:N,mobileVideo:G,theme:E,img:H,shape:P,titleAnimation:T="fade-in",variant:fe,headline:J,paragraphs:S,metrics:_,...ge},...$},xe)=>{const{sticky:p}=ge,[K,Q]=(0,t.useState)(!1),[W,ve]=(0,t.useState)(0),[ye,be]=(0,t.useState)(0),[z,he]=(0,t.useState)(0),[X,B]=(0,t.useState)(!1),g=(0,t.useRef)(null),Z=(0,t.useRef)(null),c=(0,t.useRef)(null),M=(0,t.useRef)(null),A=(0,t.useRef)(null),L=(0,t.useRef)(null),v=(0,t.useRef)(null),C=(0,t.useRef)(null),V=(0,t.useRef)(null),{ref:ee,inView:u}=(0,ue.useInView)();(0,t.useImperativeHandle)(xe,()=>c.current);const y=typeof d=="string"?d:d&&(0,U.convertLexicalToHTML)({data:d,converters:ne}),te=typeof n=="string"?n:n&&(0,U.convertLexicalToHTML)({data:n,converters:ne});(0,t.useEffect)(()=>{u?(g.current?.play(),Q(!0)):(g.current?.pause(),Q(!1))},[u]);const j=(0,ce.debounce)(()=>{if(c.current){const a=c.current.getBoundingClientRect(),i=window.innerHeight,b=window.scrollY||window.pageYOffset,m=a.bottom+b,x=document.documentElement.scrollHeight-m;ve(x>i?i:x)}if(c.current){const a=c.current.clientHeight,i=window.innerHeight;be(a+i)}},600);(0,t.useEffect)(()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}),[]),(0,t.useEffect)(()=>{function a(){if(!M.current||T!=="fade-in")return;const b=M.current?.clientHeight||80;L.current=new Y.SplitText(M.current,{type:"words",wordsClass:"word"});const m=L.current.words;f.gsap.set(m,{opacity:0}),v.current&&f.gsap.set(v.current,{opacity:0}),C.current=I.ScrollTrigger.create({trigger:c.current,start:"top center-=10%",end:`top+=${b*1.5+80}px center-=10%`,scrub:!0,onUpdate:oe=>{const x=oe.progress,le=m.length,ke=1/le,se=.5;m.forEach((Ne,He)=>{const Te=He/le*(1-se),ze=ke*(1+se);let F=(x-Te)/ze;F=Math.max(0,Math.min(F,1)),f.gsap.set(Ne,{opacity:F})}),f.gsap.set(Z.current,{opacity:x}),v.current&&f.gsap.set(v.current,{opacity:x>=.6?1:0})}})}function i(){V.current=I.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const m=b.progress;he(m)}})}return u&&(a(),i()),()=>{L.current&&L.current.revert(),C.current&&C.current.kill(),V.current&&V.current.kill()}},[T,u]),(0,me.useExposure)(A,{componentType:$e,componentName:_e,componentTitle:y});const we=(0,t.useMemo)(()=>u&&z>0&&z<.9?3:u?2:1,[z,u]);if(fe==="text-layout")return(0,e.jsxs)("div",{...$,ref:c,className:(0,r.cn)("relative flex w-full items-center overflow-hidden","aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]","laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]",{"aiui-dark":E==="dark","rounded-box":P==="rounded"},o),children:[(0,e.jsx)("div",{ref:ee,className:"pointer-events-none absolute inset-0"}),(0,e.jsxs)("div",{className:"absolute inset-0 z-0",children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.url,className:"tablet:block hidden size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.url,className:"tablet:hidden block size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{className:"absolute inset-0 bg-black/30"})]}),(0,e.jsxs)("div",{className:(0,r.cn)("relative z-10 mx-auto flex w-full max-w-[1920px] flex-col","gap-6 px-4 py-10","tablet:gap-8 tablet:px-8","laptop:flex-row laptop:gap-12 laptop:px-16","desktop:gap-16 desktop:px-20","lg-desktop:px-24"),children:[(0,e.jsx)("div",{className:"laptop:w-1/2 w-full shrink-0",children:J&&(0,e.jsx)(w.Heading,{as:"h2",size:5,className:"text-info-primary",children:J})}),(0,e.jsxs)("div",{className:(0,r.cn)("laptop:w-1/2 flex w-full flex-col justify-start","tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6"),children:[S&&S.length>0&&(0,e.jsx)("div",{className:"tablet:gap-4 flex flex-col gap-3",children:S.map((a,i)=>(0,e.jsx)(w.Text,{as:"p",size:3,className:"text-info-primary lg-desktop:text-[18px] opacity-90",children:typeof a=="string"?a:a.text},i))}),_&&_.length>0&&(0,e.jsx)("div",{className:(0,r.cn)("tablet:grid-cols-3 grid grid-cols-2","tablet:gap-6 desktop:gap-8 gap-4"),children:_.map((a,i)=>(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)("span",{className:"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]",children:a.value}),(0,e.jsx)(w.Text,{as:"span",size:2,className:"text-info-primary opacity-80",children:a.label})]},i))})]})]})]});const D="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,e.jsxs)(e.Fragment,{children:[p&&(0,e.jsx)("div",{...$,ref:c,className:(0,r.cn)("pointer-events-none relative z-10",D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"},o),children:(0,e.jsx)("div",{ref:ee,children:!T&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[y&&!K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),te&&K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:te}}),k&&(0,e.jsx)(q.default,{variant:"link",className:(0,r.cn)("member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]})})}),(0,e.jsxs)("div",{...p?{}:$,style:p?{marginBottom:`-${W}px`,marginTop:`-${ye}px`,zIndex:we}:{zIndex:5},className:(0,r.cn)("relative",o),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{id:s,className:(0,r.cn)("relative overflow-hidden",p?"h-screen w-full":D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"}),children:[T==="fade-in"&&(0,e.jsxs)("div",{className:(0,r.cn)("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",p?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[y&&(0,e.jsx)("div",{ref:M,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),k&&(0,e.jsx)(q.default,{ref:v,variant:"link",className:(0,r.cn)("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-z*100}vh`},children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.url,className:"tablet:block hidden size-full !h-auto",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.url,className:"tablet:hidden block 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}),(0,e.jsx)("div",{ref:Z,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),p&&(0,e.jsx)("div",{className:(0,r.cn)(p&&"pointer-events-none relative box-content block",D),style:p?{height:`${W}px`}:{},ref:A})]}),X&&O&&(0,e.jsx)(de.VideoModal,{visible:X,youTubeId:O,onCloseModal:()=>B(!1)})]})});ie.displayName="MediaPlayerBase";var Be=(0,pe.withLayout)(ie);
1
+ "use strict";"use client";var Me=Object.create;var R=Object.defineProperty;var Le=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Pe=(o,s)=>{for(var l in s)R(o,l,{get:s[l],enumerable:!0})},ae=(o,s,l,d)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of Re(s))!Ee.call(o,n)&&n!==l&&R(o,n,{get:()=>s[n],enumerable:!(d=Le(s,n))||d.enumerable});return o};var re=(o,s,l)=>(l=o!=null?Me(Ie(o)):{},ae(s||!o||!o.__esModule?R(l,"default",{value:o,enumerable:!0}):l,o)),Se=o=>ae(R({},"__esModule",{value:!0}),o);var Ce={};Pe(Ce,{default:()=>Be});module.exports=Se(Ce);var e=require("react/jsx-runtime"),t=require("react"),ce=require("lodash"),r=require("../../helpers/utils.js"),pe=require("../../shared/Styles.js"),q=re(require("../../components/button.js")),w=require("../../components/index.js"),de=require("../VideoModal/index.js"),U=require("@payloadcms/richtext-lexical/html"),ue=require("react-intersection-observer"),me=require("../../hooks/useExposure.js"),h=re(require("../../helpers/ScrollLoadVideo.js")),f=require("gsap"),Y=require("gsap/dist/SplitText"),I=require("gsap/dist/ScrollTrigger");const _e="media_player_base",$e="video";f.gsap.registerPlugin(I.ScrollTrigger,Y.SplitText);const ne=({defaultConverters:o})=>({...o,text:s=>{const{node:l}=s;return l.$&&l.$.color?`<span class="lexical-${l.$.color}">${l.text}</span>`:l.text}}),ie=(0,t.forwardRef)(({className:o="",id:s,onBtnClick:l,data:{title:d,videoTitle:n,btnText:k,youtubeId:O,video:N,mobileVideo:G,theme:E,img:H,shape:P,titleAnimation:T="fade-in",variant:fe,headline:J,paragraphs:S,metrics:_,...ge},...$},xe)=>{const{sticky:p}=ge,[K,Q]=(0,t.useState)(!1),[W,ve]=(0,t.useState)(0),[ye,be]=(0,t.useState)(0),[z,he]=(0,t.useState)(0),[X,B]=(0,t.useState)(!1),g=(0,t.useRef)(null),Z=(0,t.useRef)(null),c=(0,t.useRef)(null),M=(0,t.useRef)(null),A=(0,t.useRef)(null),L=(0,t.useRef)(null),v=(0,t.useRef)(null),C=(0,t.useRef)(null),V=(0,t.useRef)(null),{ref:ee,inView:u}=(0,ue.useInView)();(0,t.useImperativeHandle)(xe,()=>c.current);const y=typeof d=="string"?d:d&&(0,U.convertLexicalToHTML)({data:d,converters:ne}),te=typeof n=="string"?n:n&&(0,U.convertLexicalToHTML)({data:n,converters:ne});(0,t.useEffect)(()=>{u?(g.current?.play(),Q(!0)):(g.current?.pause(),Q(!1))},[u]);const j=(0,ce.debounce)(()=>{if(c.current){const a=c.current.getBoundingClientRect(),i=window.innerHeight,b=window.scrollY||window.pageYOffset,m=a.bottom+b,x=document.documentElement.scrollHeight-m;ve(x>i?i:x)}if(c.current){const a=c.current.clientHeight,i=window.innerHeight;be(a+i)}},600);(0,t.useEffect)(()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}),[]),(0,t.useEffect)(()=>{function a(){if(!M.current||T!=="fade-in")return;const b=M.current?.clientHeight||80;L.current=new Y.SplitText(M.current,{type:"words",wordsClass:"word"});const m=L.current.words;f.gsap.set(m,{opacity:0}),v.current&&f.gsap.set(v.current,{opacity:0}),C.current=I.ScrollTrigger.create({trigger:c.current,start:"top center-=10%",end:`top+=${b*1.5+80}px center-=10%`,scrub:!0,onUpdate:oe=>{const x=oe.progress,le=m.length,ke=1/le,se=.5;m.forEach((Ne,He)=>{const Te=He/le*(1-se),ze=ke*(1+se);let F=(x-Te)/ze;F=Math.max(0,Math.min(F,1)),f.gsap.set(Ne,{opacity:F})}),f.gsap.set(Z.current,{opacity:x}),v.current&&f.gsap.set(v.current,{opacity:x>=.6?1:0})}})}function i(){V.current=I.ScrollTrigger.create({trigger:c.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const m=b.progress;he(m)}})}return u&&(a(),i()),()=>{L.current&&L.current.revert(),C.current&&C.current.kill(),V.current&&V.current.kill()}},[T,u]),(0,me.useExposure)(A,{componentType:$e,componentName:_e,componentTitle:y});const we=(0,t.useMemo)(()=>u&&z>0&&z<.9?3:u?2:1,[z,u]);if(fe==="text-layout")return(0,e.jsxs)("div",{...$,ref:c,className:(0,r.cn)("relative flex w-full items-center overflow-hidden","aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]","laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]",{"aiui-dark":E==="dark","rounded-box":P==="rounded"},o),children:[(0,e.jsx)("div",{ref:ee,className:"pointer-events-none absolute inset-0"}),(0,e.jsxs)("div",{className:"absolute inset-0 z-0",children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.url,className:"tablet:block hidden size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.url,className:"tablet:hidden block size-full",videoClassName:"size-full object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{className:"absolute inset-0 bg-black/30"})]}),(0,e.jsxs)("div",{className:(0,r.cn)("relative z-10 mx-auto flex w-full max-w-[1920px] flex-col","gap-6 px-4 py-10","tablet:gap-8 tablet:px-8","laptop:flex-row laptop:gap-12 laptop:px-16","desktop:gap-16 desktop:px-20","lg-desktop:px-24"),children:[(0,e.jsx)("div",{className:"laptop:w-1/2 w-full shrink-0",children:J&&(0,e.jsx)(w.Heading,{as:"h2",size:5,className:"text-info-primary",children:J})}),(0,e.jsxs)("div",{className:(0,r.cn)("laptop:w-1/2 flex w-full flex-col justify-start","tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6"),children:[S&&S.length>0&&(0,e.jsx)("div",{className:"tablet:gap-4 flex flex-col gap-3",children:S.map((a,i)=>(0,e.jsx)(w.Text,{as:"p",size:3,className:"text-info-primary lg-desktop:text-[18px] opacity-90",children:typeof a=="string"?a:a.text},i))}),_&&_.length>0&&(0,e.jsx)("div",{className:(0,r.cn)("tablet:grid-cols-3 grid grid-cols-2","tablet:gap-6 desktop:gap-8 gap-4"),children:_.map((a,i)=>(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)("span",{className:"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]",children:a.value}),(0,e.jsx)(w.Text,{as:"span",size:2,className:"text-info-primary opacity-80",children:a.label})]},i))})]})]})]});const D="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,e.jsxs)(e.Fragment,{children:[p&&(0,e.jsx)("div",{...$,ref:c,className:(0,r.cn)("pointer-events-none relative z-10",D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"},o),children:(0,e.jsx)("div",{ref:ee,children:!T&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[y&&!K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),te&&K&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:te}}),k&&(0,e.jsx)(q.default,{variant:"link",className:(0,r.cn)("member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]})})}),(0,e.jsxs)("div",{...p?{}:$,style:p?{marginBottom:`-${W}px`,marginTop:`-${ye}px`,zIndex:we}:{zIndex:5},className:(0,r.cn)("relative",o),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{id:s,className:(0,r.cn)("relative overflow-hidden",p?"h-screen w-full":D,{"aiui-dark":E==="dark","rounded-box":P==="rounded"}),children:[T==="fade-in"&&(0,e.jsxs)("div",{className:(0,r.cn)("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",p?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[y&&(0,e.jsx)("div",{ref:M,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),k&&(0,e.jsx)(q.default,{ref:v,variant:"link",className:(0,r.cn)("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{B(!0),l&&l?.()},children:k})]}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-z*100}vh`},children:[(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:N?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(h.default,{videoRef:g,poster:H?.url||"",src:G?.url||N?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:Z,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),p&&(0,e.jsx)("div",{className:(0,r.cn)(p&&"pointer-events-none relative box-content block",D),style:p?{height:`${W}px`}:{},ref:A})]}),X&&O&&(0,e.jsx)(de.VideoModal,{visible:X,youTubeId:O,onCloseModal:()=>B(!1)})]})});ie.displayName="MediaPlayerBase";var Be=(0,pe.withLayout)(ie);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: {\n title,\n videoTitle,\n btnText,\n youtubeId,\n video,\n mobileVideo,\n theme,\n img,\n shape,\n titleAnimation = 'fade-in',\n variant,\n headline,\n paragraphs,\n metrics,\n ...dataRest\n },\n ...rest\n },\n ref\n ) => {\n const { sticky } = dataRest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const btnFadeInRef = useRef<HTMLButtonElement>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n if (btnFadeInRef.current) {\n gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n }\n },\n })\n }\n\n function gsapVideoHeightResize() {\n heightTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom',\n end: `bottom top`,\n // markers: true,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n setVideoHeightProgress(progress)\n },\n })\n }\n\n if (inView) {\n gsapResize()\n gsapVideoHeightResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n heightTriggerRef.current && heightTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n const zIndexVideo = useMemo(() => {\n if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n if (inView) return 2\n return 1\n }, [videoHeightProgress, inView])\n\n if (variant === 'text-layout') {\n return (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'relative flex w-full items-center overflow-hidden',\n 'aspect-w-[390] aspect-h-[660] tablet:aspect-w-[768] tablet:aspect-h-[660]',\n 'laptop:aspect-w-[1024] laptop:aspect-h-[520] desktop:aspect-w-[1440] desktop:aspect-h-[700]',\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930]',\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef} className=\"pointer-events-none absolute inset-0\" />\n\n {/* Video Background */}\n <div className=\"absolute inset-0 z-0\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div className=\"absolute inset-0 bg-black/30\" />\n </div>\n\n {/* Content */}\n {/* Content \u2014 Fix#1/#9: laptop:flex-row, reduced spacing */}\n <div\n className={cn(\n 'relative z-10 mx-auto flex w-full max-w-[1920px] flex-col',\n 'gap-6 px-4 py-10',\n 'tablet:gap-8 tablet:px-8',\n 'laptop:flex-row laptop:gap-12 laptop:px-16',\n 'desktop:gap-16 desktop:px-20',\n 'lg-desktop:px-24'\n )}\n >\n {/* 1. Headline */}\n {/* 1. Headline \u2014 Fix#1(w-1/2) + Fix#5(Heading size=5) */}\n <div className=\"laptop:w-1/2 w-full shrink-0\">\n {headline && (\n <Heading as=\"h2\" size={5} className=\"text-info-primary\">\n {headline}\n </Heading>\n )}\n </div>\n\n {/* Right column for paragraphs and metrics */}\n {/* Right column \u2014 Fix#1(w-1/2) + Fix#4(justify-start) + Fix#10(gap) */}\n <div\n className={cn(\n 'laptop:w-1/2 flex w-full flex-col justify-start',\n 'tablet:gap-8 laptop:gap-10 desktop:gap-12 gap-6'\n )}\n >\n {/* 2. Paragraphs */}\n {paragraphs && paragraphs.length > 0 && (\n <div className=\"tablet:gap-4 flex flex-col gap-3\">\n {paragraphs.map((p, i) => (\n <Text key={i} as=\"p\" size={3} className=\"text-info-primary lg-desktop:text-[18px] opacity-90\">\n {typeof p === 'string' ? p : p.text}\n </Text>\n ))}\n </div>\n )}\n\n {/* 3. Metrics */}\n {metrics && metrics.length > 0 && (\n <div className={cn('tablet:grid-cols-3 grid grid-cols-2', 'tablet:gap-6 desktop:gap-8 gap-4')}>\n {metrics.map((m, i) => (\n <div key={i} className=\"flex flex-col gap-1\">\n {/* Fix#7: Heading size=4 equivalent classes on span */}\n <span className=\"text-info-primary desktop:text-[40px] lg-desktop:text-[48px] text-balance text-[32px] font-bold leading-[100%] tracking-[-0.04em]\">\n {m.value}\n </span>\n {/* Fix#8: Text size=2 \u2192 14px, removed uppercase/tracking-wider */}\n <Text as=\"span\" size={2} className=\"text-info-primary opacity-80\">\n {m.label}\n </Text>\n </div>\n ))}\n </div>\n )}\n </div>\n </div>\n </div>\n )\n }\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n {...rest}\n ref={titleRef}\n className={cn(\n 'pointer-events-none relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div\n {...(!sticky ? rest : {})}\n style={\n sticky\n ? {\n marginBottom: `-${btb}px`,\n marginTop: `-${titleHeight}px`,\n zIndex: zIndexVideo,\n }\n : { zIndex: 5 }\n }\n className={cn('relative', className)}\n >\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && (\n <div\n className={cn(\n 'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n )}\n >\n {title_html && (\n <div\n ref={titleFadeInRef}\n className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {btnText && (\n <Button\n ref={btnFadeInRef}\n variant=\"link\"\n className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n onClick={() => {\n setVisible(true)\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n </Button>\n )}\n </div>\n )}\n <div\n className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n >\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n {sticky && (\n <div\n className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n )}\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
5
+ "mappings": "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",
6
6
  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_components", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "variant", "headline", "paragraphs", "metrics", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "ScrollLoadVideo", "p", "m", "aspect", "Button"]
7
7
  }
package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { Media, Theme } from '../../types/props.js';
2
+ import type { Media as MediaType, Theme } from '../../types/props.js';
3
3
  export type MediaSceneSwitcherV2SemanticName = 'root' | 'header' | 'title' | 'subtitle' | 'container' | 'tabList' | 'tabItem' | 'tabTitle' | 'tabDescription' | 'mediaWrapper' | 'media' | 'swiper' | 'slide' | 'slideMedia' | 'slideContent';
4
4
  /**
5
5
  * 场景项数据接口
@@ -11,11 +11,11 @@ export interface MediaSceneSwitcherV2Item {
11
11
  description?: string;
12
12
  /** 场景媒体（图片/视频） */
13
13
  media: {
14
- mobile?: Media;
15
- tablet?: Media;
16
- laptop?: Media;
17
- desktop?: Media;
18
- lgDesktop?: Media;
14
+ mobile?: MediaType;
15
+ tablet?: MediaType;
16
+ laptop?: MediaType;
17
+ desktop?: MediaType;
18
+ lgDesktop?: MediaType;
19
19
  };
20
20
  }
21
21
  /**
package/dist/cjs/biz-components/MediaSceneSwitcherV2/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Y=Object.create;var V=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(t,i)=>{for(var l in i)V(t,l,{get:i[l],enumerable:!0})},H=(t,i,l,p)=>{if(i&&typeof i=="object"||typeof i=="function")for(let d of $(i))!K.call(t,d)&&d!==l&&V(t,d,{get:()=>i[d],enumerable:!(p=_(i,d))||p.enumerable});return t};var P=(t,i,l)=>(l=t!=null?Y(q(t)):{},H(i||!t||!t.__esModule?V(l,"default",{value:t,enumerable:!0}):l,t)),G=t=>H(V({},"__esModule",{value:!0}),t);var ie={};Q(ie,{default:()=>te});module.exports=G(ie);var r=require("react/jsx-runtime"),c=P(require("react")),L=require("swiper/react"),y=require("swiper/modules"),v=require("react-responsive"),a=require("../../helpers/index.js"),B=P(require("../../components/picture.js")),m=require("../../components/index.js"),j=require("../../shared/Styles.js");const C=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"tablet",width:768},{key:"mobile",width:390}],J=(t,i)=>t[i]?.mimeType==="video/mp4",X=t=>C.filter(({key:l})=>t[l]?.url&&t[l]?.mimeType!=="video/mp4").map(({key:l,width:p})=>`${t[l].url} ${p}`).join(", "),Z=(t,i)=>{for(const{key:l}of C)if(t[l]?.alt)return t[l].alt;return i},W=({media:t,alt:i,className:l})=>{const p=(0,v.useMediaQuery)({minWidth:1920}),d=(0,v.useMediaQuery)({minWidth:1440,maxWidth:1919}),S=(0,v.useMediaQuery)({minWidth:1025,maxWidth:1439}),u=(0,v.useMediaQuery)({minWidth:768,maxWidth:1024}),f=c.useMemo(()=>{if(p&&t.lgDesktop?.url)return"lgDesktop";if(d&&t.desktop?.url)return"desktop";if(S&&t.laptop?.url)return"laptop";if(u&&t.tablet?.url)return"tablet";if(t.mobile?.url)return"mobile";for(const{key:x}of C)if(t[x]?.url)return x;return"desktop"},[p,d,S,u,t]),s=t[f];if(!s?.url)return null;if(J(t,f))return(0,r.jsx)("video",{src:s.url,className:l,autoPlay:!0,loop:!0,muted:!0,playsInline:!0});const M=X(t);return(0,r.jsx)(B.default,{source:M||s.url,alt:Z(t,i),className:l,imgClassName:"size-full object-cover"})},ee=3e3,F=c.forwardRef(({className:t,classNames:i={},data:l,onSceneChange:p,...d},S)=>{const{title:u,subtitle:f,items:s,defaultActiveIndex:M=0,layout:x="left",autoplay:h=!0,autoplayDelay:g=ee}=l,[n,R]=c.useState(M),E=c.useRef(null),w=c.useRef(0),T=c.useRef([]),I=(0,v.useMediaQuery)({minWidth:1025});c.useEffect(()=>!h||s.length<=1||!I?void 0:((()=>{w.current=window.setInterval(()=>{R(e=>(e+1)%s.length)},g)})(),()=>{w.current&&window.clearInterval(w.current)}),[h,g,s.length,I]),c.useEffect(()=>{if(!I||!T.current[n])return;const o=T.current[n],e=o?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const k=requestAnimationFrame(()=>{const D=e.getBoundingClientRect(),N=o.getBoundingClientRect();if(N.top>=D.top&&N.bottom<=D.bottom)return;const U=N.top-D.top-e.clientHeight/2+N.height/2;e.scrollTo({top:e.scrollTop+U,behavior:"smooth"})});return()=>cancelAnimationFrame(k)},[n,I]);const A=c.useCallback(o=>{R(o),p?.(o,s[o]),E.current?.slideTo(o),h&&s.length>1&&(w.current&&window.clearInterval(w.current),w.current=window.setInterval(()=>{R(e=>(e+1)%s.length)},g))},[s,p,h,g]),O=c.useCallback(o=>{const e=o.realIndex;R(e),p?.(e,s[e])},[s,p]),b=s[n],z=x==="top";return(0,r.jsxs)("div",{ref:S,className:(0,a.cn)("scene-switcher-root","text-info-primary w-full",t,i.root,{"aiui-dark":l.theme==="dark"}),...d,children:[(u||f)&&(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-header mb-6",i.header),children:[u&&(0,r.jsx)(m.Heading,{as:"h2",size:4,html:u,className:(0,a.cn)("scene-switcher-title",i.title)}),f&&(0,r.jsx)(m.Text,{as:"p",size:3,className:(0,a.cn)("",i?.subtitle),html:f})]}),(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-swiper","laptop:hidden !overflow-visible",i.swiper),children:(0,r.jsx)(L.Swiper,{modules:[y.FreeMode,y.Mousewheel,y.Autoplay],onSwiper:o=>{E.current=o},className:"!overflow-visible",onSlideChange:O,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:M,loop:h&&s.length>1,autoplay:h&&s.length>1?{delay:g,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:s.map((o,e)=>(0,r.jsx)(L.SwiperSlide,{className:"h-[462px] !w-[296px]",children:(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-slide","flex cursor-pointer flex-col",i.slide),onClick:()=>A(e),children:[(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",i.slideMedia),children:(0,r.jsx)(W,{media:o.media,alt:o.title,className:"rounded-t-box size-full overflow-hidden object-cover"})}),(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-slide-content"," mt-6 border-t pt-4",n===e?"border-info-primary border-t-4":"border-lines-primary",i.slideContent),children:[(0,r.jsx)(m.Heading,{className:(0,a.cn)("scene-switcher-tab-title ",n===e?"text-info-primary":"text-info-tertiary",o.title),size:3,as:"h3",html:o.title}),o.description&&(0,r.jsx)(m.Text,{className:(0,a.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",n===e?"text-info-primary":"text-info-tertiary"),html:o.description})]})]})},e))})}),z&&(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",i.container),children:[(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:b&&(0,r.jsx)(W,{media:b.media,alt:b.title,className:(0,a.cn)("scene-switcher-media","rounded-box size-full object-cover",i.media)})}),(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",i.tabList),children:s.map((o,e)=>(0,r.jsxs)("div",{ref:k=>{T.current[e]=k},className:(0,a.cn)("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",n===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",i.tabItem),onClick:()=>A(e),role:"button","aria-selected":n===e,children:[(0,r.jsx)(m.Heading,{className:(0,a.cn)("scene-switcher-tab-title line-clamp-2",n===e?"text-info-primary":"text-info-tertiary",o.title),size:3,as:"h3",html:o.title}),o.description&&(0,r.jsx)(m.Text,{className:(0,a.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",n===e?"text-info-primary":"text-info-tertiary"),html:o.description})]},e))})]}),!z&&(0,r.jsxs)("div",{className:(0,a.cn)("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",x==="right"&&"flex-row-reverse",i.container),children:[(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",i.tabList),children:(0,r.jsx)("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:s.map((o,e)=>(0,r.jsxs)(c.Fragment,{children:[e>0&&(0,r.jsx)("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),(0,r.jsxs)("div",{ref:k=>{T.current[e]=k},className:(0,a.cn)("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",n===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",i.tabItem),onClick:()=>A(e),role:"button","aria-selected":n===e,children:[(0,r.jsx)(m.Heading,{className:(0,a.cn)("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",n===e?"text-info-primary":"text-info-tertiary",o.title),size:3,as:"h3",html:o.title}),o.description&&(0,r.jsx)(m.Text,{className:(0,a.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",n===e?"text-info-primary":"text-info-tertiary hidden"),html:o.description})]})]},e))})}),(0,r.jsx)("div",{className:(0,a.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:b&&(0,r.jsx)(W,{media:b.media,alt:b.title,className:(0,a.cn)("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",i.media)})})]})]})});F.displayName="MediaSceneSwitcherV2";var te=(0,j.withLayout)(F);
1
+ "use strict";"use client";var U=Object.create;var k=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var G=(a,i)=>{for(var n in i)k(a,n,{get:i[n],enumerable:!0})},z=(a,i,n,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let m of _(i))!Q.call(a,m)&&m!==n&&k(a,m,{get:()=>i[m],enumerable:!(d=Y(i,m))||d.enumerable});return a};var H=(a,i,n)=>(n=a!=null?U(q(a)):{},z(i||!a||!a.__esModule?k(n,"default",{value:a,enumerable:!0}):n,a)),J=a=>z(k({},"__esModule",{value:!0}),a);var Z={};G(Z,{default:()=>X});module.exports=J(Z);var t=require("react/jsx-runtime"),p=H(require("react")),T=require("swiper/react"),u=require("swiper/modules"),P=require("react-responsive"),o=require("../../helpers/index.js"),c=require("../../components/index.js"),B=require("../../shared/Styles.js"),M=H(require("../Media/index.js"));const R=a=>({pcImage:a.lgDesktop,desktopImage:a.desktop,laptopImage:a.laptop,padImage:a.tablet,mobileImage:a.mobile}),K=3e3,F=p.forwardRef(({className:a,classNames:i={},data:n,onSceneChange:d,...m},O)=>{const{title:I,subtitle:V,items:l,defaultActiveIndex:A=0,layout:D="left",autoplay:h=!0,autoplayDelay:w=K}=n,[s,v]=p.useState(A),C=p.useRef(null),f=p.useRef(0),x=p.useRef([]),y=(0,P.useMediaQuery)({minWidth:1025});p.useEffect(()=>!h||l.length<=1||!y?void 0:((()=>{f.current=window.setInterval(()=>{v(e=>(e+1)%l.length)},w)})(),()=>{f.current&&window.clearInterval(f.current)}),[h,w,l.length,y]),p.useEffect(()=>{if(!y||!x.current[s])return;const r=x.current[s],e=r?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const b=requestAnimationFrame(()=>{const L=e.getBoundingClientRect(),S=r.getBoundingClientRect();if(S.top>=L.top&&S.bottom<=L.bottom)return;const j=S.top-L.top-e.clientHeight/2+S.height/2;e.scrollTo({top:e.scrollTop+j,behavior:"smooth"})});return()=>cancelAnimationFrame(b)},[s,y]);const N=p.useCallback(r=>{v(r),d?.(r,l[r]),C.current?.slideTo(r),h&&l.length>1&&(f.current&&window.clearInterval(f.current),f.current=window.setInterval(()=>{v(e=>(e+1)%l.length)},w))},[l,d,h,w]),W=p.useCallback(r=>{const e=r.realIndex;v(e),d?.(e,l[e])},[l,d]),g=l[s],E=D==="top";return(0,t.jsxs)("div",{ref:O,className:(0,o.cn)("scene-switcher-root","text-info-primary w-full",a,i.root,{"aiui-dark":n.theme==="dark"}),...m,children:[(I||V)&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-header mb-6",i.header),children:[I&&(0,t.jsx)(c.Heading,{as:"h2",size:4,html:I,className:(0,o.cn)("scene-switcher-title",i.title)}),V&&(0,t.jsx)(c.Text,{as:"p",size:3,className:(0,o.cn)("",i?.subtitle),html:V})]}),(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-swiper","laptop:hidden !overflow-visible",i.swiper),children:(0,t.jsx)(T.Swiper,{modules:[u.FreeMode,u.Mousewheel,u.Autoplay],onSwiper:r=>{C.current=r},className:"!overflow-visible",onSlideChange:W,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:A,loop:h&&l.length>1,autoplay:h&&l.length>1?{delay:w,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:l.map((r,e)=>(0,t.jsx)(T.SwiperSlide,{className:"h-[462px] !w-[296px]",children:(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-slide","flex cursor-pointer flex-col",i.slide),onClick:()=>N(e),children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",i.slideMedia),children:(0,t.jsx)(M.default,{...R(r.media),className:"rounded-t-box size-full overflow-hidden object-cover"})}),(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-slide-content"," mt-6 border-t pt-4",s===e?"border-info-primary border-t-4":"border-lines-primary",i.slideContent),children:[(0,t.jsx)(c.Heading,{className:(0,o.cn)("scene-switcher-tab-title ",s===e?"text-info-primary":"text-info-tertiary",r.title),size:3,as:"h3",html:r.title}),r.description&&(0,t.jsx)(c.Text,{className:(0,o.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:r.description})]})]})},e))})}),E&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",i.container),children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:g&&(0,t.jsx)(M.default,{...R(g.media),className:(0,o.cn)("scene-switcher-media","rounded-box size-full object-cover",i.media)})}),(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",i.tabList),children:l.map((r,e)=>(0,t.jsxs)("div",{ref:b=>{x.current[e]=b},className:(0,o.cn)("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",s===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",i.tabItem),onClick:()=>N(e),role:"button","aria-selected":s===e,children:[(0,t.jsx)(c.Heading,{className:(0,o.cn)("scene-switcher-tab-title line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",r.title),size:3,as:"h3",html:r.title}),r.description&&(0,t.jsx)(c.Text,{className:(0,o.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary"),html:r.description})]},e))})]}),!E&&(0,t.jsxs)("div",{className:(0,o.cn)("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",D==="right"&&"flex-row-reverse",i.container),children:[(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",i.tabList),children:(0,t.jsx)("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:l.map((r,e)=>(0,t.jsxs)(p.Fragment,{children:[e>0&&(0,t.jsx)("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),(0,t.jsxs)("div",{ref:b=>{x.current[e]=b},className:(0,o.cn)("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",s===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",i.tabItem),onClick:()=>N(e),role:"button","aria-selected":s===e,children:[(0,t.jsx)(c.Heading,{className:(0,o.cn)("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",s===e?"text-info-primary":"text-info-tertiary",r.title),size:3,as:"h3",html:r.title}),r.description&&(0,t.jsx)(c.Text,{className:(0,o.cn)("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",s===e?"text-info-primary":"text-info-tertiary hidden"),html:r.description})]})]},e))})}),(0,t.jsx)("div",{className:(0,o.cn)("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",i.mediaWrapper),children:g&&(0,t.jsx)(M.default,{...R(g.media),className:(0,o.cn)("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",i.media)})})]})]})});F.displayName="MediaSceneSwitcherV2";var X=(0,B.withLayout)(F);
2
2
  //# sourceMappingURL=index.js.map