@anker-in/headless-ui 1.3.53 → 1.3.54

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js';
+import type { ComponentCommonProps, Video, Img, Theme, Align } from '../../types/props.js';
 import 'swiper/css';
 type GraphicType = {
     imgUrl: Img;
@@ -31,8 +31,19 @@ type GraphicType = {
     };
     showBottomGradient?: boolean;
 };
+interface GraphicTab {
+    id: string;
+    label: string;
+    items: GraphicType[];
+}
 export interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {
     data: {
+        /** 是否启用 Tab 切换，默认 false */
+        isShowTab?: boolean;
+        /** Tab 分组 - isShowTab 为 true 时生效 */
+        tabs?: GraphicTab[];
+        /** Tab 对齐方式，默认 left */
+        tabAlign?: Align;
         title?: string;
         items?: GraphicType[];
         itemShape?: 'round' | 'square';

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var q=Object.create;var v=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var s in o)v(e,s,{get:o[s],enumerable:!0})},$=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of X(o))!F.call(e,i)&&i!==s&&v(e,i,{get:()=>o[i],enumerable:!(n=Q(o,i))||n.enumerable});return e};var T=(e,o,s)=>(s=e!=null?q(Z(e)):{},$(o||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>$(v({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),G=require("react-responsive"),l=T(require("react")),S=require("react-dom"),c=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),D=T(require("../SwiperBox/index.js")),p=require("../../components/index.js"),L=T(require("../Title/index.js")),U=require("../VideoModal/index.js"),z=require("../TextModal/index.js"),I=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),E=require("../AiuiProvider/index.js"),se=require("swiper/css");const d="image",h="graphic",C=e=>{let o="";const s=u=>(u?.url&&(o=u.url),o),n=s(e.lgDesktop),i=s(e.desktop),a=s(e.laptop),b=s(e.tablet),g=e.default?.url;return[`${n} 9999`,`${i} 1919`,`${a} 1439`,`${b} 1024`,`${g} 768`].join(", ")},V="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",O=({data:e,configuration:o})=>{const s=(0,l.useRef)(null),[n,i]=(0,l.useState)({visible:!1,x:0,y:0,text:""}),a=o?.descriptionTag||"h3",b=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},g=r=>{e?.description&&i({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},u=()=>{i(r=>({...r,visible:!1}))};(0,I.useExposure)(s,{componentType:d,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const k=e?.href?"a":"div",y=e?.href?{href:(0,w.trackUrlRef)(e.href,`${d}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,c.cn)(b(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,c.cn)("rounded-box absolute inset-0 overflow-hidden"),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsxs)("a",{"aria-label":e?.title||e?.description,href:(0,w.trackUrlRef)(e?.href||"",`${d}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?C(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),(0,t.jsx)("span",{className:"sr-only",children:e?.title||e?.description})]}):(0,t.jsx)("div",{className:"rounded-card block size-full overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?C(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(k,{...y,className:(0,c.cn)("laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",{"bg-gradient-to-b from-transparent to-black/80":e?.showBottomGradient&&e?.theme==="dark","bg-gradient-to-b from-transparent to-white/80":e?.showBottomGradient&&e?.theme!=="dark"}),children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(p.Text,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsxs)("div",{onMouseMove:g,onMouseLeave:u,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:a,className:`${V} graphic-description`}):(0,t.jsx)(a,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${V} graphic-description-item`}),typeof window<"u"&&n.visible&&(0,S.createPortal)((0,t.jsx)(p.Text,{as:"div",html:n.text,className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${n.x+16}px`,top:`${n.y+16}px`}}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:r=>{r.preventDefault(),r.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(p.Button,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,w.trackUrlRef)((0,c.getLocalizedPath)(e?.href||"",o?.locale||"us"),`${d}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},P=l.default.forwardRef(({data:e,className:o,...s},n)=>{const i=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),a=(0,l.useRef)(null),[b,g]=(0,l.useState)(!1),[u,k]=(0,l.useState)(""),[y,r]=(0,l.useState)(""),[H,R]=(0,l.useState)(""),[j,M]=(0,l.useState)(null),[_,N]=(0,l.useState)(!1),{locale:A="us"}=(0,E.useAiuiContext)(),f=x=>{const m=e?.items?.length>3,Y=e?.items?.length>2;switch(x){case 1440:return m?4:e?.items?.length;case 1024:return m?3:e?.items?.length;case 768:return e?.items?.length===1?1:m||Y?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(n,()=>a.current),(0,I.useExposure)(a,{componentType:d,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:a,className:(0,c.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(L.default,{data:{title:e?.title,align:e?.titleAlign??"left"}}),(0,t.jsx)(D.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:A,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,m)=>{g(!0),m?.isYouTube?r?.(m?.youtubeId||""):(k?.(m?.video?.url||""),R?.(m?.mobileVideo?.url||""))},onIconClick:x=>{N(!0),M(x)},title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(U.VideoModal,{visible:b,youTubeId:y,onCloseModal:()=>g(!1),videoUrl:i&&H||u}),(0,t.jsx)(z.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{N(!1),M(null)}})]})});P.displayName="Graphic";var W=(0,B.withLayout)(P);
+"use strict";"use client";var K=Object.create;var x=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var oe=(e,o)=>{for(var s in o)x(e,s,{get:o[s],enumerable:!0})},V=(e,o,s,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of W(o))!te.call(e,i)&&i!==s&&x(e,i,{get:()=>o[i],enumerable:!(r=O(o,i))||r.enumerable});return e};var y=(e,o,s)=>(s=e!=null?K(ee(e)):{},V(o||!e||!e.__esModule?x(s,"default",{value:e,enumerable:!0}):s,e)),se=e=>V(x({},"__esModule",{value:!0}),e);var ne={};oe(ne,{default:()=>ie});module.exports=se(ne);var t=require("react/jsx-runtime"),D=require("react-responsive"),n=y(require("react")),A=require("react-dom"),d=require("../../helpers/utils.js"),U=require("../../shared/Styles.js"),z=y(require("../SwiperBox/index.js")),l=require("../../components/index.js"),I=y(require("../Title/index.js")),H=require("../VideoModal/index.js"),R=require("../TextModal/index.js"),C=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),E=require("../AiuiProvider/index.js"),ae=require("swiper/css");const u="image",h="graphic",G=e=>{let o="";const s=m=>(m?.url&&(o=m.url),o),r=s(e.lgDesktop),i=s(e.desktop),c=s(e.laptop),b=s(e.tablet),g=e.default?.url;return[`${r} 9999`,`${i} 1919`,`${c} 1439`,`${b} 1024`,`${g} 768`].join(", ")},P="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",le=({data:e,configuration:o})=>{const s=(0,n.useRef)(null),[r,i]=(0,n.useState)({visible:!1,x:0,y:0,text:""}),c=o?.descriptionTag||"h3",b=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},g=a=>{e?.description&&i({visible:!0,x:a.clientX,y:a.clientY,text:e.description})},m=()=>{i(a=>({...a,visible:!1}))};(0,C.useExposure)(s,{componentType:u,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const k=e?.href?"a":"div",T=e?.href?{href:(0,w.trackUrlRef)(e.href,`${u}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,d.cn)(b(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,d.cn)("rounded-box absolute inset-0 overflow-hidden"),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsxs)("a",{"aria-label":e?.title||e?.description,href:(0,w.trackUrlRef)(e?.href||"",`${u}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${u}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[(0,t.jsx)(l.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?G(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),(0,t.jsx)("span",{className:"sr-only",children:e?.title||e?.description})]}):(0,t.jsx)("div",{className:"rounded-card block size-full overflow-hidden",children:(0,t.jsx)(l.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?G(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(k,{...T,className:(0,d.cn)("laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",{"bg-gradient-to-b from-transparent to-black/80":e?.showBottomGradient&&e?.theme==="dark","bg-gradient-to-b from-transparent to-white/80":e?.showBottomGradient&&e?.theme!=="dark"}),children:[(0,t.jsxs)("div",{className:(0,d.cn)("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(l.Text,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsxs)("div",{onMouseMove:g,onMouseLeave:m,children:[e?.title?(0,t.jsx)(l.Heading,{html:e?.description,style:{color:e?.textColor},as:c,className:`${P} graphic-description`}):(0,t.jsx)(c,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${P} graphic-description-item`}),typeof window<"u"&&r.visible&&(0,A.createPortal)((0,t.jsx)(l.Text,{as:"div",html:r.text,className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${r.x+16}px`,top:`${r.y+16}px`}}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:a=>{a.preventDefault(),a.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:a=>{a.preventDefault(),a.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)(l.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(l.Button,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,w.trackUrlRef)((0,d.getLocalizedPath)(e?.href||"",o?.locale||"us"),`${u}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${u}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},B=({items:e=[],sharedConfig:o})=>{const s=r=>{const i=e.length>3,c=e.length>2;switch(r){case 1440:return i?4:e.length;case 1024:return i?3:e.length;case 768:return e.length===1?1:i||c?2.3:2;default:return e.length===1?1:1.2}};return(0,t.jsx)(z.default,{id:"Graphic",className:(0,d.cn)("!overflow-visible"),data:{list:e,configuration:{...o,num:e.length}},Slide:le,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:s()},768:{spaceBetween:16,freeMode:!1,slidesPerView:s(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:s(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:s(1440)}}})},L=n.default.forwardRef(({data:e,className:o,...s},r)=>{const i=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),c=(0,n.useRef)(null),[b,g]=(0,n.useState)(!1),[m,k]=(0,n.useState)(""),[T,a]=(0,n.useState)(""),[j,_]=(0,n.useState)(""),[Y,M]=(0,n.useState)(null),[q,N]=(0,n.useState)(!1),{locale:Q="us"}=(0,E.useAiuiContext)(),X=e?.isShowTab??!1,f=e?.tabs,Z=e?.tabAlign??"left",[F,J]=(0,n.useState)(f?.[0]?.id??"");(0,n.useImperativeHandle)(r,()=>c.current),(0,C.useExposure)(c,{componentType:u,componentName:h,componentTitle:e?.title});const $={itemShape:e?.itemShape,descriptionTag:e?.descriptionTag,locale:Q,onVideoPlayBtnClick:(p,v)=>{g(!0),v?.isYouTube?a?.(v?.youtubeId||""):(k?.(v?.video?.url||""),_?.(v?.mobileVideo?.url||""))},onIconClick:p=>{N(!0),M(p)}},S=()=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(H.VideoModal,{visible:b,youTubeId:T,onCloseModal:()=>g(!1),videoUrl:i&&j||m}),(0,t.jsx)(R.TextModal,{textVisible:q,extension:Y?.extension,onCloseModal:()=>{N(!1),M(null)}})]});return!X||!f||f.length===0?(0,t.jsxs)("div",{...s,ref:c,className:(0,d.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(I.default,{data:{title:e.title,align:e?.titleAlign??"left"}}),(0,t.jsx)(B,{items:e?.items,sharedConfig:$})]}),S()]}):(0,t.jsxs)("div",{...s,ref:c,className:(0,d.cn)("graphicBlock",o),children:[e?.title&&(0,t.jsx)(I.default,{data:{title:e.title,align:e?.titleAlign??"left"}}),(0,t.jsxs)(l.Tabs,{value:F,onValueChange:J,align:Z,children:[(0,t.jsx)("div",{className:"mb-[24px]",children:(0,t.jsx)(l.TabsList,{children:f.map(p=>(0,t.jsx)(l.TabsTrigger,{value:p.id,children:p.label},p.id))})}),f.map(p=>(0,t.jsx)(l.TabsContent,{value:p.id,children:(0,t.jsx)(B,{items:p.items,sharedConfig:$})},p.id))]}),S()]})});L.displayName="Graphic";var ie=(0,U.withLayout)(L);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport 'swiper/css'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  backgroundImage?: {\n    default?: Img\n    tablet?: Img\n    laptop?: Img\n    desktop?: Img\n    lgDesktop?: Img\n  }\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  showBottomGradient?: boolean\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n *   lgDesktop \u2192 1919px  (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n *   desktop  \u2192 1439px  (1440px - 1919px)\n *   laptop   \u2192 1024px  (1025px - 1439px)\n *   tablet   \u2192 767px   (768px - 1024px)\n *   default  \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n  // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n  let last = ''\n  const resolve = (img?: Img) => {\n    if (img?.url) last = img.url\n    return last\n  }\n  const lgDesktopSrc = resolve(bg.lgDesktop)\n  const desktopSrc = resolve(bg.desktop)\n  const laptopSrc = resolve(bg.laptop)\n  const tabletSrc = resolve(bg.tablet)\n  // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n  const defaultSrc = bg.default?.url\n  return [\n    `${lgDesktopSrc} 9999`, // \u22641920px\n    `${desktopSrc} 1919`, // 1440-1919px\n    `${laptopSrc} 1439`, // 1025-1439px\n    `${tabletSrc} 1024`, // 768-1024px\n    `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n  ].join(', ')\n}\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n    descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n    titleAlign?: 'center' | 'left'\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const Tag = configuration?.descriptionTag || 'h3'\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  const Container: React.ElementType = data?.href ? 'a' : 'div'\n  const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className={cn('rounded-box absolute inset-0 overflow-hidden')}>\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title || data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"rounded-card block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n              <span className=\"sr-only\">{data?.title || data?.description}</span>\n            </a>\n          ) : (\n            <div className=\"rounded-card block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={\n                  data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n                }\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n            </div>\n          )}\n          <Container\n            {...containerProps}\n            className={cn('laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4', {\n              'bg-gradient-to-b from-transparent to-black/80': data?.showBottomGradient && data?.theme === 'dark',\n              'bg-gradient-to-b from-transparent to-white/80': data?.showBottomGradient && data?.theme !== 'dark',\n            })}\n          >\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as={Tag}\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <Tag\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <Text\n                          as=\"div\"\n                          html={tooltip.text}\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        />,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title || data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </Container>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title, align: data?.titleAlign ?? 'left' }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              descriptionTag: data.descriptionTag,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
-  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_react_dom", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_css", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "Tag", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "Graphic", "React", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "Title", "SwiperBox", "_"]
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme, Align } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport 'swiper/css'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  backgroundImage?: {\n    default?: Img\n    tablet?: Img\n    laptop?: Img\n    desktop?: Img\n    lgDesktop?: Img\n  }\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  showBottomGradient?: boolean\n}\n\ninterface GraphicTab {\n  id: string\n  label: string\n  items: GraphicType[]\n}\n\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n  let last = ''\n  const resolve = (img?: Img) => {\n    if (img?.url) last = img.url\n    return last\n  }\n  const lgDesktopSrc = resolve(bg.lgDesktop)\n  const desktopSrc = resolve(bg.desktop)\n  const laptopSrc = resolve(bg.laptop)\n  const tabletSrc = resolve(bg.tablet)\n  const defaultSrc = bg.default?.url\n  return [\n    `${lgDesktopSrc} 9999`,\n    `${desktopSrc} 1919`,\n    `${laptopSrc} 1439`,\n    `${tabletSrc} 1024`,\n    `${defaultSrc} 768`,\n  ].join(', ')\n}\n\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\n\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    /** \u662F\u5426\u542F\u7528 Tab \u5207\u6362\uFF0C\u9ED8\u8BA4 false */\n    isShowTab?: boolean\n    /** Tab \u5206\u7EC4 - isShowTab \u4E3A true \u65F6\u751F\u6548 */\n    tabs?: GraphicTab[]\n    /** Tab \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left */\n    tabAlign?: Align\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n    descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n    titleAlign?: 'center' | 'left'\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const Tag = configuration?.descriptionTag || 'h3'\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  const Container: React.ElementType = data?.href ? 'a' : 'div'\n  const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className={cn('rounded-box absolute inset-0 overflow-hidden')}>\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title || data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"rounded-card block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n              <span className=\"sr-only\">{data?.title || data?.description}</span>\n            </a>\n          ) : (\n            <div className=\"rounded-card block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={\n                  data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n                }\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n            </div>\n          )}\n          <Container\n            {...containerProps}\n            className={cn('laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4', {\n              'bg-gradient-to-b from-transparent to-black/80': data?.showBottomGradient && data?.theme === 'dark',\n              'bg-gradient-to-b from-transparent to-white/80': data?.showBottomGradient && data?.theme !== 'dark',\n            })}\n          >\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as={Tag}\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <Tag\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <Text\n                          as=\"div\"\n                          html={tooltip.text}\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        />,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title || data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </Container>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicSwiper = ({ items = [], sharedConfig }: { items?: GraphicType[]; sharedConfig: Record<string, any> }) => {\n  const handleSwiperShow = (width?: number) => {\n    const isShow = items.length > 3\n    const isMobile = items.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : items.length\n      case 1024:\n        return isShow ? 3 : items.length\n      case 768:\n        if (items.length === 1) return 1\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if (items.length === 1) return 1\n        return 1.2\n    }\n  }\n\n  return (\n    <SwiperBox\n      id=\"Graphic\"\n      className={cn('!overflow-visible')}\n      data={{\n        list: items,\n        configuration: {\n          ...sharedConfig,\n          num: items.length,\n        },\n      }}\n      Slide={Item}\n      breakpoints={{\n        0: {\n          spaceBetween: 12,\n          freeMode: false,\n          slidesPerView: 1,\n        },\n        374: {\n          spaceBetween: 12,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(),\n        },\n        768: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(768),\n        },\n        1024: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(1024),\n        },\n        1440: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(1440),\n        },\n      }}\n    />\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const isShowTab = data?.isShowTab ?? false\n  const tabs = data?.tabs\n  const tabAlign = data?.tabAlign ?? 'left'\n  const [activeTab, setActiveTab] = useState(tabs?.[0]?.id ?? '')\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  const sharedConfig = {\n    itemShape: data?.itemShape,\n    descriptionTag: data?.descriptionTag,\n    locale,\n    onVideoPlayBtnClick: (_: number, item: GraphicType) => {\n      setVisible(true)\n      if (item?.isYouTube) {\n        setYouTubeId?.(item?.youtubeId || '')\n      } else {\n        setVideoUrl?.(item?.video?.url || '')\n        setMobileVideoUrl?.(item?.mobileVideo?.url || '')\n      }\n    },\n    onIconClick: (item: GraphicType) => {\n      setTextVisible(true)\n      setCurrentItem(item)\n    },\n  }\n\n  const renderModals = () => (\n    <>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </>\n  )\n\n  if (!isShowTab || !tabs || tabs.length === 0) {\n    return (\n      <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n        <div className=\"graphic-box\">\n          {data?.title && <Title data={{ title: data.title, align: data?.titleAlign ?? 'left' }} />}\n          <GraphicSwiper items={data?.items} sharedConfig={sharedConfig} />\n        </div>\n        {renderModals()}\n      </div>\n    )\n  }\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      {data?.title && <Title data={{ title: data.title, align: data?.titleAlign ?? 'left' }} />}\n      <Tabs value={activeTab} onValueChange={setActiveTab} align={tabAlign}>\n        <div className=\"mb-[24px]\">\n          <TabsList>\n            {tabs.map(tab => (\n              <TabsTrigger key={tab.id} value={tab.id}>\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </div>\n        {tabs.map(tab => (\n          <TabsContent key={tab.id} value={tab.id}>\n            <GraphicSwiper items={tab.items} sharedConfig={sharedConfig} />\n          </TabsContent>\n        ))}\n      </Tabs>\n      {renderModals()}\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
+  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_react_dom", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_css", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "Tag", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "GraphicSwiper", "items", "sharedConfig", "handleSwiperShow", "width", "isShow", "isMobile", "SwiperBox", "Graphic", "React", "className", "rest", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "isShowTab", "tabs", "tabAlign", "activeTab", "setActiveTab", "_", "item", "renderModals", "Title", "tab"]
 }

package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.d.ts

@@ -3,7 +3,10 @@ import type { GraphicOverlayProps, Item } from './types';
 declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
     data: {
         shape?: import("../..").Shape;
-        items: ({
+        isShowTab?: boolean;
+        tabs?: import("./types").GraphicOverlayTab[];
+        tabAlign?: import("../..").Align;
+        items?: ({
             width?: "full" | "half" | "one-third";
         } & Item)[];
     };

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

@@ -1,2 +1,2 @@
-"use strict";var D=Object.create;var B=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var q=(a,t)=>{for(var s in t)B(a,s,{get:t[s],enumerable:!0})},z=(a,t,s,w)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of A(t))!Y.call(a,i)&&i!==s&&B(a,i,{get:()=>t[i],enumerable:!(w=H(t,i))||w.enumerable});return a};var M=(a,t,s)=>(s=a!=null?D(Q(a)):{},z(t||!a||!a.__esModule?B(s,"default",{value:a,enumerable:!0}):s,a)),Z=a=>z(B({},"__esModule",{value:!0}),a);var J={};q(J,{default:()=>F});module.exports=Z(J);var e=require("react/jsx-runtime"),o=M(require("react")),O=require("react-responsive"),S=require("../../shared/Styles.js"),P=M(require("../../components/picture.js")),V=M(require("../../components/button.js")),I=require("../../components/heading.js"),U=require("../VideoModal/index.js"),p=require("../../helpers/utils.js"),R=M(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),E=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),_=require("../AiuiProvider/index.js");const b="image",v="p1_banner",j=({data:a,configuration:t,jIndex:s})=>{const[w,i]=(0,o.useState)(!1),g=(0,O.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,o.useRef)(null),x=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,E.useExposure)(m,{componentType:b,componentName:v,position:s,componentTitle:a.title,componentDescription:a.description,navigation:t?.activeTab}),(0,o.useEffect)(()=>{i(g)},[g]);const{theme:k="light",title:r,description:n,imageUrl:l,primaryButton:u,secondaryButton:h,imageMobileUrl:y,blockLink:f,video:c,youtubeId:d,isYouTube:$}=a,N="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,p.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",x(),{"rounded-box":!0,"aiui-dark":k==="dark","h-[400px]":w},"text-info-primary"),ref:m,children:[f&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(f||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${n}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(l?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:l?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),(0,L.isVideo)(y?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:y?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{source:y?.url||l?.url,alt:y?.alt||l?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,p.cn)("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(I.Heading,{size:3,as:"h3",className:"item-title",html:r}),(0,e.jsx)(I.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:n})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[h&&h.text&&(0,e.jsxs)(V.default,{"aria-label":r??n,className:(0,p.cn)(N,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(h.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${n}#${h?.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:[h.text,(0,e.jsx)("span",{className:"sr-only",children:r??n})]}),u&&u.text&&(0,e.jsx)(V.default,{"aria-label":r??n,className:(0,p.cn)(N,"link-right pointer-events-auto"),variant:"primary",as:"a",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(u.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${n}#${u.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:u.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(c?.url||d)&&(0,e.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(c?.url||d,$)},className:"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:k==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},G=o.default.forwardRef((a,t)=>{const{data:s,className:w,...i}=a,{shape:g,items:m=[]}=s,[x,k]=(0,o.useState)(!1),[r,n]=(0,o.useState)(""),[l,u]=(0,o.useState)(""),{locale:h="us"}=(0,_.useAiuiContext)(),y=(c,d)=>{k(!0),d?u?.(c||""):n?.(c||"")},f=c=>{const d=m?.length,$=d>3,N=d>2,C=d>1;switch(!0){case c>=1440:case c>=1024:return $?3:d;case c>=768:return $||N?2.3:C?2:1;default:return C?1.2:1}};return(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,p.cn)("graphicOverlayBlock text-info-primary ",w),children:[m&&m.length>0?(0,e.jsx)(R.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m||[],configuration:{shape:g,num:m.length,locale:h,onVideoPlayBtnClick:y}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}}):null,x&&(0,e.jsx)(U.VideoModal,{visible:x,youTubeId:l,videoUrl:r,onCloseModal:()=>k(!1)})]})});G.displayName="GraphicOverlayBlock";var F=(0,S.withLayout)(G);
+"use strict";var Q=Object.create;var M=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,t)=>{for(var s in t)M(a,s,{get:t[s],enumerable:!0})},G=(a,t,s,h)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Z(t))!F.call(a,i)&&i!==s&&M(a,i,{get:()=>t[i],enumerable:!(h=q(t,i))||h.enumerable});return a};var P=(a,t,s)=>(s=a!=null?Q(j(a)):{},G(t||!a||!a.__esModule?M(s,"default",{value:a,enumerable:!0}):s,a)),K=a=>G(M({},"__esModule",{value:!0}),a);var ee={};J(ee,{default:()=>X});module.exports=K(ee);var e=require("react/jsx-runtime"),p=P(require("react")),R=require("react-responsive"),A=require("../../shared/Styles.js"),C=P(require("../../components/picture.js")),O=P(require("../../components/button.js")),I=require("../../components/heading.js"),v=require("../../components/tabs.js"),E=require("../VideoModal/index.js"),d=require("../../helpers/utils.js"),_=P(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),D=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js"),H=require("../AiuiProvider/index.js");const y="image",w="p1_banner",W=({data:a,configuration:t,jIndex:s})=>{const[h,i]=(0,p.useState)(!1),m=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),u=(0,p.useRef)(null),b=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,D.useExposure)(u,{componentType:y,componentName:w,position:s,componentTitle:a.title,componentDescription:a.description,navigation:t?.activeTab}),(0,p.useEffect)(()=>{i(m)},[m]);const{theme:r="light",title:n,description:o,imageUrl:c,primaryButton:f,secondaryButton:g,imageMobileUrl:k,blockLink:T,video:$,youtubeId:N,isYouTube:B}=a,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,d.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",b(),{"rounded-box":!0,"aiui-dark":r==="dark","h-[400px]":h},"text-info-primary"),ref:u,children:[T&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,V.trackUrlRef)((0,d.getLocalizedPath)(T||"",t?.locale||"us"),`${y}_${w}`),"data-headless-type-name":`${y}#${w}`,"data-headless-title-desc-button":`${n}#${o}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(c?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:c?.url,type:"video/mp4"})}):(0,e.jsx)(C.default,{source:c?.url,alt:c?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${c?.width}/${c?.height}`}}),(0,L.isVideo)(k?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:k?.url,type:"video/mp4"})}):(0,e.jsx)(C.default,{source:k?.url||c?.url,alt:k?.alt||c?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,d.cn)("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(I.Heading,{size:3,as:"h3",className:"item-title",html:n}),(0,e.jsx)(I.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",html:o})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[g&&g.text&&(0,e.jsxs)(O.default,{"aria-label":n??o,className:(0,d.cn)(x,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:(0,V.trackUrlRef)((0,d.getLocalizedPath)(g.link||"",t?.locale||"us"),`${y}_${w}`),"data-headless-type-name":`${y}#${w}`,"data-headless-title-desc-button":`${n}#${o}#${g?.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:[g.text,(0,e.jsx)("span",{className:"sr-only",children:n??o})]}),f&&f.text&&(0,e.jsx)(O.default,{"aria-label":n??o,className:(0,d.cn)(x,"link-right pointer-events-auto"),variant:"primary",as:"a",href:(0,V.trackUrlRef)((0,d.getLocalizedPath)(f.link||"",t?.locale||"us"),`${y}_${w}`),"data-headless-type-name":`${y}#${w}`,"data-headless-title-desc-button":`${n}#${o}#${f.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:f.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:($?.url||N)&&(0,e.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.($?.url||N,B)},className:"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:r==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},z=({items:a=[],shape:t,locale:s,activeTab:h,onVideoPlayBtnClick:i})=>{const m=u=>{const b=a?.length,r=b>3,n=b>2,o=b>1;switch(!0){case u>=1440:case u>=1024:return r?3:b;case u>=768:return r||n?2.3:o?2:1;default:return o?1.2:1}};return(0,e.jsx)(_.default,{className:"!overflow-visible",id:"GraphicOverlaySwiper",data:{list:a||[],configuration:{shape:t,num:a.length,locale:s,activeTab:h,onVideoPlayBtnClick:i}},Slide:W,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:m(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:m(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:m(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:m(1440)}}})},U=p.default.forwardRef((a,t)=>{const{data:s,className:h,...i}=a,{shape:m,items:u=[],isShowTab:b=!1,tabs:r,tabAlign:n="left"}=s,[o,c]=(0,p.useState)(!1),[f,g]=(0,p.useState)(""),[k,T]=(0,p.useState)(""),[$,N]=(0,p.useState)(r?.[0]?.id??""),{locale:B="us"}=(0,H.useAiuiContext)(),x=(l,Y)=>{c(!0),Y?T?.(l||""):g?.(l||"")},S=()=>(0,e.jsx)(E.VideoModal,{visible:o,youTubeId:k,videoUrl:f,onCloseModal:()=>c(!1)});return!b||!r||r.length===0?(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,d.cn)("graphicOverlayBlock text-info-primary ",h),children:[u&&u.length>0?(0,e.jsx)(z,{items:u,shape:m,locale:B,onVideoPlayBtnClick:x}):null,o&&S()]}):(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,d.cn)("graphicOverlayBlock text-info-primary ",h),children:[(0,e.jsxs)(v.Tabs,{value:$,onValueChange:N,align:n,children:[(0,e.jsx)("div",{className:"mb-6",children:(0,e.jsx)(v.TabsList,{children:r.map(l=>(0,e.jsx)(v.TabsTrigger,{value:l.id,children:l.label},l.id))})}),r.map(l=>(0,e.jsx)(v.TabsContent,{value:l.id,children:l.items&&l.items.length>0?(0,e.jsx)(z,{items:l.items,shape:m,locale:B,activeTab:l.id,onVideoPlayBtnClick:x}):null},l.id))]}),o&&S()]})});U.displayName="GraphicOverlayBlock";var X=(0,A.withLayout)(U);
 //# sourceMappingURL=GraphicOverlay.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-box': true,\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left pointer-events-auto')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right pointer-events-auto')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n            >\n              <svg\n                width=\"12\"\n                height=\"14\"\n                viewBox=\"0 0 12 14\"\n                fill={theme === 'dark' ? 'black' : 'white'}\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M12 7L0 14L0 0L12 7Z\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [] } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: {\n              shape: shape,\n              num: items.length,\n              locale,\n              onVideoPlayBtnClick: handleVideoPlayBtnClick,\n            },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
-  "mappings": "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",
-  "names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-box': true,\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left pointer-events-auto')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right pointer-events-auto')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12  hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n            >\n              <svg\n                width=\"12\"\n                height=\"14\"\n                viewBox=\"0 0 12 14\"\n                fill={theme === 'dark' ? 'black' : 'white'}\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M12 7L0 14L0 0L12 7Z\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlaySwiper = ({\n  items = [],\n  shape,\n  locale,\n  activeTab,\n  onVideoPlayBtnClick,\n}: {\n  items?: Item[]\n  shape?: string\n  locale: string\n  activeTab?: string\n  onVideoPlayBtnClick: (url: string, isYouTube: boolean) => void\n}) => {\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <SwiperBox\n      className=\"!overflow-visible\"\n      id={'GraphicOverlaySwiper'}\n      data={{\n        list: items || [],\n        configuration: {\n          shape: shape,\n          num: items.length,\n          locale,\n          activeTab,\n          onVideoPlayBtnClick,\n        },\n      }}\n      Slide={ItemBlock}\n      breakpoints={{\n        0: {\n          spaceBetween: 12,\n          freeMode: false,\n          slidesPerView: 1,\n        },\n        374: {\n          spaceBetween: 12,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(374),\n        },\n        768: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(768),\n        },\n        1024: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(1024),\n        },\n        1440: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: handleSwiperShow(1440),\n        },\n      }}\n    />\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [], isShowTab = false, tabs, tabAlign = 'left' } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [activeTab, setActiveTab] = useState<string>(tabs?.[0]?.id ?? '')\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const renderModal = () => (\n    <VideoModal visible={visible} youTubeId={youTubeId} videoUrl={videoUrl} onCloseModal={() => setVisible(false)} />\n  )\n\n  if (!isShowTab || !tabs || tabs.length === 0) {\n    return (\n      <section\n        data-ui-component-id=\"GraphicOverlay\"\n        ref={ref}\n        {...rest}\n        className={cn('graphicOverlayBlock text-info-primary ', className)}\n      >\n        {items && items.length > 0 ? (\n          <GraphicOverlaySwiper\n            items={items}\n            shape={shape}\n            locale={locale}\n            onVideoPlayBtnClick={handleVideoPlayBtnClick}\n          />\n        ) : null}\n        {visible && renderModal()}\n      </section>\n    )\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      <Tabs value={activeTab} onValueChange={setActiveTab} align={tabAlign}>\n        <div className=\"mb-6\">\n          <TabsList>\n            {tabs.map(tab => (\n              <TabsTrigger key={tab.id} value={tab.id}>\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </div>\n        {tabs.map(tab => (\n          <TabsContent key={tab.id} value={tab.id}>\n            {tab.items && tab.items.length > 0 ? (\n              <GraphicOverlaySwiper\n                items={tab.items}\n                shape={shape}\n                locale={locale}\n                activeTab={tab.id}\n                onVideoPlayBtnClick={handleVideoPlayBtnClick}\n              />\n            ) : null}\n          </TabsContent>\n        ))}\n      </Tabs>\n      {visible && renderModal()}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_tabs", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlaySwiper", "items", "shape", "locale", "activeTab", "onVideoPlayBtnClick", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox", "GraphicOverlay", "React", "props", "data", "className", "rest", "isShowTab", "tabs", "tabAlign", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "setActiveTab", "handleVideoPlayBtnClick", "url", "renderModal", "tab"]
 }

package/dist/cjs/biz-components/GraphicOverlay/types.d.ts

@@ -1,4 +1,4 @@
-import type { Media, Shape, Theme } from '../../types/props';
+import type { Align, Media, Shape, Theme } from '../../types/props';
 export type Item = {
     theme?: Theme;
     title: string;
@@ -22,10 +22,23 @@ export type Item = {
     youtubeId?: string;
     isYouTube?: boolean;
 };
+export type GraphicOverlayTab = {
+    id: string;
+    label: string;
+    items: ({
+        width?: 'full' | 'half' | 'one-third';
+    } & Item)[];
+};
 export type GraphicOverlayProps = React.HTMLAttributes<HTMLElement> & {
     data: {
         shape?: Shape;
-        items: ({
+        /** 是否启用 Tab 切换，默认 false */
+        isShowTab?: boolean;
+        /** Tab 分组 - isShowTab 为 true 时生效 */
+        tabs?: GraphicOverlayTab[];
+        /** Tab 对齐方式，默认 left */
+        tabAlign?: Align;
+        items?: ({
             width?: 'full' | 'half' | 'one-third';
         } & Item)[];
     };

package/dist/cjs/biz-components/GraphicOverlay/types.js

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

package/dist/cjs/biz-components/GraphicOverlay/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/types.tsx"],
-  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n}\n\nexport type GraphicOverlayProps = React.HTMLAttributes<HTMLElement> & {\n  data: {\n    shape?: Shape\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n  }\n}\n"],
+  "sourcesContent": ["import type { Align, Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n}\n\nexport type GraphicOverlayTab = {\n  id: string\n  label: string\n  items: ({\n    width?: 'full' | 'half' | 'one-third'\n  } & Item)[]\n}\n\nexport type GraphicOverlayProps = React.HTMLAttributes<HTMLElement> & {\n  data: {\n    shape?: Shape\n    /** \u662F\u5426\u542F\u7528 Tab \u5207\u6362\uFF0C\u9ED8\u8BA4 false */\n    isShowTab?: boolean\n    /** Tab \u5206\u7EC4 - isShowTab \u4E3A true \u65F6\u751F\u6548 */\n    tabs?: GraphicOverlayTab[]\n    /** Tab \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left */\n    tabAlign?: Align\n    items?: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,11 +1,11 @@
-"use strict";"use client";var U=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,s)=>{for(var a in s)U(t,a,{get:s[a],enumerable:!0})},_=(t,s,a,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of R(s))!H.call(t,i)&&i!==a&&U(t,i,{get:()=>s[i],enumerable:!(m=j(s,i))||m.enumerable});return t};var q=t=>_(U({},"__esModule",{value:!0}),t);var G={};V(G,{default:()=>Q});module.exports=q(G);var e=require("react/jsx-runtime"),o=require("react"),D=require("react-responsive"),d=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),r=require("../../components/index.js"),f=require("../../hooks/useExposure.js"),w=require("swiper/react"),F=require("swiper/modules"),Y=require("swiper/css");const S="media",A="media_scene_switcher",v=3e3,$=({data:t,configuration:s,theme:a})=>{const m=(0,o.useRef)(null),i=s?.isActive||!1;return(0,f.useExposure)(m,{componentType:S,componentName:A,componentTitle:t?.title,position:(s?.index??0)+1}),(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",i?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&a==="light"}),onClick:()=>s?.onItemClick?.(s?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&(0,e.jsx)(r.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",a==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":a==="dark"&&i}),children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},O=({data:t,configuration:s,theme:a})=>{const m=(0,o.useRef)(null),i=s?.isActive||!1,p=(0,D.useMediaQuery)({query:"(max-width: 768px)"});(0,f.useExposure)(m,{componentType:S,componentName:A,componentTitle:t?.title,position:(s?.index??0)+1});const n=p&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,x=p&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,b=x||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:m,className:(0,d.cn)("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden",{"aiui-dark":a==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:n?(0,e.jsx)("video",{src:n,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:b,className:"size-full object-cover"}):x?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:x,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,d.cn)("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":i,"bg-[#EAEAEC] text-[1D1D1F]":i&&a==="light"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(r.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&i&&(0,e.jsx)(r.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-3 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",a==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":a==="dark"&&i}),children:(0,e.jsx)(r.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":i}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:i?`progress-bar ${v}ms ease-out`:"none"}})]})},M=(0,o.forwardRef)(({className:t="",data:s,id:a},m)=>{const{title:i,subtitle:p,items:n=[],theme:x="light",layout:b,titleIcon:u}=s||{},[g,N]=(0,o.useState)(0),[T,B]=(0,o.useState)(0),k=(0,o.useRef)(null),h=(0,o.useRef)(0),z=(0,D.useMediaQuery)({query:"(max-width: 1023px)"});(0,o.useImperativeHandle)(m,()=>k.current),(0,f.useExposure)(k,{componentType:S,componentName:A,componentTitle:i}),(0,o.useEffect)(()=>{if(!(z||n.length===0))return h.current=window.setInterval(()=>{N(l=>(l+1)%n.length)},v),()=>{h.current&&window.clearInterval(h.current)}},[z,n.length]);const P=l=>{N(l),h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{N(c=>(c+1)%n.length)},v)},y=n[g],J=y?.videoUrl?.url,W=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
-          @keyframes progress-bar {
-            from {
-              transform: translate3d(-100%, 0, 0);
-            }
-            to {
-              transform: translate3d(0, 0, 0);
-            }
-          }
-        `}),(0,e.jsxs)("section",{id:a,ref:k,className:(0,d.cn)("media-scene-switcher text-info-primary w-full",{"aiui-dark":x==="dark"},t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":b==="right"}),children:n.map((l,c)=>{const E=l?.videoUrl?.url,I=l?.imageUrl?.url,L=I||l?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,d.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":c===g}),children:E?(0,e.jsx)("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?(0,e.jsx)(r.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:l?.title||""}):null},l.id||c)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(r.Heading,{as:"h3",html:i,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),u&&(0,e.jsx)(r.Picture,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:n.map((l,c)=>(0,e.jsx)($,{data:l,configuration:{index:c,isActive:c===g,onItemClick:P},theme:x},l.id||c))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[i&&(0,e.jsx)(r.Heading,{as:"h2",html:i,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),u&&(0,e.jsx)(r.Picture,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),p&&(0,e.jsx)(r.Text,{as:"span",size:4,html:p,className:"media-scene-switcher-subtitle text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(w.Swiper,{onSlideChange:l=>B(l.realIndex),initialSlide:0,modules:[F.Autoplay],loop:n.length>1,autoplay:n.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:n.map((l,c)=>(0,e.jsx)(w.SwiperSlide,{className:"!h-auto !w-[296px] max-w-full",children:(0,e.jsx)(O,{data:l,configuration:{index:c,isActive:c===T},theme:x})},l.id||c))})})]})]})]})});M.displayName="MediaSceneSwitcher";var Q=(0,C.withLayout)(M,{style:"overflow: hidden;"});
+"use strict";"use client";var T=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var q=(t,i)=>{for(var n in i)T(t,n,{get:i[n],enumerable:!0})},O=(t,i,n,d)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of V(i))!_.call(t,l)&&l!==n&&T(t,l,{get:()=>i[l],enumerable:!(d=j(i,l))||d.enumerable});return t};var $=t=>O(T({},"__esModule",{value:!0}),t);var Y={};q(Y,{default:()=>Q});module.exports=$(Y);var e=require("react/jsx-runtime"),a=require("react"),E=require("react-responsive"),u=require("../../helpers/utils.js"),P=require("../../shared/Styles.js"),s=require("../../components/index.js"),k=require("../../hooks/useExposure.js"),y=require("swiper/react"),R=require("swiper/modules"),ee=require("swiper/css");const U="media",M="media_scene_switcher",N=3e3,G=({data:t,configuration:i,theme:n})=>{const d=(0,a.useRef)(null),l=i?.isActive||!1;return(0,k.useExposure)(d,{componentType:U,componentName:M,componentTitle:t?.title,position:(i?.index??0)+1}),(0,e.jsxs)("div",{ref:d,className:(0,u.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","relative text-[#6D6D6F]",l?"opacity-100":"opacity-60",{"bg-[#1D1D1F] text-white":l,"bg-[#EAEAEC] text-[#1D1D1F]":l&&n==="light"}),onClick:()=>i?.onItemClick?.(i?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(s.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&l&&(0,e.jsx)(s.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",n==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":n==="dark"&&l}),children:(0,e.jsx)(s.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full",{"media-scene-switcher-progress-active":l}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:l?`progress-bar ${N}ms ease-out`:"none"}})]})},K=({data:t,configuration:i,theme:n})=>{const d=(0,a.useRef)(null),l=i?.isActive||!1,c=(0,E.useMediaQuery)({query:"(max-width: 768px)"});(0,k.useExposure)(d,{componentType:U,componentName:M,componentTitle:t?.title,position:(i?.index??0)+1});const v=c&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,r=c&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,h=r||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:d,className:(0,u.cn)("media-scene-switcher-mobile-item rounded-box flex max-w-full flex-col overflow-hidden",{"aiui-dark":n==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media aspect-w-[296] aspect-h-[256] relative w-full shrink-0 overflow-hidden",children:v?(0,e.jsx)("video",{src:v,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:h,className:"size-full object-cover"}):r?(0,e.jsx)(s.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:r,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,u.cn)("media-scene-switcher-mobile-bottom bg-container-primary text-info-primary flex flex-1 items-start justify-between gap-[8px] p-[16px]"),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3",children:(0,e.jsx)(s.Heading,{as:"h6",size:2,html:t?.title})}),t?.description&&(0,e.jsx)(s.Text,{size:2,className:"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-2 text-sm font-bold",html:t.description})]}),(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",n==="dark"?"border-[#B5B7BB]":"border-[#4A4C56]",{"!border-[#F5F6F7]":n==="dark"&&l}),children:(0,e.jsx)(s.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":l}),style:{transform:"translate3d(-100%, 0, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:l?`progress-bar ${N}ms ease-out`:"none"}})]})},A=(0,a.forwardRef)(({sectionData:t,id:i,className:n="",tabId:d},l)=>{const{title:c,subtitle:v,items:r=[],theme:h="light",layout:x,titleIcon:f}=t,[g,b]=(0,a.useState)(0),[m,B]=(0,a.useState)(0),D=(0,a.useRef)(null),w=(0,a.useRef)(0),z=(0,E.useMediaQuery)({query:"(max-width: 1023px)"});(0,a.useImperativeHandle)(l,()=>D.current),(0,a.useEffect)(()=>{if(!(z||r.length===0))return w.current=window.setInterval(()=>{b(o=>(o+1)%r.length)},N),()=>{w.current&&window.clearInterval(w.current)}},[z,r.length]);const F=o=>{b(o),w.current&&window.clearInterval(w.current),w.current=window.setInterval(()=>{b(p=>(p+1)%r.length)},N)},S=r[g],J=S?.videoUrl?.url,X=S?.imageUrl?.url||S?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("section",{id:i,ref:D,className:(0,u.cn)("media-scene-switcher text-info-primary w-full",{"aiui-dark":h==="dark"},n),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":x==="right"}),children:r.map((o,p)=>{const C=o?.videoUrl?.url,I=o?.imageUrl?.url,H=I||o?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,u.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":p===g}),children:C?(0,e.jsx)("video",{src:C,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:H,className:"size-full object-cover"}):I?(0,e.jsx)(s.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:o?.title||""}):null},o.id||p)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[c&&(0,e.jsx)(s.Heading,{as:"h3",html:c,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),f&&(0,e.jsx)(s.Picture,{source:f.url,alt:f.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),v&&(0,e.jsx)(s.Text,{as:"span",size:4,html:v,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:r.map((o,p)=>(0,e.jsx)(G,{data:o,configuration:{index:p,isActive:p===g,onItemClick:F},theme:h},o.id||p))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-1",children:[c&&(0,e.jsx)(s.Heading,{as:"h2",html:c,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),f&&(0,e.jsx)(s.Picture,{source:f.url,alt:f.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),v&&(0,e.jsx)(s.Text,{as:"span",size:4,html:v,className:"media-scene-switcher-subtitle text-[14px]"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(y.Swiper,{onSlideChange:o=>B(o.realIndex),initialSlide:0,modules:[R.Autoplay],loop:r.length>1,autoplay:r.length>1?{delay:N,disableOnInteraction:!1}:!1,spaceBetween:12,breakpoints:{0:{slidesPerView:1},374:{slidesPerView:1.2},768:{slidesPerView:2.3}},watchSlidesProgress:!0,className:"w-full !overflow-visible",children:r.map((o,p)=>(0,e.jsx)(y.SwiperSlide,{className:"!h-auto max-w-full",children:(0,e.jsx)(K,{data:o,configuration:{index:p,isActive:p===m},theme:h})},o.id||p))},d)})]})]})});A.displayName="SceneSection";const L=(0,a.forwardRef)(({className:t="",data:i,id:n},d)=>{const l=i?.isShowTab??!1,c=i?.tabs,v=i?.tabAlign??"left",[r,h]=(0,a.useState)(c?.[0]?.id??""),x=(0,a.useRef)(null);(0,a.useImperativeHandle)(d,()=>x.current);const g=c?.find(m=>m.id===r)??i;(0,k.useExposure)(x,{componentType:U,componentName:M,componentTitle:g?.title});const b=`
+    @keyframes progress-bar {
+      from {
+        transform: translate3d(-100%, 0, 0);
+      }
+      to {
+        transform: translate3d(0, 0, 0);
+      }
+    }
+  `;return!l||!c||c.length===0?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:b}),(0,e.jsx)(A,{ref:x,sectionData:i,id:n,className:t})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:b}),(0,e.jsx)("div",{ref:x,children:(0,e.jsxs)(s.Tabs,{value:r,onValueChange:h,align:v,children:[(0,e.jsx)("div",{className:"media-scene-switcher-tabs mb-6",children:(0,e.jsx)(s.TabsList,{children:c.map(m=>(0,e.jsx)(s.TabsTrigger,{value:m.id,children:m.label},m.id))})}),c.map(m=>(0,e.jsx)(s.TabsContent,{value:m.id,children:(0,e.jsx)(A,{sectionData:m,className:t,tabId:m.id})},m.id))]})})]})});L.displayName="MediaSceneSwitcher";var Q=(0,P.withLayout)(L,{style:"overflow: hidden;"});
 //# sourceMappingURL=MediaSceneSwitcher.js.map