@anker-in/headless-ui 1.1.87 → 1.1.89

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

@@ -0,0 +1,58 @@
+import type { Media, Theme } from '../../types/props.js';
+/**
+ * 响应式背景图片类型
+ * 支持 5 个断点的图片配置
+ */
+export interface ImageTextOverlayBackgroundImage {
+    /** 默认图片 (<768px 移动端) */
+    default?: Media;
+    /** tablet 断点图片 (≥768px) */
+    tablet?: Media;
+    /** laptop 断点图片 (≥1025px) */
+    laptop?: Media;
+    /** desktop 断点图片 (≥1440px) */
+    desktop?: Media;
+    /** lg-desktop 断点图片 (≥1920px) */
+    lgDesktop?: Media;
+    /** 是否显示视频，true 时渲染视频而非图片 */
+    isShowVideo?: boolean;
+    /** 移动端视频（<1025px） */
+    mobileVideo?: Media;
+    /** 桌面端视频（≥1025px） */
+    desktopVideo?: Media;
+}
+/**
+ * 语义化类名
+ */
+export type ImageTextOverlaySemanticName = 'root' | 'grid' | 'card' | 'cardImage' | 'cardContent' | 'cardTitle' | 'cardSubtitle';
+/**
+ * 单个卡片数据接口
+ */
+export interface ImageTextOverlayItem {
+    /** 响应式背景图片（支持 5 个断点） */
+    backgroundImage?: ImageTextOverlayBackgroundImage;
+    /** 标题文字 */
+    title: string;
+    /** 副标题文字 */
+    subtitle?: string;
+    /** 链接地址 */
+    link?: string;
+    /** 主题模式，控制文字颜色。dark 模式下文字为白色 */
+    theme?: Theme;
+}
+/**
+ * ImageTextOverlay 业务数据接口
+ */
+export interface ImageTextOverlayData {
+    /** 卡片列表 */
+    items: ImageTextOverlayItem[];
+}
+/**
+ * ImageTextOverlay Props 接口
+ */
+export interface ImageTextOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: ImageTextOverlayData;
+    /** 语义化类名覆盖 */
+    classNames?: Partial<Record<ImageTextOverlaySemanticName, string>>;
+}

package/dist/esm/biz-components/ImageTextOverlay/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/ImageTextOverlay/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

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

