@anker-in/headless-ui 1.3.52 → 1.3.54

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'relative text-[#6D6D6F]',\n        isActive ? 'opacity-100' : 'opacity-60',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <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]\">\n        <div>\n          <div className=\"media-scene-switcher-item-title flex-1\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && isActive && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n\n        <div\n          className={cn(\n            'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] max-w-full flex-col overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n          'text-[#6D6D6F]',\n          {\n            'bg-[#1D1D1F] text-white': isActive,\n            'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n          }\n        )}\n      >\n        <div>\n          <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && isActive && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-3 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n        <div\n          className={cn(\n            'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\n  const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = data || {}\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const intervalRef = useRef<number>(0)\n  const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // Auto-play functionality for desktop\n  useEffect(() => {\n    if (isMobile || items.length === 0) return\n\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n\n    return () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n    }\n  }, [isMobile, items.length])\n\n  const handleItemClick = (index: number) => {\n    setCurrentIndex(index)\n    if (intervalRef.current) {\n      window.clearInterval(intervalRef.current)\n    }\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n  }\n\n  const currentItem = items[currentIndex]\n  const videoUrl = currentItem?.videoUrl?.url\n  const imageUrl = currentItem?.imageUrl?.url\n  const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <>\n      <style>{`\n          @keyframes progress-bar {\n            from {\n              transform: translate3d(-100%, 0, 0);\n            }\n            to {\n              transform: translate3d(0, 0, 0);\n            }\n          }\n        `}</style>\n      <section\n        id={id}\n        ref={innerRef}\n        className={cn(\n          'media-scene-switcher text-info-primary w-full',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className\n        )}\n      >\n        {/* Desktop Layout */}\n        <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n          <div\n            className={cn(\n              'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n              {\n                'order-1': layout === 'right',\n              }\n            )}\n          >\n            {items.map((item, index) => {\n              const itemVideoUrl = item?.videoUrl?.url\n              const itemImageUrl = item?.imageUrl?.url\n              const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n              return (\n                <div\n                  key={item.id || index}\n                  className={cn(\n                    'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                    {\n                      'inline-block': index === currentIndex,\n                    }\n                  )}\n                >\n                  {itemVideoUrl ? (\n                    <video\n                      src={itemVideoUrl}\n                      playsInline\n                      autoPlay\n                      loop\n                      muted\n                      poster={itemPosterUrl}\n                      className=\"size-full object-cover\"\n                    />\n                  ) : itemImageUrl ? (\n                    <Picture\n                      className=\"size-full\"\n                      imgClassName=\"size-full object-cover\"\n                      source={itemImageUrl}\n                      alt={item?.title || ''}\n                    />\n                  ) : null}\n                </div>\n              )\n            })}\n          </div>\n\n          <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n            <div className=\"media-scene-switcher-header flex flex-col\">\n              <div className=\"desktop:gap-2 flex items-center gap-1\">\n                {title && (\n                  <Heading\n                    as=\"h3\"\n                    html={title}\n                    size={4}\n                    className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                  />\n                )}\n                {titleIcon && (\n                  <Picture\n                    source={titleIcon.url}\n                    alt={titleIcon.alt || 'title icon'}\n                    className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                    imgClassName=\"!w-auto h-full\"\n                  />\n                )}\n              </div>\n\n              {subtitle && (\n                <Text\n                  as=\"span\"\n                  size={4}\n                  html={subtitle}\n                  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]\"\n                />\n              )}\n            </div>\n\n            <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n              {items.map((item, index) => (\n                <DesktopItem\n                  key={item.id || index}\n                  data={item}\n                  configuration={{\n                    index,\n                    isActive: index === currentIndex,\n                    onItemClick: handleItemClick,\n                  }}\n                  theme={theme}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Mobile Layout */}\n        <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n          <div className=\"media-scene-switcher-mobile-header\">\n            <div className=\"desktop:gap-2 flex items-center gap-1\">\n              {title && (\n                <Heading\n                  as=\"h2\"\n                  html={title}\n                  size={2}\n                  className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]\"\n                />\n              )}\n              {titleIcon && (\n                <Picture\n                  source={titleIcon.url}\n                  alt={titleIcon.alt || 'title icon'}\n                  className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                  imgClassName=\"!w-auto h-full\"\n                />\n              )}\n            </div>\n            {subtitle && (\n              <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n            )}\n          </div>\n\n          <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n            <Swiper\n              onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n              initialSlide={0}\n              modules={[Autoplay]}\n              loop={items.length > 1}\n              autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n              spaceBetween={12}\n              slidesPerView=\"auto\"\n              watchSlidesProgress={true}\n              className=\"w-full !overflow-visible\"\n            >\n              {items.map((item, index) => (\n                <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px] max-w-full\">\n                  <MobileItem\n                    data={item}\n                    configuration={{\n                      index,\n                      isActive: index === activeIndex,\n                    }}\n                    theme={theme}\n                  />\n                </SwiperSlide>\n              ))}\n            </Swiper>\n          </div>\n        </div>\n      </section>\n    </>\n  )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher, { style: 'overflow: hidden;' })\n"],
-  "mappings": "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",
-  "names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "import_useExposure", "import_modules", "import_css", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture, Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme, Media } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n  theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n        'relative text-[#6D6D6F]',\n        isActive ? 'opacity-100' : 'opacity-60',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n          'bg-[#EAEAEC] text-[#1D1D1F]': isActive && theme === 'light',\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <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]\">\n        <div>\n          <div className=\"media-scene-switcher-item-title flex-1\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && isActive && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n\n        <div\n          className={cn(\n            'media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress absolute bottom-0 left-0 h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className={cn('media-scene-switcher-mobile-item rounded-box flex max-w-full flex-col overflow-hidden', {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <div className=\"media-scene-switcher-mobile-media aspect-w-[296] aspect-h-[256] relative w-full shrink-0 overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          'media-scene-switcher-mobile-bottom bg-container-primary text-info-primary flex flex-1 items-start justify-between gap-[8px] p-[16px]'\n        )}\n      >\n        <div>\n          <div className=\"media-scene-switcher-mobile-title line-clamp-3\">\n            <Heading as=\"h6\" size={2} html={data?.title} />\n          </div>\n          {data?.description && (\n            <Text\n              size={2}\n              className=\"media-scene-switcher-item-description tablet:text-base desktop:text-lg mt-1 line-clamp-2 text-sm font-bold\"\n              html={data.description}\n            />\n          )}\n        </div>\n        <div\n          className={cn(\n            'media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]',\n            theme === 'dark' ? 'border-[#B5B7BB]' : 'border-[#4A4C56]',\n            {\n              '!border-[#F5F6F7]': theme === 'dark' && isActive,\n            }\n          )}\n        >\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, 0, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\ninterface SceneSectionData {\n  title?: string\n  subtitle?: string\n  items?: MediaSceneSwitcherItem[]\n  theme?: Theme\n  layout?: 'left' | 'right'\n  titleIcon?: Media\n}\n\ninterface SceneSectionProps {\n  sectionData: SceneSectionData\n  id?: string\n  className?: string\n  tabId?: string\n}\n\nconst SceneSection = forwardRef<HTMLElement, SceneSectionProps>(({ sectionData, id, className = '', tabId }, ref) => {\n  const { title, subtitle, items = [], theme = 'light', layout, titleIcon } = sectionData\n  const [currentIndex, setCurrentIndex] = useState(0)\n  const [activeIndex, setActiveIndex] = useState(0)\n  const innerRef = useRef<HTMLElement>(null)\n  const intervalRef = useRef<number>(0)\n  const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLElement)\n\n  useEffect(() => {\n    if (isMobile || items.length === 0) return\n\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n\n    return () => {\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n    }\n  }, [isMobile, items.length])\n\n  const handleItemClick = (index: number) => {\n    setCurrentIndex(index)\n    if (intervalRef.current) {\n      window.clearInterval(intervalRef.current)\n    }\n    intervalRef.current = window.setInterval(() => {\n      setCurrentIndex(prev => (prev + 1) % items.length)\n    }, INTERVAL_TIME)\n  }\n\n  const currentItem = items[currentIndex]\n  const videoUrl = currentItem?.videoUrl?.url\n  const imageUrl = currentItem?.imageUrl?.url\n  const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <section\n      id={id}\n      ref={innerRef}\n      className={cn(\n        'media-scene-switcher text-info-primary w-full',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* Desktop Layout */}\n      <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n        <div\n          className={cn(\n            'media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden',\n            {\n              'order-1': layout === 'right',\n            }\n          )}\n        >\n          {items.map((item, index) => {\n            const itemVideoUrl = item?.videoUrl?.url\n            const itemImageUrl = item?.imageUrl?.url\n            const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n            return (\n              <div\n                key={item.id || index}\n                className={cn(\n                  'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n                  {\n                    'inline-block': index === currentIndex,\n                  }\n                )}\n              >\n                {itemVideoUrl ? (\n                  <video\n                    src={itemVideoUrl}\n                    playsInline\n                    autoPlay\n                    loop\n                    muted\n                    poster={itemPosterUrl}\n                    className=\"size-full object-cover\"\n                  />\n                ) : itemImageUrl ? (\n                  <Picture\n                    className=\"size-full\"\n                    imgClassName=\"size-full object-cover\"\n                    source={itemImageUrl}\n                    alt={item?.title || ''}\n                  />\n                ) : null}\n              </div>\n            )\n          })}\n        </div>\n\n        <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n          <div className=\"media-scene-switcher-header flex flex-col\">\n            <div className=\"desktop:gap-2 flex items-center gap-1\">\n              {title && (\n                <Heading\n                  as=\"h3\"\n                  html={title}\n                  size={4}\n                  className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n                />\n              )}\n              {titleIcon && (\n                <Picture\n                  source={titleIcon.url}\n                  alt={titleIcon.alt || 'title icon'}\n                  className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                  imgClassName=\"!w-auto h-full\"\n                />\n              )}\n            </div>\n\n            {subtitle && (\n              <Text\n                as=\"span\"\n                size={4}\n                html={subtitle}\n                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]\"\n              />\n            )}\n          </div>\n\n          <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n            {items.map((item, index) => (\n              <DesktopItem\n                key={item.id || index}\n                data={item}\n                configuration={{\n                  index,\n                  isActive: index === currentIndex,\n                  onItemClick: handleItemClick,\n                }}\n                theme={theme}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* Mobile Layout */}\n      <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n        <div className=\"media-scene-switcher-mobile-header\">\n          <div className=\"desktop:gap-2 flex items-center gap-1\">\n            {title && (\n              <Heading\n                as=\"h2\"\n                html={title}\n                size={2}\n                className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]\"\n              />\n            )}\n            {titleIcon && (\n              <Picture\n                source={titleIcon.url}\n                alt={titleIcon.alt || 'title icon'}\n                className=\"desktop:h-8 lg-desktop:h-10 h-6\"\n                imgClassName=\"!w-auto h-full\"\n              />\n            )}\n          </div>\n          {subtitle && (\n            <Text as=\"span\" size={4} html={subtitle} className=\"media-scene-switcher-subtitle text-[14px]\" />\n          )}\n        </div>\n\n        <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n          <Swiper\n            key={tabId}\n            onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n            initialSlide={0}\n            modules={[Autoplay]}\n            loop={items.length > 1}\n            autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n            spaceBetween={12}\n            breakpoints={{\n              0: { slidesPerView: 1 },\n              374: { slidesPerView: 1.2 },\n              768: { slidesPerView: 2.3 },\n            }}\n            watchSlidesProgress={true}\n            className=\"w-full !overflow-visible\"\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={item.id || index} className=\"!h-auto max-w-full\">\n                <MobileItem\n                  data={item}\n                  configuration={{\n                    index,\n                    isActive: index === activeIndex,\n                  }}\n                  theme={theme}\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nSceneSection.displayName = 'SceneSection'\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(({ className = '', data, id }, ref) => {\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  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const activeTabData = tabs?.find(t => t.id === activeTab)\n  const effectiveData = activeTabData ?? data\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: effectiveData?.title,\n  })\n\n  const PROGRESS_BAR_KEYFRAMES = `\n    @keyframes progress-bar {\n      from {\n        transform: translate3d(-100%, 0, 0);\n      }\n      to {\n        transform: translate3d(0, 0, 0);\n      }\n    }\n  `\n\n  if (!isShowTab || !tabs || tabs.length === 0) {\n    return (\n      <>\n        <style>{PROGRESS_BAR_KEYFRAMES}</style>\n        <SceneSection ref={innerRef as React.Ref<HTMLElement>} sectionData={data} id={id} className={className} />\n      </>\n    )\n  }\n\n  return (\n    <>\n      <style>{PROGRESS_BAR_KEYFRAMES}</style>\n      <div ref={innerRef}>\n        <Tabs value={activeTab} onValueChange={setActiveTab} align={tabAlign}>\n          <div className=\"media-scene-switcher-tabs 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              <SceneSection sectionData={tab} className={className} tabId={tab.id} />\n            </TabsContent>\n          ))}\n        </Tabs>\n      </div>\n    </>\n  )\n})\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher, { style: 'overflow: hidden;' })\n"],
+  "mappings": "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",
+  "names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "import_useExposure", "import_modules", "import_css", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "SceneSection", "sectionData", "id", "className", "tabId", "title", "subtitle", "items", "layout", "titleIcon", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher", "isShowTab", "tabs", "tabAlign", "activeTab", "setActiveTab", "effectiveData", "t", "PROGRESS_BAR_KEYFRAMES", "tab"]
 }

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

@@ -1,2 +1,2 @@
 export { default } from './MediaSceneSwitcher.js';
-export * from './types.js';
+export type { MediaSceneSwitcherItem, MediaSceneSwitcherTab, MediaSceneSwitcherProps } from './types.js';

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

@@ -1,2 +1,2 @@
-"use strict";var l=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(o,r)=>{for(var e in r)m(o,e,{get:r[e],enumerable:!0})},t=(o,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of b(r))!g.call(o,f)&&f!==e&&m(o,f,{get:()=>r[f],enumerable:!(a=u(r,f))||a.enumerable});return o},x=(o,r,e)=>(t(o,r,"default"),e&&t(e,r,"default")),i=(o,r,e)=>(e=o!=null?l(c(o)):{},t(r||!o||!o.__esModule?m(e,"default",{value:o,enumerable:!0}):e,o)),j=o=>t(m({},"__esModule",{value:!0}),o);var p={};h(p,{default:()=>d.default});module.exports=j(p);var d=i(require("./MediaSceneSwitcher.js"));x(p,require("./types.js"),module.exports);
+"use strict";var p=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var n=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},a=(e,t,r,S)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of f(t))!m.call(e,c)&&c!==r&&i(e,c,{get:()=>t[c],enumerable:!(S=d(t,c))||S.enumerable});return e};var s=(e,t,r)=>(r=e!=null?p(h(e)):{},a(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),w=e=>a(i({},"__esModule",{value:!0}),e);var M={};n(M,{default:()=>o.default});module.exports=w(M);var o=s(require("./MediaSceneSwitcher.js"));
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcher/index.ts"],
-  "sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport * from './types.js'\n"],
-  "mappings": "wmBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB,sCACxBC,EAAAJ,EAAc,sBADd",
-  "names": ["MediaSceneSwitcher_exports", "__export", "__toCommonJS", "import_MediaSceneSwitcher", "__reExport"]
+  "sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport type { MediaSceneSwitcherItem, MediaSceneSwitcherTab, MediaSceneSwitcherProps } from './types.js'\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
+  "names": ["MediaSceneSwitcher_exports", "__export", "__toCommonJS", "import_MediaSceneSwitcher"]
 }

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