package/dist/esm/biz-components/ImageWithText/ImageWithText.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import he,{useImperativeHandle as ge,useRef as g,useState as v,useEffect as Q}from"react";import{Heading as y,Picture as S,Text as M,Link as U}from"../../components/index.js";import{cn as r,getLocalizedPath as X}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{motion as Y,AnimatePresence as ee}from"framer-motion";const ye="image",ke="image_with_text",te=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),ie=he.forwardRef(({data:ae,className:oe},le)=>{const{title:b,subtitle:k,desc:f,descIcon:P,image:w,padImage:D,mobileImage:z,theme:se="dark",items:E=[],layout:re="left",mediaType:ne="image",datalist:s=[],video:H,padVideo:j,mobVideo:R,button:u,textAlign:l="left"}=ae,i=re,{locale:W="us"}=_e(),V=g(null),N=g(null),T=g(null),I=g(null),C=g(null),[p,me]=v(0),A=g([]),[q,de]=v({left:0,width:0}),[h,$]=v(""),[B,F]=v(""),[O,Z]=v(""),n=s.length>0,_=ne==="video";be(V,{componentType:ye,componentName:ke,componentTitle:b,componentDescription:k}),ge(le,()=>V.current),Q(()=>{if(s.length>0){const t=A.current[p];if(t){const{offsetLeft:o,offsetWidth:a}=t;de({left:o,width:a})}}},[p,s.length]);const[G,pe]=v(!1);we(C,{once:!0,threshold:.01,callback:()=>{pe(!0)}}),Q(()=>{if(!G||!_)return;let t="",o="",a="";if(n&&s[p]){const c=s[p];t=c.video?.url||"",o=c.padVideo?.url||t,a=c.mobVideo?.url||t}else t=H?.url||"",o=j?.url||t,a=R?.url||t;t&&$(t),o&&F(o),a&&Z(a),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[G,_,n,p,s,H?.url,j?.url,R?.url]);const ce=(t,o)=>{if(me(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&n&&s[t]){const a=s[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&F(a.padVideo.url),a.mobVideo?.url&&Z(a.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},xe=()=>!L||!u?.text?null:e("div",{className:r("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left","laptop:hidden":i==="top"||i==="bottom"}),children:e(U,{href:X(u.link||"",W),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:te,children:u.text})}),m=E.length>0,L=!!u,J=()=>{if(n&&s[p]){const t=s[p];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return w?`${w?.url},${D?.url||w?.url} 1024, ${z?.url||w?.url} 768`:""},K=()=>{if(n){const c=s[p],x=c.image?.url,ue=c.imgPad?.url||x,fe=c.imageMob?.url||x;return e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:d("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:fe,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=w?.url,o=D?.url||t,a=z?.url||t;return d("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return d("section",{ref:V,"data-ui-component-id":"ImageWithText",className:r("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!n,"flex-col":!n&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!n&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":n,"aiui-dark":se==="dark"},oe),children:[n&&(b||f||s.length>0)&&d("div",{className:r("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[d("div",{className:"image-with-text__header",children:[e(y,{as:"h3",size:4,html:b,className:"image-with-text__title"}),e(M,{as:"p",size:1,html:f,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:r("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:d("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:q.left,width:q.width}}),s.map((t,o)=>e("div",{ref:a=>{A.current[o]=a},onClick:a=>ce(o,a),className:r("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",p===o?"image-with-text__tab--active text-black":"text-white"),children:e(y,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!n&&(b||k||f)&&d("div",{className:r("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":m,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[d("div",{className:r("image-with-text__main-content",{"flex flex-col":L}),children:[d("div",{className:r("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&u?.text}),children:[d("div",{className:"image-with-text__title-wrapper flex flex-col",children:[e(y,{as:"h2",size:4,html:b,className:r("image-with-text__title",{"w-full":m,"text-left":m&&l==="left","text-center":m&&l==="center"})}),k&&e(M,{as:"p",size:m?4:3,html:k,className:r("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&l==="left","text-center":m&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(U,{href:X(u.link||"",W),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:te,children:u.text})]}),!m&&(f||P)&&d("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[P&&e("img",{src:P,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),f&&e(y,{as:"h4",size:5,html:f,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),m&&e("div",{className:r("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:E.map((t,o)=>d("div",{className:r("image-with-text__item",{"text-center":l==="center"}),children:[d("div",{className:r("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(S,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),e(y,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(M,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),xe()]}),e("div",{ref:C,className:r("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":n,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:n?_?K():e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(S,{source:J(),alt:s[p].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},s[p].image?.url)}):_?K():e(S,{source:J(),className:r("image-with-text__image rounded-box laptop:rounded-box")})})]})});ie.displayName="ImageWithText";var De=ve(ie);export{De as default};
+"use client";import{jsx as e,jsxs as m}from"react/jsx-runtime";import he,{useImperativeHandle as ge,useRef as g,useState as v,useEffect as Q}from"react";import{Heading as y,Picture as S,Text as M,Link as U}from"../../components/index.js";import{cn as r,getLocalizedPath as X}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{motion as Y,AnimatePresence as ee}from"framer-motion";const ye="image",ke="image_with_text",te=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),ie=he.forwardRef(({data:ae,className:oe},le)=>{const{title:b,subtitle:k,desc:f,descIcon:P,image:w,padImage:D,mobileImage:z,theme:se="dark",items:E=[],layout:re="left",mediaType:ne="image",datalist:s=[],video:H,padVideo:j,mobVideo:R,button:u,textAlign:l="left"}=ae,i=re,{locale:W="us"}=_e(),V=g(null),N=g(null),T=g(null),I=g(null),C=g(null),[p,me]=v(0),A=g([]),[q,de]=v({left:0,width:0}),[h,$]=v(""),[B,F]=v(""),[O,Z]=v(""),n=s.length>0,_=ne==="video";be(V,{componentType:ye,componentName:ke,componentTitle:b,componentDescription:k}),ge(le,()=>V.current),Q(()=>{if(s.length>0){const t=A.current[p];if(t){const{offsetLeft:o,offsetWidth:a}=t;de({left:o,width:a})}}},[p,s.length]);const[G,pe]=v(!1);we(C,{once:!0,threshold:.01,callback:()=>{pe(!0)}}),Q(()=>{if(!G||!_)return;let t="",o="",a="";if(n&&s[p]){const c=s[p];t=c.video?.url||"",o=c.padVideo?.url||t,a=c.mobVideo?.url||t}else t=H?.url||"",o=j?.url||t,a=R?.url||t;t&&$(t),o&&F(o),a&&Z(a),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[G,_,n,p,s,H?.url,j?.url,R?.url]);const ce=(t,o)=>{if(me(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&n&&s[t]){const a=s[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&F(a.padVideo.url),a.mobVideo?.url&&Z(a.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},xe=()=>!L||!u?.text||i==="top"||i==="bottom"?null:e("div",{className:r("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left"}),children:e(U,{href:X(u.link||"",W),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:te,children:u.text})}),d=E.length>0,L=!!u,J=()=>{if(n&&s[p]){const t=s[p];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return w?`${w?.url},${D?.url||w?.url} 1024, ${z?.url||w?.url} 768`:""},K=()=>{if(n){const c=s[p],x=c.image?.url,ue=c.imgPad?.url||x,fe=c.imageMob?.url||x;return e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:m("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:fe,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=w?.url,o=D?.url||t,a=z?.url||t;return m("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return m("section",{ref:V,"data-ui-component-id":"ImageWithText",className:r("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!n,"flex-col":!n&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!n&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":n,"aiui-dark":se==="dark"},oe),children:[n&&(b||f||s.length>0)&&m("div",{className:r("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[m("div",{className:"image-with-text__header",children:[e(y,{as:"h3",size:4,html:b,className:"image-with-text__title"}),e(M,{as:"p",size:1,html:f,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:r("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:m("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:q.left,width:q.width}}),s.map((t,o)=>e("div",{ref:a=>{A.current[o]=a},onClick:a=>ce(o,a),className:r("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",p===o?"image-with-text__tab--active text-black":"text-white"),children:e(y,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!n&&(b||k||f)&&m("div",{className:r("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":d,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[m("div",{className:r("image-with-text__main-content",{"flex flex-col":L}),children:[m("div",{className:r("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&u?.text}),children:[m("div",{className:"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col",children:[e(y,{as:"h2",size:4,html:b,className:r("image-with-text__title",{"text-left":d&&l==="left","text-center":d&&l==="center"})}),k&&e(M,{as:"p",size:d?4:3,html:k,className:r("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!d,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":d,"text-left":d&&l==="left","text-center":d&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(U,{href:X(u.link||"",W),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:te,children:u.text})]}),!d&&(f||P)&&m("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[P&&e("img",{src:P,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),f&&e(y,{as:"h4",size:5,html:f,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),d&&e("div",{className:r("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:E.map((t,o)=>m("div",{className:r("image-with-text__item",{"text-center":l==="center"}),children:[m("div",{className:r("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(S,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),e(y,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(M,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),xe()]}),e("div",{ref:C,className:r("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":d,"laptop:basis-[63%] desktop:basis-[57%]":d&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":n,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:n?_?K():e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(S,{source:J(),alt:s[p].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},s[p].image?.url)}):_?K():e(S,{source:J(),className:r("image-with-text__image rounded-box laptop:rounded-box")})})]})});ie.displayName="ImageWithText";var De=ve(ie);export{De as default};
 //# sourceMappingURL=ImageWithText.js.map

package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us' } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n          'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        <Link\n          href={getLocalizedPath(button.link || '', locale)}\n          className=\"image-with-text__button whitespace-nowrap no-underline\"\n          suffixIcon={ArrowRight}\n        >\n          {button.text}\n        </Link>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (title || desc || datalist.length > 0) && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (title || subtitle || desc) && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <div\n              className={cn('image-with-text__header', {\n                'laptop:flex laptop:items-end laptop:justify-between laptop:gap-16':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'w-full': hasItems,\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  })}\n                />\n                {subtitle && (\n                  <Text\n                    as={'p'}\n                    size={hasItems ? 4 : 3}\n                    html={subtitle}\n                    className={cn(\n                      'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                      {\n                        'laptop:mt-[16px]': !hasItems,\n                        'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                        'text-left': hasItems && textAlign === 'left',\n                        'text-center': hasItems && textAlign === 'center',\n                      }\n                    )}\n                  />\n                )}\n              </div>\n              {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n                <Link\n                  href={getLocalizedPath(button.link || '', locale)}\n                  className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n                  suffixIcon={ArrowRight}\n                >\n                  {button.text}\n                </Link>\n              )}\n            </div>\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F top \u6216 bottom \u65F6\uFF1A\u9ED8\u8BA4 cols \u662F 2\uFF0Ctablet \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 4\n                  'grid-cols-2 tablet:grid-cols-4': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F left \u6216 right \u65F6\uFF1Acols \u9ED8\u8BA4\u662F 2\uFF0Ctablet \u662F 4\uFF0Claptop \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 2\n                  'grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2':\n                    effectiveLayout === 'left' || effectiveLayout === 'right',\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'laptop:w-[60%] w-full shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us' } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    if (effectiveLayout === 'top' || effectiveLayout === 'bottom') return null\n\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n        })}\n      >\n        <Link\n          href={getLocalizedPath(button.link || '', locale)}\n          className=\"image-with-text__button whitespace-nowrap no-underline\"\n          suffixIcon={ArrowRight}\n        >\n          {button.text}\n        </Link>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (title || desc || datalist.length > 0) && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (title || subtitle || desc) && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <div\n              className={cn('image-with-text__header', {\n                'laptop:flex laptop:items-end laptop:justify-between laptop:gap-16':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  })}\n                />\n                {subtitle && (\n                  <Text\n                    as={'p'}\n                    size={hasItems ? 4 : 3}\n                    html={subtitle}\n                    className={cn(\n                      'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                      {\n                        'laptop:mt-[16px]': !hasItems,\n                        'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                        'text-left': hasItems && textAlign === 'left',\n                        'text-center': hasItems && textAlign === 'center',\n                      }\n                    )}\n                  />\n                )}\n              </div>\n              {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n                <Link\n                  href={getLocalizedPath(button.link || '', locale)}\n                  className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n                  suffixIcon={ArrowRight}\n                >\n                  {button.text}\n                </Link>\n              )}\n            </div>\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F top \u6216 bottom \u65F6\uFF1A\u9ED8\u8BA4 cols \u662F 2\uFF0Ctablet \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 4\n                  'grid-cols-2 tablet:grid-cols-4': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F left \u6216 right \u65F6\uFF1Acols \u9ED8\u8BA4\u662F 2\uFF0Ctablet \u662F 4\uFF0Claptop \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 2\n                  'grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2':\n                    effectiveLayout === 'left' || effectiveLayout === 'right',\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'laptop:w-[60%] w-full shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "Link", "cn", "getLocalizedPath", "withLayout", "useExposure", "useIntersectionObserverDelay", "useAiuiContext", "motion", "AnimatePresence", "componentType", "componentName", "ArrowRight", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "button", "textAlign", "effectiveLayout", "locale", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
 }

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

@@ -75,5 +75,5 @@ export interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'class
     /** 语义化类名配置 */
     classNames?: KspClassNames;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<KspProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<KspProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
 export default _default;

package/dist/esm/biz-components/Listing/components/PaidShipping/index.d.ts

@@ -8,5 +8,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<{
     variant: ProductVariant;
     onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void;
     className?: string;
-}, "container" | keyof import("../../../../shared/Styles.js").StylesProps> & import("../../../../shared/Styles.js").StylesProps & import("../../../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
+}, "container" | keyof import("../../../../shared/Styles.js").StylesProps> & import("../../../../shared/Styles.js").StylesProps & import("../../../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts

@@ -32,5 +32,5 @@ export type ModalData = {
 interface BenefitsTabProps {
     textConfig?: BenefitsTabTextConfig;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<BenefitsTabProps, "container" | keyof import("../../../../../shared/Styles.js").StylesProps> & import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {};
+declare const _default: React.ForwardRefExoticComponent<Omit<BenefitsTabProps, "container" | keyof import("../../../../../shared/Styles.js").StylesProps> & import("../../../../../shared/Styles.js").StylesProps & import("../../../../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {};
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.d.ts

@@ -1,5 +1,5 @@
 export interface ProductGalleryTabRef {
     scrollToTab: (index: number) => void;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<unknown, "container" | keyof import("../../../../../shared/Styles.js").StylesProps> & import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<unknown, "container" | keyof import("../../../../../shared/Styles.js").StylesProps> & import("../../../../../shared/Styles.js").StylesProps & import("../../../../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts

@@ -8,5 +8,5 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<{
     variant: ProductVariant;
     onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void;
     className?: string;
-}, "container" | keyof import("../../../../../shared/Styles.js").StylesProps> & import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
+}, "container" | keyof import("../../../../../shared/Styles.js").StylesProps> & import("../../../../../shared/Styles.js").StylesProps & import("../../../../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts

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

package/dist/esm/biz-components/Listing/components/PurchaseBar/index.d.ts

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

package/dist/esm/biz-components/LotteryShared/BaseModal.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import"react";import*as t from"@radix-ui/react-dialog";import{Heading as k}from"../../components/index.js";import{cn as o}from"../../helpers/index.js";const y=({isOpen:r,onClose:d,children:c,maxWidth:p="max-w-[358px] laptop:max-w-[480px]",background:m="bg-white",showCloseButton:g=!0,className:u,title:a,description:x,ariaLabelledBy:s,theme:f="light"})=>{const n=s||void 0,l=`${s||"base-modal"}-description`,b=a||"Dialog",v=x||a||"Dialog content";return e(t.Root,{open:r,onOpenChange:h=>!h&&d(),children:i(t.Portal,{children:[e(t.Overlay,{className:o("fixed inset-0 z-[60]","bg-black/40","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",f==="dark"?"aiui-dark":"")}),i(t.Content,{className:o("fixed left-1/2 top-1/2 z-[70]","-translate-x-1/2 -translate-y-1/2","l-tablet:max-w-[90%] w-full shadow-2xl","rounded-box",p,m,"data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","duration-300",u),"aria-labelledby":n,"aria-describedby":l,"aria-modal":"true",children:[e(t.Title,{id:n,className:"sr-only",children:b}),e(t.Description,{id:l,className:"sr-only",children:v}),i("div",{className:o("modal-close","flex items-center justify-between","laptop:p-4 px-2 pb-1 pt-2"),children:[a&&e(k,{size:2,className:"tracking-[-0.32px]",children:a}),g&&e(t.Close,{asChild:!0,children:e("button",{className:o("relative z-10 shrink-0 cursor-pointer","flex items-center justify-center","laptop:size-[24px] size-[20px]","desktop:size-[28px]",!a&&"ml-auto"),"aria-label":"\u5173\u95ED\u5F39\u7A97",children:i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"size-full",children:[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})})]}),c]})]})})};var N=y;export{y as BaseModal,N as default};
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import"react";import*as t from"@radix-ui/react-dialog";import{Heading as k}from"../../components/index.js";import{cn as o}from"../../helpers/index.js";const y=({isOpen:r,onClose:d,children:c,maxWidth:p="max-w-[358px] laptop:max-w-[480px]",background:m="bg-white",showCloseButton:g=!0,className:u,title:a,description:x,ariaLabelledBy:s,theme:f="light"})=>{const n=s||void 0,l=`${s||"base-modal"}-description`,b=a||"Dialog",v=x||a||"Dialog content";return e(t.Root,{open:r,onOpenChange:h=>!h&&d(),children:i(t.Portal,{children:[e(t.Overlay,{className:o("fixed inset-0 z-[100]","bg-black/40","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",f==="dark"?"aiui-dark":"")}),i(t.Content,{className:o("fixed left-1/2 top-1/2 z-[110]","-translate-x-1/2 -translate-y-1/2","md-tablet:max-w-[90%] w-full shadow-2xl","rounded-box",p,m,"data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","duration-300",u),"aria-labelledby":n,"aria-describedby":l,"aria-modal":"true",children:[e(t.Title,{id:n,className:"sr-only",children:b}),e(t.Description,{id:l,className:"sr-only",children:v}),i("div",{className:o("modal-close","flex items-center justify-between","laptop:p-4 px-2 pb-1 pt-2"),children:[a&&e(k,{size:2,className:"tracking-[-0.32px]",children:a}),g&&e(t.Close,{asChild:!0,children:e("button",{className:o("relative z-10 shrink-0 cursor-pointer","flex items-center justify-center","laptop:size-[24px] size-[20px]","desktop:size-[28px]",!a&&"ml-auto"),"aria-label":"\u5173\u95ED\u5F39\u7A97",children:i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"size-full",children:[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})})]}),c]})]})})};var N=y;export{y as BaseModal,N as default};
 //# sourceMappingURL=BaseModal.js.map

package/dist/esm/biz-components/LotteryShared/BaseModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/LotteryShared/BaseModal.tsx"],
-  "sourcesContent": ["/**\n * BaseModal - \u901A\u7528\u5F39\u7A97\u57FA\u7840\u7EC4\u4EF6\n *\n * \u57FA\u4E8E Radix UI Dialog \u5B9E\u73B0\u7684\u7EDF\u4E00\u5F39\u7A97\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u906E\u7F69\u5C42\u3001\u5173\u95ED\u6309\u94AE\u7B49\u529F\u80FD\n *\n * @module BaseModal\n * @date 2026-01-29\n */\n\n'use client'\n\nimport React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface BaseModalProps {\n  /**\n   * \u662F\u5426\u663E\u793A\u5F39\u7A97\n   */\n  isOpen: boolean\n\n  /**\n   * \u5173\u95ED\u5F39\u7A97\u56DE\u8C03\n   */\n  onClose: () => void\n\n  /**\n   * \u5F39\u7A97\u5185\u5BB9\n   */\n  children: React.ReactNode\n\n  /**\n   * \u5F39\u7A97\u6700\u5927\u5BBD\u5EA6\u7C7B\u540D\n   * @default 'max-w-[358px] laptop:max-w-[480px]'\n   */\n  maxWidth?: string\n\n  /**\n   * \u5F39\u7A97\u80CC\u666F\u6E10\u53D8\n   * @default 'bg-white'\n   */\n  background?: string\n\n  /**\n   * \u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE\n   * @default true\n   */\n  showCloseButton?: boolean\n\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n\n  /**\n   * title \u5F39\u7A97\u6807\u9898\n   */\n  title?: string\n\n  description?: string\n\n  /**\n   * ARIA \u6807\u7B7E\n   */\n  ariaLabelledBy?: string\n\n  /**\n   * \u4E3B\u9898\u6A21\u5F0F\n   * @default 'light'\n   */\n  theme?: 'light' | 'dark'\n}\n\n/**\n * BaseModal \u901A\u7528\u5F39\u7A97\u7EC4\u4EF6\uFF08\u57FA\u4E8E Radix UI Dialog\uFF09\n */\nexport const BaseModal: React.FC<BaseModalProps> = ({\n  isOpen,\n  onClose,\n  children,\n  maxWidth = 'max-w-[358px] laptop:max-w-[480px]',\n  background = 'bg-white',\n  showCloseButton = true,\n  className,\n  title,\n  description,\n  ariaLabelledBy,\n  theme = 'light',\n}) => {\n  const titleId = ariaLabelledBy || undefined\n  const descriptionId = `${ariaLabelledBy || 'base-modal'}-description`\n  const resolvedTitle = title || 'Dialog'\n  const resolvedDescription = description || title || 'Dialog content'\n\n  return (\n    <DialogPrimitive.Root open={isOpen} onOpenChange={open => !open && onClose()}>\n      <DialogPrimitive.Portal>\n        {/* \u906E\u7F69\u5C42 */}\n        <DialogPrimitive.Overlay\n          className={cn(\n            'fixed inset-0 z-[60]',\n            'bg-black/40',\n            // Radix UI \u52A8\u753B\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            theme === 'dark' ? 'aiui-dark' : ''\n          )}\n        />\n\n        {/* \u5F39\u7A97\u5185\u5BB9 */}\n        <DialogPrimitive.Content\n          className={cn(\n            'fixed left-1/2 top-1/2 z-[70]',\n            '-translate-x-1/2 -translate-y-1/2',\n            'l-tablet:max-w-[90%] w-full shadow-2xl',\n            'rounded-box',\n            maxWidth,\n            background,\n            // Radix UI \u52A8\u753B\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            'duration-300',\n            className\n          )}\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n          aria-modal=\"true\"\n        >\n          <DialogPrimitive.Title id={titleId} className=\"sr-only\">\n            {resolvedTitle}\n          </DialogPrimitive.Title>\n\n          <DialogPrimitive.Description id={descriptionId} className=\"sr-only\">\n            {resolvedDescription}\n          </DialogPrimitive.Description>\n\n          {/* \u6807\u9898\u548C\u5173\u95ED\u6309\u94AE\u680F */}\n          <div className={cn('modal-close', 'flex items-center justify-between', 'laptop:p-4 px-2 pb-1 pt-2')}>\n            {title && (\n              <Heading size={2} className=\"tracking-[-0.32px]\">\n                {title}\n              </Heading>\n            )}\n            {showCloseButton && (\n              <DialogPrimitive.Close asChild>\n                <button\n                  className={cn(\n                    'relative z-10 shrink-0 cursor-pointer',\n                    'flex items-center justify-center',\n                    'laptop:size-[24px] size-[20px]',\n                    'desktop:size-[28px]',\n                    // \u79FB\u9664 title \u65F6\u81EA\u52A8\u5C45\u53F3\n                    !title && 'ml-auto'\n                  )}\n                  aria-label=\"\u5173\u95ED\u5F39\u7A97\"\n                >\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    className=\"size-full\"\n                  >\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                  </svg>\n                </button>\n              </DialogPrimitive.Close>\n            )}\n          </div>\n\n          {/* \u5F39\u7A97\u5185\u5BB9 */}\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  )\n}\n\nexport default BaseModal\n"],
-  "mappings": "aAmGQ,cAAAA,EA2DU,QAAAC,MA3DV,oBAxFR,MAAkB,QAClB,UAAYC,MAAqB,yBACjC,OAAS,WAAAC,MAAe,4BACxB,OAAS,MAAAC,MAAU,yBA+DZ,MAAMC,EAAsC,CAAC,CAClD,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,qCACX,WAAAC,EAAa,WACb,gBAAAC,EAAkB,GAClB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,eAAAC,EACA,MAAAC,EAAQ,OACV,IAAM,CACJ,MAAMC,EAAUF,GAAkB,OAC5BG,EAAgB,GAAGH,GAAkB,YAAY,eACjDI,EAAgBN,GAAS,SACzBO,EAAsBN,GAAeD,GAAS,iBAEpD,OACEb,EAACE,EAAgB,KAAhB,CAAqB,KAAMI,EAAQ,aAAce,GAAQ,CAACA,GAAQd,EAAQ,EACzE,SAAAN,EAACC,EAAgB,OAAhB,CAEC,UAAAF,EAACE,EAAgB,QAAhB,CACC,UAAWE,EACT,uBACA,cAEA,+DACA,6DACAY,IAAU,OAAS,YAAc,EACnC,EACF,EAGAf,EAACC,EAAgB,QAAhB,CACC,UAAWE,EACT,gCACA,oCACA,yCACA,cACAK,EACAC,EAEA,+DACA,6DACA,+DACA,eACAE,CACF,EACA,kBAAiBK,EACjB,mBAAkBC,EAClB,aAAW,OAEX,UAAAlB,EAACE,EAAgB,MAAhB,CAAsB,GAAIe,EAAS,UAAU,UAC3C,SAAAE,EACH,EAEAnB,EAACE,EAAgB,YAAhB,CAA4B,GAAIgB,EAAe,UAAU,UACvD,SAAAE,EACH,EAGAnB,EAAC,OAAI,UAAWG,EAAG,cAAe,oCAAqC,2BAA2B,EAC/F,UAAAS,GACCb,EAACG,EAAA,CAAQ,KAAM,EAAG,UAAU,qBACzB,SAAAU,EACH,EAEDF,GACCX,EAACE,EAAgB,MAAhB,CAAsB,QAAO,GAC5B,SAAAF,EAAC,UACC,UAAWI,EACT,wCACA,mCACA,iCACA,sBAEA,CAACS,GAAS,SACZ,EACA,aAAW,2BAEX,SAAAZ,EAAC,OACC,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAU,YAEV,UAAAD,EAAC,QAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EACpCA,EAAC,QAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GACtC,EACF,EACF,GAEJ,EAGCQ,GACH,GACF,EACF,CAEJ,EAEA,IAAOc,EAAQjB",
+  "sourcesContent": ["/**\n * BaseModal - \u901A\u7528\u5F39\u7A97\u57FA\u7840\u7EC4\u4EF6\n *\n * \u57FA\u4E8E Radix UI Dialog \u5B9E\u73B0\u7684\u7EDF\u4E00\u5F39\u7A97\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u906E\u7F69\u5C42\u3001\u5173\u95ED\u6309\u94AE\u7B49\u529F\u80FD\n *\n * @module BaseModal\n * @date 2026-01-29\n */\n\n'use client'\n\nimport React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface BaseModalProps {\n  /**\n   * \u662F\u5426\u663E\u793A\u5F39\u7A97\n   */\n  isOpen: boolean\n\n  /**\n   * \u5173\u95ED\u5F39\u7A97\u56DE\u8C03\n   */\n  onClose: () => void\n\n  /**\n   * \u5F39\u7A97\u5185\u5BB9\n   */\n  children: React.ReactNode\n\n  /**\n   * \u5F39\u7A97\u6700\u5927\u5BBD\u5EA6\u7C7B\u540D\n   * @default 'max-w-[358px] laptop:max-w-[480px]'\n   */\n  maxWidth?: string\n\n  /**\n   * \u5F39\u7A97\u80CC\u666F\u6E10\u53D8\n   * @default 'bg-white'\n   */\n  background?: string\n\n  /**\n   * \u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE\n   * @default true\n   */\n  showCloseButton?: boolean\n\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n\n  /**\n   * title \u5F39\u7A97\u6807\u9898\n   */\n  title?: string\n\n  description?: string\n\n  /**\n   * ARIA \u6807\u7B7E\n   */\n  ariaLabelledBy?: string\n\n  /**\n   * \u4E3B\u9898\u6A21\u5F0F\n   * @default 'light'\n   */\n  theme?: 'light' | 'dark'\n}\n\n/**\n * BaseModal \u901A\u7528\u5F39\u7A97\u7EC4\u4EF6\uFF08\u57FA\u4E8E Radix UI Dialog\uFF09\n */\nexport const BaseModal: React.FC<BaseModalProps> = ({\n  isOpen,\n  onClose,\n  children,\n  maxWidth = 'max-w-[358px] laptop:max-w-[480px]',\n  background = 'bg-white',\n  showCloseButton = true,\n  className,\n  title,\n  description,\n  ariaLabelledBy,\n  theme = 'light',\n}) => {\n  const titleId = ariaLabelledBy || undefined\n  const descriptionId = `${ariaLabelledBy || 'base-modal'}-description`\n  const resolvedTitle = title || 'Dialog'\n  const resolvedDescription = description || title || 'Dialog content'\n\n  return (\n    <DialogPrimitive.Root open={isOpen} onOpenChange={open => !open && onClose()}>\n      <DialogPrimitive.Portal>\n        {/* \u906E\u7F69\u5C42 */}\n        <DialogPrimitive.Overlay\n          className={cn(\n            'fixed inset-0 z-[100]',\n            'bg-black/40',\n            // Radix UI \u52A8\u753B\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            theme === 'dark' ? 'aiui-dark' : ''\n          )}\n        />\n\n        {/* \u5F39\u7A97\u5185\u5BB9 */}\n        <DialogPrimitive.Content\n          className={cn(\n            'fixed left-1/2 top-1/2 z-[110]',\n            '-translate-x-1/2 -translate-y-1/2',\n            'md-tablet:max-w-[90%] w-full shadow-2xl',\n            'rounded-box',\n            maxWidth,\n            background,\n            // Radix UI \u52A8\u753B\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            'duration-300',\n            className\n          )}\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n          aria-modal=\"true\"\n        >\n          <DialogPrimitive.Title id={titleId} className=\"sr-only\">\n            {resolvedTitle}\n          </DialogPrimitive.Title>\n\n          <DialogPrimitive.Description id={descriptionId} className=\"sr-only\">\n            {resolvedDescription}\n          </DialogPrimitive.Description>\n\n          {/* \u6807\u9898\u548C\u5173\u95ED\u6309\u94AE\u680F */}\n          <div className={cn('modal-close', 'flex items-center justify-between', 'laptop:p-4 px-2 pb-1 pt-2')}>\n            {title && (\n              <Heading size={2} className=\"tracking-[-0.32px]\">\n                {title}\n              </Heading>\n            )}\n            {showCloseButton && (\n              <DialogPrimitive.Close asChild>\n                <button\n                  className={cn(\n                    'relative z-10 shrink-0 cursor-pointer',\n                    'flex items-center justify-center',\n                    'laptop:size-[24px] size-[20px]',\n                    'desktop:size-[28px]',\n                    // \u79FB\u9664 title \u65F6\u81EA\u52A8\u5C45\u53F3\n                    !title && 'ml-auto'\n                  )}\n                  aria-label=\"\u5173\u95ED\u5F39\u7A97\"\n                >\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    className=\"size-full\"\n                  >\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                  </svg>\n                </button>\n              </DialogPrimitive.Close>\n            )}\n          </div>\n\n          {/* \u5F39\u7A97\u5185\u5BB9 */}\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  )\n}\n\nexport default BaseModal\n"],
+  "mappings": "aAmGQ,cAAAA,EA2DU,QAAAC,MA3DV,oBAxFR,MAAkB,QAClB,UAAYC,MAAqB,yBACjC,OAAS,WAAAC,MAAe,4BACxB,OAAS,MAAAC,MAAU,yBA+DZ,MAAMC,EAAsC,CAAC,CAClD,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,qCACX,WAAAC,EAAa,WACb,gBAAAC,EAAkB,GAClB,UAAAC,EACA,MAAAC,EACA,YAAAC,EACA,eAAAC,EACA,MAAAC,EAAQ,OACV,IAAM,CACJ,MAAMC,EAAUF,GAAkB,OAC5BG,EAAgB,GAAGH,GAAkB,YAAY,eACjDI,EAAgBN,GAAS,SACzBO,EAAsBN,GAAeD,GAAS,iBAEpD,OACEb,EAACE,EAAgB,KAAhB,CAAqB,KAAMI,EAAQ,aAAce,GAAQ,CAACA,GAAQd,EAAQ,EACzE,SAAAN,EAACC,EAAgB,OAAhB,CAEC,UAAAF,EAACE,EAAgB,QAAhB,CACC,UAAWE,EACT,wBACA,cAEA,+DACA,6DACAY,IAAU,OAAS,YAAc,EACnC,EACF,EAGAf,EAACC,EAAgB,QAAhB,CACC,UAAWE,EACT,iCACA,oCACA,0CACA,cACAK,EACAC,EAEA,+DACA,6DACA,+DACA,eACAE,CACF,EACA,kBAAiBK,EACjB,mBAAkBC,EAClB,aAAW,OAEX,UAAAlB,EAACE,EAAgB,MAAhB,CAAsB,GAAIe,EAAS,UAAU,UAC3C,SAAAE,EACH,EAEAnB,EAACE,EAAgB,YAAhB,CAA4B,GAAIgB,EAAe,UAAU,UACvD,SAAAE,EACH,EAGAnB,EAAC,OAAI,UAAWG,EAAG,cAAe,oCAAqC,2BAA2B,EAC/F,UAAAS,GACCb,EAACG,EAAA,CAAQ,KAAM,EAAG,UAAU,qBACzB,SAAAU,EACH,EAEDF,GACCX,EAACE,EAAgB,MAAhB,CAAsB,QAAO,GAC5B,SAAAF,EAAC,UACC,UAAWI,EACT,wCACA,mCACA,iCACA,sBAEA,CAACS,GAAS,SACZ,EACA,aAAW,2BAEX,SAAAZ,EAAC,OACC,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAU,YAEV,UAAAD,EAAC,QAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EACpCA,EAAC,QAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GACtC,EACF,EACF,GAEJ,EAGCQ,GACH,GACF,EACF,CAEJ,EAEA,IAAOc,EAAQjB",
   "names": ["jsx", "jsxs", "DialogPrimitive", "Heading", "cn", "BaseModal", "isOpen", "onClose", "children", "maxWidth", "background", "showCloseButton", "className", "title", "description", "ariaLabelledBy", "theme", "titleId", "descriptionId", "resolvedTitle", "resolvedDescription", "open", "BaseModal_default"]
 }

package/dist/esm/biz-components/LotteryShared/ChanceMethods.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as s,jsxs as c}from"react/jsx-runtime";import g from"react";import{cn as p}from"../../helpers/index.js";import{Button as k,Heading as b}from"../../components/index.js";const y=({theme:t,methods:e,title:n="Want more chances to win?",subtitle:d,footerNote:o,className:l,userData:i,onOpenShareModal:a,chanceBadgeText:r="Chance +1",completedText:x="Completed",usedText:m="Used",loadingText:h="Loading...",mechanismType:v="methods",inputConfig:u})=>v==="input"&&u?c("div",{className:p("chance-methods-container","flex flex-col overflow-y-auto","p-[16px]","desktop:px-[24px] desktop:pt-[24px]","lg-desktop:px-[32px]","gap-[16px]","lg-desktop:gap-[16px]",t==="dark"?"aiui-dark":"",l),children:[c("div",{className:"chance-methods-header flex flex-col gap-[4px]",children:[s(b,{size:2,className:p("chance-methods-title","text-info-primary tracking-[-0.32px]"),children:n}),d&&s("p",{className:p("chance-methods-subtitle","text-[14px] font-semibold leading-[1.4]","lg-desktop:text-[18px] desktop:text-[16px]",t==="dark"?"text-[#8A8D92]":"text-[#4A4C56]"),children:d})]}),s(N,{theme:t,inputConfig:u}),o&&s("p",{className:p("chance-methods-footer","font-semibold","text-[14px] leading-[1.4] ","desktop:pt-[24px] pt-[16px]",t==="dark"?"text-[#75787F]":"text-[#767880]"),children:o})]}):!e||e.length===0?null:c("div",{className:p("chance-methods-container","flex flex-col overflow-y-auto","p-[16px]","desktop:px-[24px] desktop:pt-[24px]","lg-desktop:px-[32px]","gap-[16px]","lg-desktop:gap-[16px]",t==="dark"?"aiui-dark":"",l),children:[c("div",{className:"chance-methods-header flex flex-col gap-[4px]",children:[s(b,{size:2,className:p("chance-methods-title","text-info-primary tracking-[-0.32px]"),children:n}),d&&s("p",{className:p("chance-methods-subtitle","text-[14px] font-semibold leading-[1.4]","lg-desktop:text-[18px] desktop:text-[16px]",t==="dark"?"text-[#8A8D92]":"text-[#4A4C56]"),children:d})]}),s("div",{className:"chance-methods-list flex grow flex-col gap-[16px]",children:e.map(f=>s(w,{method:f,userData:i,onOpenShareModal:a,chanceBadgeText:r,completedText:x,usedText:m,loadingText:h},f.methodKey))}),o&&s("p",{className:p("chance-methods-footer","font-semibold","text-[14px] leading-[1.4] ","desktop:pt-[24px] pt-[16px]",t==="dark"?"text-[#75787F]":"text-[#767880]"),children:o})]}),N=({theme:t,inputConfig:e})=>{const[n,d]=g.useState(e.defaultValue||""),[o,l]=g.useState("");g.useEffect(()=>{e.defaultValue&&!n&&d(e.defaultValue)},[e.defaultValue]);const i=async()=>{if(e.validationPattern&&!new RegExp(e.validationPattern).test(n.trim())){l(e.validationErrorText||"Invalid input");return}l("");try{await e.onSubmit?.(n.trim())}catch(a){console.error("[ChanceInputMode] onSubmit error:",a)}};return c("div",{className:"chance-input-mode flex grow flex-col gap-[16px]",children:[s("input",{type:e.inputType||"text",value:n,onChange:a=>{d(a.target.value),l("")},placeholder:e.placeholder||"Enter your order number",disabled:e.isSubmitting,className:p("rounded-btn laptop:h-[54px] laptop:px-[16px] h-[44px] w-full border bg-transparent px-[12px]","lg-desktop:text-[16px] text-[14px] leading-[1.4]","outline-none transition-colors","border-[#D1D5DB]  placeholder:text-[#9CA3AF]",o?"border-red-500":"",t==="dark"?"text-white":"text-[#1E2024]"),onKeyDown:a=>{a.key==="Enter"&&!e.isSubmitting&&i()}}),o&&s("p",{className:"text-[12px] text-red-500",children:o}),s(k,{size:"lg",variant:t==="dark"?"primary":"secondary",onClick:i,disabled:e.isSubmitting||!n.trim(),className:"w-fit",children:e.isSubmitting?"Loading...":e.submitText||"Spin and Win"})]})},w=({method:t,userData:e,onOpenShareModal:n,chanceBadgeText:d,completedText:o,usedText:l,loadingText:i})=>{const a=t.status||"pending",r=t.loading||!1,x=t.disabled||a==="completed"||a==="used"||r,m=()=>{if(!e?.isLoggedIn){t.onLoginRequired?.();return}t.openShareModal&&n&&n(),t.onClick()},h={pending:r?i:t?.buttonText||"Redeem now",completed:o,used:l};return c("div",{className:p("chance-method-item","flex flex-col items-start gap-[8px]","tablet:flex-row tablet:items-center tablet:gap-4","transition-all",{"opacity-60":x}),children:[c("div",{className:p("chance-method-info","flex flex-1 flex-col gap-[4px]","min-w-0"),children:[c("div",{className:"flex flex-wrap items-center gap-[4px]",children:[s("p",{className:p("chance-method-title","text-info-primary","text-[14px] font-[700] leading-[1.4] ","lg-desktop:text-[18px] desktop:text-[16px]"),children:t.title}),s("span",{className:p("chance-badge","text-[14px] leading-[1.4] ","lg-desktop:text-[18px] desktop:text-[16px]","font-[700]","shrink-0",{"text-[#ff6b35]":a==="pending","text-[#4caf50]":a==="completed","text-[#75787F]":a==="used"}),children:d})]}),s("p",{className:p("chance-method-description","text-info-primary","text-[14px] leading-[1.4] ","lg-desktop:text-[18px] desktop:text-[16px]","font-[700]"),children:t.description})]}),s("div",{className:"chance-method-action shrink-0",children:s(k,{onClick:m,disabled:x,className:p("chance-button","lg-desktop:min-w-[162px] min-w-[132px]",{"bg-[#4caf50]":a==="completed","bg-[#75787F]":a==="used"}),children:h[a]})})]})};var S=y;export{y as ChanceMethods,S as default};
+"use client";import{jsx as a,jsxs as l}from"react/jsx-runtime";import g from"react";import{cn as s}from"../../helpers/index.js";import{Button as C,Checkbox as A,Heading as T,Text as M}from"../../components/index.js";const D=({theme:t,methods:e,title:x="Want more chances to win?",subtitle:r,footerNote:d,className:o,userData:h,onOpenShareModal:n,chanceBadgeText:c="Chance +1",completedText:m="Completed",usedText:p="Used",loadingText:u="Loading...",mechanismType:w="methods",inputConfig:k,isAgreementChecked:v,onAgreementCheckedChange:f,agreementErrorText:N})=>w==="input"&&k?l("div",{className:s("chance-methods-container","flex flex-col overflow-y-auto","p-[16px]","desktop:px-[24px] desktop:pt-[24px]","lg-desktop:px-[32px]","gap-[16px]","lg-desktop:gap-[16px]",t==="dark"?"aiui-dark":"",o),children:[l("div",{className:"chance-methods-header flex flex-col gap-[4px]",children:[a(T,{size:2,className:s("chance-methods-title","text-info-primary tracking-[-0.32px]"),children:x}),r&&a("p",{className:s("chance-methods-subtitle","text-[14px] font-semibold leading-[1.4]","lg-desktop:text-[18px] desktop:text-[16px]",t==="dark"?"text-[#8A8D92]":"text-[#4A4C56]"),children:r})]}),a(S,{theme:t,inputConfig:k,isAgreementChecked:v,onAgreementCheckedChange:f,agreementErrorText:N}),d&&a("p",{className:s("chance-methods-footer","font-semibold","text-[14px] leading-[1.4] ","desktop:pt-[24px] pt-[16px]",t==="dark"?"text-[#75787F]":"text-[#767880]"),children:d})]}):!e||e.length===0?null:l("div",{className:s("chance-methods-container","flex flex-col overflow-y-auto","p-[16px]","desktop:px-[24px] desktop:pt-[24px]","lg-desktop:px-[32px]","gap-[16px]","lg-desktop:gap-[16px]",t==="dark"?"aiui-dark":"",o),children:[l("div",{className:"chance-methods-header flex flex-col gap-[4px]",children:[a(T,{size:2,className:s("chance-methods-title","text-info-primary tracking-[-0.32px]"),children:x}),r&&a("p",{className:s("chance-methods-subtitle","text-[14px] font-semibold leading-[1.4]","lg-desktop:text-[18px] desktop:text-[16px]",t==="dark"?"text-[#8A8D92]":"text-[#4A4C56]"),children:r})]}),a("div",{className:"chance-methods-list flex grow flex-col gap-[16px]",children:e.map(b=>a(E,{method:b,userData:h,onOpenShareModal:n,chanceBadgeText:c,completedText:m,usedText:p,loadingText:u},b.methodKey))}),d&&a("p",{className:s("chance-methods-footer","font-semibold","text-[14px] leading-[1.4] ","desktop:pt-[24px] pt-[16px]",t==="dark"?"text-[#75787F]":"text-[#767880]"),children:d})]}),S=({theme:t,inputConfig:e,isAgreementChecked:x,onAgreementCheckedChange:r,agreementErrorText:d})=>{const[o,h]=g.useState(e.defaultValue||""),[n,c]=g.useState(""),[m,p]=g.useState(""),[u,w]=g.useState(!1),k=!!e.agreementNotice,v=x??u,f=!e.isSubmitting&&!!o.trim(),N=e.validationPattern??(e.inputType==="email"?"^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$":void 0);g.useEffect(()=>{e.defaultValue&&!o&&h(e.defaultValue)},[e.defaultValue]),g.useEffect(()=>{d&&p(d)},[d]);const b=async()=>{if(f){if(k&&!v){p(e.agreementWarningText||"Please agree to the terms before continuing");return}if(N&&!new RegExp(N).test(o.trim())){c(e.validationErrorText||"Invalid input");return}c(""),p("");try{await e.onSubmit?.(o.trim())}catch(i){console.error("[ChanceInputMode] onSubmit error:",i)}}};return l("div",{className:"chance-input-mode flex grow flex-col gap-[16px]",children:[a("input",{type:e.inputType||"text",value:o,onChange:i=>{h(i.target.value),c("")},placeholder:e.placeholder||"Enter your order number",disabled:e.isSubmitting||e.disabled,autoComplete:e.disableAutofill?"new-password":void 0,name:e.disableAutofill?"lottery-input":void 0,readOnly:e.disabled,className:s("rounded-btn laptop:h-[54px] laptop:px-[16px] h-[44px] w-full border bg-transparent px-[12px]","lg-desktop:text-[16px] text-[14px] leading-[1.4]","outline-none transition-colors","border-[#D1D5DB]  placeholder:text-[#9CA3AF]",n?"border-red-500":"",t==="dark"?"text-white":"text-[#1E2024]"),onKeyDown:i=>{i.key==="Enter"&&f&&b()}}),a(C,{size:"lg",variant:t==="dark"?"primary":"secondary",onClick:b,disabled:!f,className:"w-fit","data-headless-type-name":e.submitTrackTypeName,"data-headless-title-desc-button":e.submitTrackTitleDescButton,children:e.isSubmitting?"Loading...":e.submitText||"Spin and Win"}),n&&a("p",{className:"text-[12px] text-red-500",children:n}),m&&a("p",{className:"text-[12px] text-red-500",children:m}),k&&l("label",{className:"flex items-start gap-[8px] pt-[4px]",children:[a(A,{checked:v,onCheckedChange:i=>{const y=!!i;r?.(y),w(y),y&&p("")},className:"mt-[2px] shrink-0 border-white/60 data-[state=checked]:border-white data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),a(M,{html:e.agreementNotice,className:s("text-[14px] font-[700] leading-[1.4]","[&_a]:underline [&_a]:underline-offset-2",t==="dark"?"text-white/95 [&_a]:text-white [&_a]:hover:text-white/80":"text-[#1E2024] [&_a]:text-[#1E2024] [&_a]:hover:text-[#1E2024]/80")})]})]})},E=({method:t,userData:e,onOpenShareModal:x,chanceBadgeText:r,completedText:d,usedText:o,loadingText:h})=>{const n=t.status||"pending",c=t.loading||!1,m=t.disabled||n==="completed"||n==="used"||c,p=()=>{if(!e?.isLoggedIn){t.onLoginRequired?.();return}t.openShareModal&&x&&x(),t.onClick()},u={pending:c?h:t?.buttonText||"Redeem now",completed:d,used:o};return l("div",{className:s("chance-method-item","flex flex-col items-start gap-[8px]","tablet:flex-row tablet:items-center tablet:gap-4","transition-all",{"opacity-60":m}),children:[l("div",{className:s("chance-method-info","flex flex-1 flex-col gap-[4px]","min-w-0"),children:[l("div",{className:"flex flex-wrap items-center gap-[4px]",children:[a("p",{className:s("chance-method-title","text-info-primary","text-[14px] font-[700] leading-[1.4] ","lg-desktop:text-[18px] desktop:text-[16px]"),children:t.title}),a("span",{className:s("chance-badge","text-[14px] leading-[1.4] ","lg-desktop:text-[18px] desktop:text-[16px]","font-[700]","shrink-0",{"text-[#ff6b35]":n==="pending","text-[#4caf50]":n==="completed","text-[#75787F]":n==="used"}),children:r})]}),a("p",{className:s("chance-method-description","text-info-primary","text-[14px] leading-[1.4] ","lg-desktop:text-[18px] desktop:text-[16px]","font-[700]"),children:t.description})]}),a("div",{className:"chance-method-action shrink-0",children:a(C,{onClick:p,disabled:m,className:s("chance-button","lg-desktop:min-w-[162px] min-w-[132px]",{"bg-[#4caf50]":n==="completed","bg-[#75787F]":n==="used"}),children:u[n]})})]})};var P=D;export{D as ChanceMethods,P as default};
 //# sourceMappingURL=ChanceMethods.js.map