@@ -1,4 +1,4 @@
-import type { ComponentCommonProps, Media, Theme } from '../../types/props.js';
+import type { Align, ComponentCommonProps, Media, Theme } from '../../types/props.js';
 export interface MediaSceneSwitcherItem {
     id: string;
     title: string;
@@ -9,12 +9,28 @@ export interface MediaSceneSwitcherItem {
     mobVideoUrl?: Media | null;
     mobImageUrl?: Media | null;
 }
+export interface MediaSceneSwitcherTab {
+    id: string;
+    label: string;
+    titleIcon?: Media;
+    title?: string;
+    subtitle?: string;
+    items: MediaSceneSwitcherItem[];
+    theme?: Theme;
+    layout?: 'left' | 'right';
+}
 export interface MediaSceneSwitcherProps extends ComponentCommonProps {
     data: {
+        /** 是否启用 Tab 切换，默认 false */
+        isShowTab?: boolean;
         titleIcon?: Media;
         title?: string;
         subtitle?: string;
         items?: MediaSceneSwitcherItem[];
+        /** Tab 分组 - isShowTab 为 true 时生效 */
+        tabs?: MediaSceneSwitcherTab[];
+        /** Tab 对齐方式，默认 left */
+        tabAlign?: Align;
         /** 主题，默认 light */
         theme?: Theme;
         layout?: 'left' | 'right';

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcher/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps, Media, Theme } from '../../types/props.js'\n\nexport interface MediaSceneSwitcherItem {\n  id: string\n  title: string\n  description?: string\n  tag?: string\n  videoUrl?: Media | null\n  imageUrl?: Media | null\n  mobVideoUrl?: Media | null\n  mobImageUrl?: Media | null\n}\n\nexport interface MediaSceneSwitcherProps extends ComponentCommonProps {\n  data: {\n    titleIcon?: Media\n    title?: string\n    subtitle?: string\n    items?: MediaSceneSwitcherItem[]\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n    layout?: 'left' | 'right'\n  }\n}\n"],
+  "sourcesContent": ["import type { Align, ComponentCommonProps, Media, Theme } from '../../types/props.js'\n\nexport interface MediaSceneSwitcherItem {\n  id: string\n  title: string\n  description?: string\n  tag?: string\n  videoUrl?: Media | null\n  imageUrl?: Media | null\n  mobVideoUrl?: Media | null\n  mobImageUrl?: Media | null\n}\n\nexport interface MediaSceneSwitcherTab {\n  id: string\n  label: string\n  titleIcon?: Media\n  title?: string\n  subtitle?: string\n  items: MediaSceneSwitcherItem[]\n  theme?: Theme\n  layout?: 'left' | 'right'\n}\n\nexport interface MediaSceneSwitcherProps extends ComponentCommonProps {\n  data: {\n    /** \u662F\u5426\u542F\u7528 Tab \u5207\u6362\uFF0C\u9ED8\u8BA4 false */\n    isShowTab?: boolean\n    titleIcon?: Media\n    title?: string\n    subtitle?: string\n    items?: MediaSceneSwitcherItem[]\n    /** Tab \u5206\u7EC4 - isShowTab \u4E3A true \u65F6\u751F\u6548 */\n    tabs?: MediaSceneSwitcherTab[]\n    /** Tab \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left */\n    tabAlign?: Align\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n    layout?: 'left' | 'right'\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/esm/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/esm/biz-components/Graphic/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useMediaQuery as z}from"react-responsive";import E,{useImperativeHandle as H,useRef as M,useState as a}from"react";import{createPortal as R}from"react-dom";import{cn as g,getLocalizedPath as j}from"../../helpers/utils.js";import{withLayout as _}from"../../shared/Styles.js";import A from"../SwiperBox/index.js";import{Button as Y,Heading as q,Picture as k,Text as N}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as $}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import"swiper/css";const m="image",u="graphic",C=e=>{let o="";const l=c=>(c?.url&&(o=c.url),o),i=l(e.lgDesktop),d=l(e.desktop),r=l(e.laptop),b=l(e.tablet),h=e.default?.url;return[`${i} 9999`,`${d} 1919`,`${r} 1439`,`${b} 1024`,`${h} 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]",J=({data:e,configuration:o})=>{const l=M(null),[i,d]=a({visible:!1,x:0,y:0,text:""}),r=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]"}},h=s=>{e?.description&&d({visible:!0,x:s.clientX,y:s.clientY,text:e.description})},c=()=>{d(s=>({...s,visible:!1}))};$(l,{componentType:m,componentName:u,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const v=e?.href?"a":"div",w=e?.href?{href:y(e.href,`${m}_${u}`)}:{};return t("div",{ref:l,className:g(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:t("div",{className:g("rounded-box absolute inset-0 overflow-hidden"),children:p("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?p("a",{"aria-label":e?.title||e?.description,href:y(e?.href||"",`${m}_${u}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[t(k,{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||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(k,{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||""})}),p(v,{...w,className:g("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:[p("div",{className:g("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[p("div",{className:"flex-1 overflow-hidden",children:[t(N,{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&&p("div",{onMouseMove:h,onMouseLeave:c,children:[e?.title?t(q,{html:e?.description,style:{color:e?.textColor},as:r,className:`${V} graphic-description`}):t(r,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${V} graphic-description-item`}),typeof window<"u"&&i.visible&&R(t(N,{as:"div",html:i.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:`${i.x+16}px`,top:`${i.y+16}px`}}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:s=>{s.preventDefault(),s.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:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:s=>{s.preventDefault(),s.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:t(k,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(Y,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:y(j(e?.href||"",o?.locale||"us"),`${m}_${u}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},P=E.forwardRef(({data:e,className:o,...l},i)=>{const d=z({query:"(max-width: 768px)"}),r=M(null),[b,h]=a(!1),[c,v]=a(""),[w,s]=a(""),[G,S]=a(""),[B,T]=a(null),[D,I]=a(!1),{locale:L="us"}=F(),f=x=>{const n=e?.items?.length>3,U=e?.items?.length>2;switch(x){case 1440:return n?4:e?.items?.length;case 1024:return n?3:e?.items?.length;case 768:return e?.items?.length===1?1:n||U?2.3:2;default:return e?.items?.length===1?1:1.2}};return H(i,()=>r.current),$(r,{componentType:m,componentName:u,componentTitle:e?.title}),p("div",{...l,ref:r,className:g("graphicBlock",o),children:[p("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title,align:e?.titleAlign??"left"}}),t(A,{id:"Graphic",className:g("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:L,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,n)=>{h(!0),n?.isYouTube?s?.(n?.youtubeId||""):(v?.(n?.video?.url||""),S?.(n?.mobileVideo?.url||""))},onIconClick:x=>{I(!0),T(x)},title:e?.title}},Slide:J,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)}}})]}),t(X,{visible:b,youTubeId:w,onCloseModal:()=>h(!1),videoUrl:d&&G||c}),t(Z,{textVisible:D,extension:B?.extension,onCloseModal:()=>{I(!1),T(null)}})]})});P.displayName="Graphic";var ue=_(P);export{ue as default};
+"use client";import{Fragment as re,jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as Y}from"react-responsive";import q,{useImperativeHandle as Q,useRef as N,useState as p}from"react";import{createPortal as X}from"react-dom";import{cn as m,getLocalizedPath as Z}from"../../helpers/utils.js";import{withLayout as F}from"../../shared/Styles.js";import J from"../SwiperBox/index.js";import{Button as K,Heading as O,Picture as k,Text as $,Tabs as W,TabsList as ee,TabsTrigger as te,TabsContent as oe}from"../../components/index.js";import S from"../Title/index.js";import{VideoModal as se}from"../VideoModal/index.js";import{TextModal as le}from"../TextModal/index.js";import{useExposure as V}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as ie}from"../AiuiProvider/index.js";import"swiper/css";const u="image",h="graphic",G=e=>{let o="";const s=d=>(d?.url&&(o=d.url),o),r=s(e.lgDesktop),a=s(e.desktop),i=s(e.laptop),b=s(e.tablet),g=e.default?.url;return[`${r} 9999`,`${a} 1919`,`${i} 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]",ne=({data:e,configuration:o})=>{const s=N(null),[r,a]=p({visible:!1,x:0,y:0,text:""}),i=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=l=>{e?.description&&a({visible:!0,x:l.clientX,y:l.clientY,text:e.description})},d=()=>{a(l=>({...l,visible:!1}))};V(s,{componentType:u,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const x=e?.href?"a":"div",w=e?.href?{href:T(e.href,`${u}_${h}`)}:{};return t("div",{ref:s,className:m(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:t("div",{className:m("rounded-box absolute inset-0 overflow-hidden"),children:n("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?n("a",{"aria-label":e?.title||e?.description,href:T(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:[t(k,{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||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(k,{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||""})}),n(x,{...w,className:m("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:[n("div",{className:m("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t($,{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&&n("div",{onMouseMove:g,onMouseLeave:d,children:[e?.title?t(O,{html:e?.description,style:{color:e?.textColor},as:i,className:`${P} graphic-description`}):t(i,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${P} graphic-description-item`}),typeof window<"u"&&r.visible&&X(t($,{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)&&t("button",{"aria-label":"Play Video",onClick:l=>{l.preventDefault(),l.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:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:l=>{l.preventDefault(),l.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:t(k,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(K,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:T(Z(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 a=e.length>3,i=e.length>2;switch(r){case 1440:return a?4:e.length;case 1024:return a?3:e.length;case 768:return e.length===1?1:a||i?2.3:2;default:return e.length===1?1:1.2}};return t(J,{id:"Graphic",className:m("!overflow-visible"),data:{list:e,configuration:{...o,num:e.length}},Slide:ne,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=q.forwardRef(({data:e,className:o,...s},r)=>{const a=Y({query:"(max-width: 768px)"}),i=N(null),[b,g]=p(!1),[d,x]=p(""),[w,l]=p(""),[D,A]=p(""),[U,y]=p(null),[z,I]=p(!1),{locale:H="us"}=ie(),R=e?.isShowTab??!1,f=e?.tabs,E=e?.tabAlign??"left",[j,_]=p(f?.[0]?.id??"");Q(r,()=>i.current),V(i,{componentType:u,componentName:h,componentTitle:e?.title});const C={itemShape:e?.itemShape,descriptionTag:e?.descriptionTag,locale:H,onVideoPlayBtnClick:(c,v)=>{g(!0),v?.isYouTube?l?.(v?.youtubeId||""):(x?.(v?.video?.url||""),A?.(v?.mobileVideo?.url||""))},onIconClick:c=>{I(!0),y(c)}},M=()=>n(re,{children:[t(se,{visible:b,youTubeId:w,onCloseModal:()=>g(!1),videoUrl:a&&D||d}),t(le,{textVisible:z,extension:U?.extension,onCloseModal:()=>{I(!1),y(null)}})]});return!R||!f||f.length===0?n("div",{...s,ref:i,className:m("graphicBlock",o),children:[n("div",{className:"graphic-box",children:[e?.title&&t(S,{data:{title:e.title,align:e?.titleAlign??"left"}}),t(B,{items:e?.items,sharedConfig:C})]}),M()]}):n("div",{...s,ref:i,className:m("graphicBlock",o),children:[e?.title&&t(S,{data:{title:e.title,align:e?.titleAlign??"left"}}),n(W,{value:j,onValueChange:_,align:E,children:[t("div",{className:"mb-[24px]",children:t(ee,{children:f.map(c=>t(te,{value:c.id,children:c.label},c.id))})}),f.map(c=>t(oe,{value:c.id,children:t(B,{items:c.items,sharedConfig:C})},c.id))]}),M()]})});L.displayName="Graphic";var Te=F(L);export{Te as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { 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": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "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", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
+  "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": ["Fragment", "jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "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", "Graphic", "className", "rest", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "isShowTab", "tabs", "tabAlign", "activeTab", "setActiveTab", "_", "item", "renderModals", "tab", "Graphic_default"]
 }

package/dist/esm/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)[];
     };