npm - @anker-in/headless-ui - Versions diffs - 1.3.21 → 1.3.22-alpha.1781754422536 - Mend

@anker-in/headless-ui 1.3.21 → 1.3.22-alpha.1781754422536

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (623) hide show

package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,jsxs as S}from"react/jsx-runtime";import A,{useEffect as B,useImperativeHandle as V,useMemo as q,useRef as f,useState as w}from"react";import{Heading as L,Picture as O,Text as Q}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as U}from"../../shared/Styles.js";import{useExposure as G}from"../../hooks/useExposure.js";import{Swiper as J,SwiperSlide as K}from"swiper/react";import{Pagination as X,EffectFade as Y}from"swiper/modules";import{motion as Z,AnimatePresence as $}from"framer-motion";import{useMediaQuery as ee}from"react-responsive";const te="video",ie="tabs_with_media",ae=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],M=A.forwardRef(({data:E,className:R},z)=>{const{title:v,poster:C,video:D,mobvideo:H,items:m=[],timeIdx:r=ae,theme:P="light"}=E,[g,W]=w(null),y=f([]),_=f(null),u=f(null),x=f(null);G(x,{componentType:te,componentName:ie,componentTitle:v}),V(z,()=>x.current);const se=e=>{const i=_.current,n=y.current[e];if(i&&n){const t=i.getBoundingClientRect(),o=n.getBoundingClientRect().left-t.left-i.clientWidth/2+n.clientWidth/2;i.scrollTo({left:i.scrollLeft+o,behavior:"smooth"})}},T=ee({query:"(max-width: 768px)"}),[ne,b,j,c,F]=q(()=>{const n=m.length,t=m?.map((l,o)=>({...l,key:o,index:o}))||[],s=m?.map((l,o)=>({...l,key:o+n,index:o}))||[];return[t,t.concat(s),5,2,n]},[m,T]),[h,k]=w(c),[d,I]=w(b.slice(0,j)),N=(e,i,n)=>{if(e!==h&&i!==c){if(i>c){const t=i-c,s=[...d];s.splice(0,t);const l=d[d.length-1]?.key+1,o=[...b].splice(l,t);s.push(...o),I([...s])}if(i<c){const t=c-i,s=[...d];s.splice(-t);const l=d[0]?.key,o=[...b].splice(F+l-t,t);s.unshift(...o),I([...s])}if(k(e),g?.slideTo(e),!n){let t=0;r.forEach(s=>{s.highlightIdx<e&&(t+=s.time)}),u.current&&(u.current.currentTime=t)}}};return B(()=>{const e=u.current;if(!e)return;const i=()=>{const n=e.currentTime;for(let t=0;t<r.length;t++){const s=t===0?0:r[t-1].point;if(n>=s&&n<r[t].point){N(r[t].highlightIdx,r[t].highlightIdx,!0);break}}n>=r[r.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",i),()=>{e.removeEventListener("timeupdate",i)}},[g,r]),S("section",{ref:x,"data-ui-component-id":"TabsWithMedia",className:p("tabs-with-media text-info-primary flex flex-col overflow-hidden sm:overflow-visible",{"aiui-dark":P==="dark"},R),children:[a(L,{as:"h3",size:4,html:v,className:"tabs-with-media__title text-center"}),a("div",{className:"tabs-with-media__tabs-wrapper scrollbar-hidden relative w-full overflow-x-auto sm:overflow-visible",children:a("div",{className:p("tabs-with-media__tabs-inner tablet:w-fit mx-auto mt-[16px] w-full max-w-[824px]"),children:a("div",{className:p("tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:_,children:a($,{mode:"popLayout",children:d?.map((e,i)=>a(Z.div,{layout:!0,ref:n=>{y.current[e?.index]=n},onClick:()=>{N(e?.key,i)},className:"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:a("div",{className:"tabs-with-media__tab-inner flex items-center justify-between",children:S("div",{className:p("tabs-with-media__tab-content flex",{"flex items-center justify-center gap-[8px] rounded-btn bg-[#fff] p-2 md:gap-[4px] md:p-1":h===e?.key}),children:[a("div",{className:p("tabs-with-media__tab-icon lg-desktop:size-[48px] flex size-[28] items-center justify-center rounded-full md:shrink-0",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":h!==e?.index}),style:h===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:a(O,{source:e?.icon?.url,alt:e?.icon?.alt,className:"tabs-with-media__tab-icon-image size-[22px] md:size-[14px]"})}),a("div",{className:"tabs-with-media__tab-text-wrapper",children:a(L,{as:"h4",size:2,html:e?.tab,className:p("tabs-with-media__tab-text dynamic-width-heading xs:text-[16px] line-clamp-1 size-0 overflow-hidden whitespace-nowrap text-nowrap text-black opacity-0 transition-all duration-300 ease-linear sm:text-[18px]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":h===e?.key})})})]})})},e?.key))})})})}),a("div",{className:"tabs-with-media__description-container lg-desktop:mt-[24px] mt-[16px]",children:a(J,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[X,Y],onSlideChange:e=>{const i=e.realIndex;k(i)},onSwiper:e=>W(e),className:"tabs-with-media__description-swiper",children:m.map((e,i)=>a(K,{style:{transition:"opacity 1s ease-in-out"},className:"tabs-with-media__description-slide rounded-btn",children:a("div",{className:"tabs-with-media__description-content",children:a(Q,{as:"p",size:2,html:e.desc,className:"tabs-with-media__description-text desktop:text-[20px] lg-desktop:text-[18px] text-center"})})},i))})}),a("div",{className:"tabs-with-media__video-wrapper rounded-box laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px] mt-[24px] overflow-hidden",children:a("video",{className:"tabs-with-media__video desktop:h-[448px] lg-desktop:h-[560px] mx-auto h-[360px] w-fit",src:T?H?.url:D?.url,poster:C?.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:u})})]})});M.displayName="TabsWithMedia";var fe=U(M);export{fe as default};
+"use client";import{jsx as s,jsxs as S}from"react/jsx-runtime";import A,{useEffect as B,useImperativeHandle as V,useMemo as q,useRef as f,useState as w}from"react";import{Heading as L,Picture as O,Text as Q}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as U}from"../../shared/Styles.js";import{useExposure as G}from"../../hooks/useExposure.js";import{Swiper as J,SwiperSlide as K}from"swiper/react";import{Pagination as X,EffectFade as Y}from"swiper/modules";import{motion as Z,AnimatePresence as $}from"framer-motion";import{useIsomorphicMediaQuery as ee}from"../../hooks/useIsomorphicMediaQuery.js";const te="video",ie="tabs_with_media",se=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],M=A.forwardRef(({data:E,className:R},z)=>{const{title:v,poster:C,video:D,mobvideo:H,items:m=[],timeIdx:r=se,theme:P="light"}=E,[g,W]=w(null),y=f([]),_=f(null),u=f(null),x=f(null);G(x,{componentType:te,componentName:ie,componentTitle:v}),V(z,()=>x.current);const ae=e=>{const i=_.current,n=y.current[e];if(i&&n){const t=i.getBoundingClientRect(),o=n.getBoundingClientRect().left-t.left-i.clientWidth/2+n.clientWidth/2;i.scrollTo({left:i.scrollLeft+o,behavior:"smooth"})}},T=ee({query:"(max-width: 768px)"}),[ne,b,j,c,F]=q(()=>{const n=m.length,t=m?.map((l,o)=>({...l,key:o,index:o}))||[],a=m?.map((l,o)=>({...l,key:o+n,index:o}))||[];return[t,t.concat(a),5,2,n]},[m,T]),[h,k]=w(c),[d,I]=w(b.slice(0,j)),N=(e,i,n)=>{if(e!==h&&i!==c){if(i>c){const t=i-c,a=[...d];a.splice(0,t);const l=d[d.length-1]?.key+1,o=[...b].splice(l,t);a.push(...o),I([...a])}if(i<c){const t=c-i,a=[...d];a.splice(-t);const l=d[0]?.key,o=[...b].splice(F+l-t,t);a.unshift(...o),I([...a])}if(k(e),g?.slideTo(e),!n){let t=0;r.forEach(a=>{a.highlightIdx<e&&(t+=a.time)}),u.current&&(u.current.currentTime=t)}}};return B(()=>{const e=u.current;if(!e)return;const i=()=>{const n=e.currentTime;for(let t=0;t<r.length;t++){const a=t===0?0:r[t-1].point;if(n>=a&&n<r[t].point){N(r[t].highlightIdx,r[t].highlightIdx,!0);break}}n>=r[r.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",i),()=>{e.removeEventListener("timeupdate",i)}},[g,r]),S("section",{ref:x,"data-ui-component-id":"TabsWithMedia",className:p("tabs-with-media text-info-primary flex flex-col overflow-hidden sm:overflow-visible",{"aiui-dark":P==="dark"},R),children:[s(L,{as:"h3",size:4,html:v,className:"tabs-with-media__title text-center"}),s("div",{className:"tabs-with-media__tabs-wrapper scrollbar-hidden relative w-full overflow-x-auto sm:overflow-visible",children:s("div",{className:p("tabs-with-media__tabs-inner tablet:w-fit mx-auto mt-[16px] w-full max-w-[824px]"),children:s("div",{className:p("tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:_,children:s($,{mode:"popLayout",children:d?.map((e,i)=>s(Z.div,{layout:!0,ref:n=>{y.current[e?.index]=n},onClick:()=>{N(e?.key,i)},className:"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:s("div",{className:"tabs-with-media__tab-inner flex items-center justify-between",children:S("div",{className:p("tabs-with-media__tab-content flex",{"flex items-center justify-center gap-[8px] rounded-btn bg-[#fff] p-2 md:gap-[4px] md:p-1":h===e?.key}),children:[s("div",{className:p("tabs-with-media__tab-icon lg-desktop:size-[48px] flex size-[28] items-center justify-center rounded-full md:shrink-0",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":h!==e?.index}),style:h===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:s(O,{source:e?.icon?.url,alt:e?.icon?.alt,className:"tabs-with-media__tab-icon-image size-[22px] md:size-[14px]"})}),s("div",{className:"tabs-with-media__tab-text-wrapper",children:s(L,{as:"h4",size:2,html:e?.tab,className:p("tabs-with-media__tab-text dynamic-width-heading xs:text-[16px] line-clamp-1 size-0 overflow-hidden whitespace-nowrap text-nowrap text-black opacity-0 transition-all duration-300 ease-linear sm:text-[18px]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":h===e?.key})})})]})})},e?.key))})})})}),s("div",{className:"tabs-with-media__description-container lg-desktop:mt-[24px] mt-[16px]",children:s(J,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[X,Y],onSlideChange:e=>{const i=e.realIndex;k(i)},onSwiper:e=>W(e),className:"tabs-with-media__description-swiper",children:m.map((e,i)=>s(K,{style:{transition:"opacity 1s ease-in-out"},className:"tabs-with-media__description-slide rounded-btn",children:s("div",{className:"tabs-with-media__description-content",children:s(Q,{as:"p",size:2,html:e.desc,className:"tabs-with-media__description-text desktop:text-[20px] lg-desktop:text-[18px] text-center"})})},i))})}),s("div",{className:"tabs-with-media__video-wrapper rounded-box laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px] mt-[24px] overflow-hidden",children:s("video",{className:"tabs-with-media__video desktop:h-[448px] lg-desktop:h-[560px] mx-auto h-[360px] w-fit",src:T?H?.url:D?.url,poster:C?.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:u})})]})});M.displayName="TabsWithMedia";var fe=U(M);export{fe as default};
 //# sourceMappingURL=TabsWithMedia.js.map

package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabsWithMedia/TabsWithMedia.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useMediaQuery } from 'react-responsive'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, video, mobvideo, items = [], timeIdx = defaultTimeIdx, theme = 'light' } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    // \u4E3A\u7B2C\u4E8C\u4E2A\u5217\u8868\u7684\u5143\u7D20\u521B\u5EFA\u552F\u4E00\u7684 key,\u907F\u514D\u91CD\u590D\n    const listSecond =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index + listLength,\n          index: index,\n        }\n      }) || []\n\n    return [list, list.concat(listSecond), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach(item => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn(\n        'tabs-with-media text-info-primary flex flex-col overflow-hidden sm:overflow-visible',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"tabs-with-media__title text-center\" />\n      <div className=\"tabs-with-media__tabs-wrapper scrollbar-hidden relative w-full overflow-x-auto sm:overflow-visible\">\n        <div className={cn('tabs-with-media__tabs-inner tablet:w-fit mx-auto mt-[16px] w-full max-w-[824px]')}>\n          <div\n            className={cn(\n              'tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]'\n            )}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={el => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"tabs-with-media__tab-inner flex items-center justify-between\">\n                    <div\n                      className={cn('tabs-with-media__tab-content flex', {\n                        'flex items-center justify-center gap-[8px] rounded-btn bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'tabs-with-media__tab-icon lg-desktop:size-[48px] flex size-[28] items-center justify-center rounded-full md:shrink-0',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon?.url}\n                          alt={item?.icon?.alt}\n                          className=\"tabs-with-media__tab-icon-image size-[22px] md:size-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"tabs-with-media__tab-text-wrapper\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'tabs-with-media__tab-text dynamic-width-heading xs:text-[16px] line-clamp-1 size-0 overflow-hidden whitespace-nowrap text-nowrap text-black opacity-0 transition-all duration-300 ease-linear sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100': idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"tabs-with-media__description-container lg-desktop:mt-[24px] mt-[16px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={swiper => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={swiper => setSwiper(swiper)}\n          className=\"tabs-with-media__description-swiper\"\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide\n              key={ind}\n              style={{ transition: 'opacity 1s ease-in-out' }}\n              className=\"tabs-with-media__description-slide rounded-btn\"\n            >\n              <div className=\"tabs-with-media__description-content\">\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"tabs-with-media__description-text desktop:text-[20px] lg-desktop:text-[18px] text-center\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"tabs-with-media__video-wrapper rounded-box laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px] mt-[24px] overflow-hidden\">\n        <video\n          className=\"tabs-with-media__video desktop:h-[448px] lg-desktop:h-[560px] mx-auto h-[360px] w-fit\"\n          src={isMob ? mobvideo?.url : video?.url}\n          poster={poster?.url}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Pagination", "EffectFade", "motion", "AnimatePresence", "useMediaQuery", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "data", "className", "ref", "title", "poster", "video", "mobvideo", "items", "timeIdx", "theme", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "listSecond", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useIsomorphicMediaQuery } from '../../hooks/useIsomorphicMediaQuery.js'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, video, mobvideo, items = [], timeIdx = defaultTimeIdx, theme = 'light' } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useIsomorphicMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    // \u4E3A\u7B2C\u4E8C\u4E2A\u5217\u8868\u7684\u5143\u7D20\u521B\u5EFA\u552F\u4E00\u7684 key,\u907F\u514D\u91CD\u590D\n    const listSecond =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index + listLength,\n          index: index,\n        }\n      }) || []\n\n    return [list, list.concat(listSecond), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach(item => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn(\n        'tabs-with-media text-info-primary flex flex-col overflow-hidden sm:overflow-visible',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"tabs-with-media__title text-center\" />\n      <div className=\"tabs-with-media__tabs-wrapper scrollbar-hidden relative w-full overflow-x-auto sm:overflow-visible\">\n        <div className={cn('tabs-with-media__tabs-inner tablet:w-fit mx-auto mt-[16px] w-full max-w-[824px]')}>\n          <div\n            className={cn(\n              'tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]'\n            )}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={el => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"tabs-with-media__tab-inner flex items-center justify-between\">\n                    <div\n                      className={cn('tabs-with-media__tab-content flex', {\n                        'flex items-center justify-center gap-[8px] rounded-btn bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'tabs-with-media__tab-icon lg-desktop:size-[48px] flex size-[28] items-center justify-center rounded-full md:shrink-0',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon?.url}\n                          alt={item?.icon?.alt}\n                          className=\"tabs-with-media__tab-icon-image size-[22px] md:size-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"tabs-with-media__tab-text-wrapper\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'tabs-with-media__tab-text dynamic-width-heading xs:text-[16px] line-clamp-1 size-0 overflow-hidden whitespace-nowrap text-nowrap text-black opacity-0 transition-all duration-300 ease-linear sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100': idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"tabs-with-media__description-container lg-desktop:mt-[24px] mt-[16px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={swiper => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={swiper => setSwiper(swiper)}\n          className=\"tabs-with-media__description-swiper\"\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide\n              key={ind}\n              style={{ transition: 'opacity 1s ease-in-out' }}\n              className=\"tabs-with-media__description-slide rounded-btn\"\n            >\n              <div className=\"tabs-with-media__description-content\">\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"tabs-with-media__description-text desktop:text-[20px] lg-desktop:text-[18px] text-center\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"tabs-with-media__video-wrapper rounded-box laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px] mt-[24px] overflow-hidden\">\n        <video\n          className=\"tabs-with-media__video desktop:h-[448px] lg-desktop:h-[560px] mx-auto h-[360px] w-fit\"\n          src={isMob ? mobvideo?.url : video?.url}\n          poster={poster?.url}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Pagination", "EffectFade", "motion", "AnimatePresence", "useIsomorphicMediaQuery", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "data", "className", "ref", "title", "poster", "video", "mobvideo", "items", "timeIdx", "theme", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "listSecond", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
 }

package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
-declare const _default: React.ForwardRefExoticComponent<Omit<ThreeDCarouselProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<ThreeDCarouselProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as O,jsx as t,jsxs as o}from"react/jsx-runtime";import n,{useRef as d,useImperativeHandle as E}from"react";import{Button as w,Heading as p,Picture as x,Text as b}from"../../components/index.js";import{cn as i,getLocalizedPath as _}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import{useExposure as P}from"../../hooks/useExposure.js";import{useAiuiContext as R}from"../AiuiProvider/index.js";import{Swiper as g,SwiperSlide as k}from"swiper/react";import{Navigation as j,EffectCoverflow as B}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const M="carousel",H="three_d_carousel",U=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),I=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),N=n.forwardRef(({data:y,className:S},T)=>{const{title:u,items:a=[]}=y,m=a.length<4?[...a,...a]:a,r=d(null),c=d(null),f=d(null),[C,L]=n.useState(180),{locale:h="us"}=R();return P(c,{componentType:M,componentName:H,componentTitle:u}),E(T,()=>c.current),n.useEffect(()=>{const e=f.current;if(!e)return;const l=()=>{const z=e.offsetWidth,v=Math.round(z*.125);L(v),r.current?.params?.coverflowEffect&&(r.current.params.coverflowEffect.stretch=v,r.current.update())};l();const s=new ResizeObserver(l);return s.observe(e),()=>s.disconnect()},[]),o("section",{ref:c,"data-ui-component-id":"ThreeDCarousel",className:i("three-d-carousel laptop:overflow-hidden w-full overflow-visible",S),children:[t(p,{as:"h1",size:4,html:u,className:"three-d-carousel__title laptop:text-center text-left"}),o("div",{ref:f,className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full",children:[t(g,{onSwiper:e=>r.current=e,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[B,j],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:C,depth:300,modifier:1,slideShadows:!0},children:m.map((e,l)=>t(k,{className:"three-d-carousel__slide relative !w-1/2 cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:s})=>o(O,{children:[t(x,{source:e.imageUrl?.url||"",alt:e.imageUrl?.alt||e.title,className:i("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:s?"":"brightness(50%) contrast(120%)"}}),o("div",{className:i("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":e.theme==="dark","opacity-0":!s}),children:[t(p,{as:"h2",size:2,html:e.title}),t(b,{as:"p",size:4,html:e.description,className:"three-d-carousel__image-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]"}),e.buttonText&&t("a",{href:_(e.buttonLink||"",h),className:"three-d-carousel__image-link ",children:t(w,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:e.buttonText})})]})]})},l))}),o("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[t("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:t(U,{})}),t("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:t(I,{})})]})]}),t("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:t(g,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:m.map((e,l)=>o(k,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[t(x,{source:e.mobImageUrl?.url||e.imageUrl?.url||"",alt:e.mobImageUrl?.alt||e.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),o("div",{className:i("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":e.theme==="dark"}),children:[t(p,{as:"h2",size:2,html:e.title}),t(b,{as:"p",size:4,html:e.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),e.buttonText&&t("a",{href:_(e.buttonLink||"",h),className:"three-d-carousel__image-mobile-link ",children:t(w,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:e.buttonText})})]})]},l))})})]})});N.displayName="ThreeDCarousel";var $=D(N,{style:"overflow: hidden;"});export{$ as default};
+"use client";import{Fragment as V,jsx as t,jsxs as o}from"react/jsx-runtime";import n,{useRef as d,useImperativeHandle as P}from"react";import{Button as _,Heading as p,Picture as g,Text as k}from"../../components/index.js";import{cn as i,getLocalizedPath as N}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import{useExposure as B}from"../../hooks/useExposure.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{Swiper as S,SwiperSlide as T}from"swiper/react";import{Navigation as U,EffectCoverflow as $}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const u="carousel",m="three_d_carousel",I=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),O=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),C=n.forwardRef(({data:L,className:z},D)=>{const{title:f,items:a=[]}=L,h=a.length<4?[...a,...a]:a,r=d(null),c=d(null),v=d(null),[E,R]=n.useState(180),{locale:w="us",trackingData:x}=M();return B(c,{componentType:u,componentName:m,componentTitle:f}),P(D,()=>c.current),n.useEffect(()=>{const e=v.current;if(!e)return;const l=()=>{const H=e.offsetWidth,b=Math.round(H*.125);R(b),r.current?.params?.coverflowEffect&&(r.current.params.coverflowEffect.stretch=b,r.current.update())};l();const s=new ResizeObserver(l);return s.observe(e),()=>s.disconnect()},[]),o("section",{ref:c,"data-ui-component-id":"ThreeDCarousel",className:i("three-d-carousel laptop:overflow-hidden w-full overflow-visible",z),children:[t(p,{as:"h1",size:4,html:f,className:"three-d-carousel__title laptop:text-center text-left"}),o("div",{ref:v,className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full",children:[t(S,{onSwiper:e=>r.current=e,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[$,U],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:E,depth:300,modifier:1,slideShadows:!0},children:h.map((e,l)=>t(T,{className:"three-d-carousel__slide relative !w-1/2 cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:s})=>o(V,{children:[t(g,{source:e.imageUrl?.url||"",alt:e.imageUrl?.alt||e.title,className:i("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:s?"":"brightness(50%) contrast(120%)"}}),o("div",{className:i("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":e.theme==="dark","opacity-0":!s}),children:[t(p,{as:"h2",size:2,html:e.title}),t(k,{as:"p",size:4,html:e.description,className:"three-d-carousel__image-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]"}),e.buttonText&&t("a",{href:y(N(e.buttonLink||"",w),`${x?.contextHandle||""}_${u}_${m}`),className:"three-d-carousel__image-link ",children:t(_,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:e.buttonText})})]})]})},l))}),o("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[t("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:t(I,{})}),t("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:t(O,{})})]})]}),t("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:t(S,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:h.map((e,l)=>o(T,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[t(g,{source:e.mobImageUrl?.url||e.imageUrl?.url||"",alt:e.mobImageUrl?.alt||e.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),o("div",{className:i("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":e.theme==="dark"}),children:[t(p,{as:"h2",size:2,html:e.title}),t(k,{as:"p",size:4,html:e.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),e.buttonText&&t("a",{href:y(N(e.buttonLink||"",w),`${x?.contextHandle||""}_${u}_${m}`),className:"three-d-carousel__image-mobile-link ",children:t(_,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:e.buttonText})})]})]},l))})})]})});C.displayName="ThreeDCarousel";var oe=j(C,{style:"overflow: hidden;"});export{oe as default};
 //# sourceMappingURL=ThreeDCarousel.js.map

package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const cloneItems = items.length < 4 ? [...items, ...items] : items\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [stretchValue, setStretchValue] = React.useState(180)\n  const { locale = 'us' } = useAiuiContext()\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // \u52A8\u6001\u8BA1\u7B97 stretch \u503C\uFF0C\u8BA9\u4E09\u4E2A slide \u521A\u597D\u5360\u6EE1\u5BB9\u5668\u5BBD\u5EA6\n  React.useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const updateStretch = () => {\n      const containerWidth = container.offsetWidth\n      // stretch \u4E3A\u5BB9\u5668\u5BBD\u5EA6\u7684 12.5%\uFF0C\u8BA9\u4E09\u4E2A slide (50% + 2*25%) \u521A\u597D\u5360\u6EE1\n      const newStretch = Math.round(containerWidth * 0.125)\n      setStretchValue(newStretch)\n\n      // \u66F4\u65B0 Swiper \u914D\u7F6E\n      if (swiperRef.current?.params?.coverflowEffect) {\n        swiperRef.current.params.coverflowEffect.stretch = newStretch\n        swiperRef.current.update()\n      }\n    }\n\n    // \u521D\u59CB\u5316\u8BA1\u7B97\n    updateStretch()\n\n    // \u76D1\u542C\u5BB9\u5668\u5C3A\u5BF8\u53D8\u5316\n    const resizeObserver = new ResizeObserver(updateStretch)\n    resizeObserver.observe(container)\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div\n        ref={containerRef}\n        className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full\"\n      >\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={0}\n          loop\n          slidesPerView={'auto'}\n          // loopAdditionalSlides={2}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: stretchValue,\n            depth: 300,\n            modifier: 1,\n            slideShadows: true,\n          }}\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-1/2 cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden')}\n                    imgClassName=\"h-full object-cover\"\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div\n                    className={cn(\n                      'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                      {\n                        'aiui-dark': item.theme === 'dark',\n                        'opacity-0': !isActive,\n                      }\n                    )}\n                  >\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]\"\n                    />\n                    {item.buttonText && (\n                      <a\n                        href={getLocalizedPath(item.buttonLink || '', locale)}\n                        className=\"three-d-carousel__image-link \"\n                      >\n                        <Button\n                          size=\"base\"\n                          variant=\"secondary\"\n                          className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n                        >\n                          {item.buttonText}\n                        </Button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n        <Swiper\n          loop={true}\n          loopAdditionalSlides={1}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden\"\n                imgClassName=\"h-full object-cover\"\n              />\n              <div\n                className={cn(\n                  'three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px]\"\n                />\n                {item.buttonText && (\n                  <a\n                    href={getLocalizedPath(item.buttonLink || '', locale)}\n                    className=\"three-d-carousel__image-mobile-link \"\n                  >\n                    <Button size=\"base\" variant=\"secondary\" className=\"three-d-carousel__image-mobile-button mt-3\">\n                      {item.buttonText}\n                    </Button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel, { style: 'overflow: hidden;' })\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Button", "Heading", "Picture", "Text", "cn", "getLocalizedPath", "withLayout", "useExposure", "useAiuiContext", "Swiper", "SwiperSlide", "Navigation", "EffectCoverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "ref", "title", "items", "cloneItems", "swiperRef", "boxRef", "containerRef", "stretchValue", "setStretchValue", "locale", "container", "updateStretch", "containerWidth", "newStretch", "resizeObserver", "swiper", "item", "index", "isActive", "ThreeDCarousel_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const cloneItems = items.length < 4 ? [...items, ...items] : items\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [stretchValue, setStretchValue] = React.useState(180)\n  const { locale = 'us', trackingData } = useAiuiContext()\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // \u52A8\u6001\u8BA1\u7B97 stretch \u503C\uFF0C\u8BA9\u4E09\u4E2A slide \u521A\u597D\u5360\u6EE1\u5BB9\u5668\u5BBD\u5EA6\n  React.useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const updateStretch = () => {\n      const containerWidth = container.offsetWidth\n      // stretch \u4E3A\u5BB9\u5668\u5BBD\u5EA6\u7684 12.5%\uFF0C\u8BA9\u4E09\u4E2A slide (50% + 2*25%) \u521A\u597D\u5360\u6EE1\n      const newStretch = Math.round(containerWidth * 0.125)\n      setStretchValue(newStretch)\n\n      // \u66F4\u65B0 Swiper \u914D\u7F6E\n      if (swiperRef.current?.params?.coverflowEffect) {\n        swiperRef.current.params.coverflowEffect.stretch = newStretch\n        swiperRef.current.update()\n      }\n    }\n\n    // \u521D\u59CB\u5316\u8BA1\u7B97\n    updateStretch()\n\n    // \u76D1\u542C\u5BB9\u5668\u5C3A\u5BF8\u53D8\u5316\n    const resizeObserver = new ResizeObserver(updateStretch)\n    resizeObserver.observe(container)\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div\n        ref={containerRef}\n        className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full\"\n      >\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={0}\n          loop\n          slidesPerView={'auto'}\n          // loopAdditionalSlides={2}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: stretchValue,\n            depth: 300,\n            modifier: 1,\n            slideShadows: true,\n          }}\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-1/2 cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden')}\n                    imgClassName=\"h-full object-cover\"\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div\n                    className={cn(\n                      'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                      {\n                        'aiui-dark': item.theme === 'dark',\n                        'opacity-0': !isActive,\n                      }\n                    )}\n                  >\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]\"\n                    />\n                    {item.buttonText && (\n                      <a\n                        href={trackUrlRef(\n                          getLocalizedPath(item.buttonLink || '', locale),\n                          `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                        )}\n                        className=\"three-d-carousel__image-link \"\n                      >\n                        <Button\n                          size=\"base\"\n                          variant=\"secondary\"\n                          className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n                        >\n                          {item.buttonText}\n                        </Button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n        <Swiper\n          loop={true}\n          loopAdditionalSlides={1}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {cloneItems.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden\"\n                imgClassName=\"h-full object-cover\"\n              />\n              <div\n                className={cn(\n                  'three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px]\"\n                />\n                {item.buttonText && (\n                  <a\n                    href={trackUrlRef(\n                      getLocalizedPath(item.buttonLink || '', locale),\n                      `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                    )}\n                    className=\"three-d-carousel__image-mobile-link \"\n                  >\n                    <Button size=\"base\" variant=\"secondary\" className=\"three-d-carousel__image-mobile-button mt-3\">\n                      {item.buttonText}\n                    </Button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel, { style: 'overflow: hidden;' })\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Button", "Heading", "Picture", "Text", "cn", "getLocalizedPath", "withLayout", "useExposure", "useAiuiContext", "trackUrlRef", "Swiper", "SwiperSlide", "Navigation", "EffectCoverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "ref", "title", "items", "cloneItems", "swiperRef", "boxRef", "containerRef", "stretchValue", "setStretchValue", "locale", "trackingData", "container", "updateStretch", "containerWidth", "newStretch", "resizeObserver", "swiper", "item", "index", "isActive", "ThreeDCarousel_default"]
 }

package/dist/esm/biz-components/Title/index.d.ts CHANGED Viewed

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

package/dist/esm/biz-components/Title/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as i,jsxs as k}from"react/jsx-runtime";import st,{useEffect as ot,useRef as g,useImperativeHandle as at,useState as lt}from"react";import{gsap as y}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as o}from"../../helpers/utils.js";import{cva as V}from"class-variance-authority";import{Heading as dt,Text as A,Countdown as ct}from"../../components/index.js";import{withLayout as ut}from"../../shared/Styles.js";import{trackUrlRef as mt}from"../../shared/trackUrlRef.js";import{useInView as pt}from"react-intersection-observer";const N="link",P="title";function ft(n){if(!n)return!1;if(typeof n=="string")return n.trim().length>0;const a=n?.root?.children;return!Array.isArray(a)||a.length===0?!1:a.some(e=>{const r=e?.children;return!Array.isArray(r)||r.length===0?!1:r.some(s=>typeof s?.text=="string"&&s.text.length>0)})}const ht=V("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),gt=V("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),S=({data:n,onClick:a,className:e})=>{const{theme:r="light",extensions:s,title:p,caption:x,align:f}=n;if(!s?.textLink)return null;const d=s?.link?mt(s.link,`${N}_${P}`):void 0;return k("a",{className:o({"aiui-dark":r==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":r==="light"},{"text-[#F5F6F7]":r==="dark"},{"justify-center mt-4":f==="center"},{"mt-1 laptop:mt-0":f==="left"},e),...d?{href:d}:{},"data-headless-type-name":`${N}#${P}`,"data-headless-title-desc-button":`${p}#${x}`,...a?{onClick:a}:{},children:[i("div",{className:"truncate whitespace-nowrap",children:s?.textLink}),i("div",{className:"lg-desktop:size-5 size-4",children:i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:i("path",{d:"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z",fill:r==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]})},$=st.forwardRef(({data:n,className:a,classNames:e,as:r="h2",weight:s="bold",onButtonClick:p,...x},f)=>{const{title:d,titleSize:_=4,caption:T,subtitle:F,content:H,countdown:t,showCountdown:B=!1,theme:h="light",extensions:I,align:c="left"}=n,L=g(null),u=g(null),l=g(null),m=g(null),[j,O]=lt(!0),{ref:U,inView:C}=pt();at(f,()=>L.current);const W=()=>{O(!1)},Z=t?.targetDateTime||t?.targetDate||"",q=t?.targetDateTime_tz,G=t?.labels?{day:t.labels.days||"Day",hour:t.labels.hours||"Hours",minute:t.labels.minutes||"Mins",second:t.labels.seconds||"Secs"}:void 0;return ot(()=>{y.registerPlugin(z,R);function J(){if(!u.current)return;const K=u.current?.clientHeight||80;l.current&&l.current.revert(),m.current&&m.current.kill(),l.current=new z(u.current,{type:"words",wordsClass:"word"});const w=l.current.words;y.set(w,{opacity:0}),m.current=R.create({trigger:u.current,start:"bottom bottom-=4%",end:`bottom+=${K*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:Q=>{const X=Q.progress,D=w.length||1,Y=.5,b=1/D,M=b*(1-Y),E=(D-1)*M+b,tt=Math.min(1,E>0?X/E:0);w.forEach((et,nt)=>{const rt=nt*M,it=b;let v=(tt-rt)/it;v=Math.max(0,Math.min(1,v)),y.set(et,{opacity:v})})}})}return C&&J(),()=>{l.current&&l.current.revert(),m.current&&m.current.kill()}},[C]),k("div",{...x,id:I?.id,className:o("titleBottom title-box flex items-end justify-between gap-2 pb-6",a,e?.wrapper),ref:L,children:[k("div",{ref:U,className:o("flex-1",e?.container,{"aiui-dark":h==="dark","text-center":c==="center","text-left":c==="left"}),children:[(T||d)&&i(dt,{ref:u,as:r,size:_,html:T||d,weight:s,className:o(ht({theme:h}),e?.title)}),F&&i(A,{html:F,as:"p",className:o(gt({theme:h}),e?.subtitle)}),ft(H)&&i(A,{html:H,as:"div",size:4,className:o("title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]",e?.content)}),i(S,{data:n,className:o({"laptop:hidden":c==="left"},e?.button),onClick:p}),B&&t&&j&&i(ct,{endDate:Z,endDate_tz:q,timeLabels:G,showDays:t?.showDays,showHours:t?.showHours,showMinutes:t?.showMinutes,showSeconds:t?.showSeconds,theme:h,onExpire:W,hideWhenExpired:!0,align:c==="center"?"center":"left",className:o("mt-4",e?.countdown)})]}),i(S,{data:n,className:o("hidden",{"laptop:flex":c==="left"},e?.button),onClick:p})]})});$.displayName="Title";var Ct=ut($);export{Ct as default};
+"use client";import{jsx as i,jsxs as E}from"react/jsx-runtime";import st,{useEffect as at,useRef as x,useImperativeHandle as lt,useState as ct}from"react";import{gsap as F}from"gsap";import{SplitText as N}from"gsap/dist/SplitText";import{ScrollTrigger as P}from"gsap/dist/ScrollTrigger";import{cn as s,extractLexicalText as L}from"../../helpers/index.js";import{cva as S}from"class-variance-authority";import{Heading as dt,Text as $,Countdown as ut}from"../../components/index.js";import{withLayout as mt}from"../../shared/Styles.js";import{useExposure as pt}from"../../hooks/useExposure.js";import{trackUrlRef as ft}from"../../shared/trackUrlRef.js";import{useAiuiContext as ht}from"../AiuiProvider/index.js";import{useInView as gt}from"react-intersection-observer";const C="link",D="title";function xt(n){if(!n)return!1;if(typeof n=="string")return n.trim().length>0;const a=n?.root?.children;return!Array.isArray(a)||a.length===0?!1:a.some(e=>{const r=e?.children;return!Array.isArray(r)||r.length===0?!1:r.some(o=>typeof o?.text=="string"&&o.text.length>0)})}const wt=S("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),bt=S("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),_=({data:n,onClick:a,className:e})=>{const{theme:r="light",extensions:o,title:f,caption:w,align:h}=n,{trackingData:d}=ht(),b=d?.contextHandle||"";if(!o?.textLink)return null;const l=o?.link?ft(o.link,`${b}_${C}_${D}`):void 0;return E("a",{className:s({"aiui-dark":r==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":r==="light"},{"text-[#F5F6F7]":r==="dark"},{"justify-center mt-4":h==="center"},{"mt-1 laptop:mt-0":h==="left"},e),...l?{href:l}:{},"data-headless-type-name":`${C}#${D}`,"data-headless-title-desc-button":`${f}#${w}`,...a?{onClick:a}:{},children:[i("div",{className:"truncate whitespace-nowrap",children:o?.textLink}),i("div",{className:"lg-desktop:size-5 size-4",children:i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:i("path",{d:"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z",fill:r==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]})},B=st.forwardRef(({data:n,className:a,classNames:e,as:r="h2",weight:o="bold",onButtonClick:f,...w},h)=>{const{title:d,titleSize:b=4,caption:l,subtitle:v,content:M,countdown:t,showCountdown:I=!1,theme:g="light",extensions:j,align:u="left"}=n,k=x(null),m=x(null),c=x(null),p=x(null),[O,U]=ct(!0),{ref:W,inView:z}=gt();lt(h,()=>k.current),pt(k,{componentType:C,componentName:D,componentTitle:L(l)||L(d)||"",componentDescription:L(v)||""});const Z=()=>{U(!1)},q=t?.targetDateTime||t?.targetDate||"",G=t?.targetDateTime_tz,J=t?.labels?{day:t.labels.days||"Day",hour:t.labels.hours||"Hours",minute:t.labels.minutes||"Mins",second:t.labels.seconds||"Secs"}:void 0;return at(()=>{F.registerPlugin(N,P);function K(){if(!m.current)return;const Q=m.current?.clientHeight||80;c.current&&c.current.revert(),p.current&&p.current.kill(),c.current=new N(m.current,{type:"words",wordsClass:"word"});const y=c.current.words;F.set(y,{opacity:0}),p.current=P.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${Q*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:X=>{const Y=X.progress,R=y.length||1,tt=.5,T=1/R,A=T*(1-tt),V=(R-1)*A+T,et=Math.min(1,V>0?Y/V:0);y.forEach((nt,rt)=>{const it=rt*A,ot=T;let H=(et-it)/ot;H=Math.max(0,Math.min(1,H)),F.set(nt,{opacity:H})})}})}return z&&K(),()=>{c.current&&c.current.revert(),p.current&&p.current.kill()}},[z]),E("div",{...w,id:j?.id,className:s("titleBottom title-box flex items-end justify-between gap-2 pb-6",a,e?.wrapper),ref:k,children:[E("div",{ref:W,className:s("flex-1",e?.container,{"aiui-dark":g==="dark","text-center":u==="center","text-left":u==="left"}),children:[(l||d)&&i(dt,{ref:m,as:r,size:b,html:l||d,weight:o,className:s(wt({theme:g}),e?.title)}),v&&i($,{html:v,as:"p",className:s(bt({theme:g}),e?.subtitle)}),xt(M)&&i($,{html:M,as:"div",size:4,className:s("title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]",e?.content)}),i(_,{data:n,className:s({"laptop:hidden":u==="left"},e?.button),onClick:f}),I&&t&&O&&i(ut,{endDate:q,endDate_tz:G,timeLabels:J,showDays:t?.showDays,showHours:t?.showHours,showMinutes:t?.showMinutes,showSeconds:t?.showSeconds,theme:g,onExpire:Z,hideWhenExpired:!0,align:u==="center"?"center":"left",className:s("mt-4",e?.countdown)})]}),i(_,{data:n,className:s("hidden",{"laptop:flex":u==="left"},e?.button),onClick:f})]})});B.displayName="Title";var Rt=mt(B);export{Rt as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Title/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n *   \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A &lt;div class=\"payload-richtext\"&gt;&lt;/div&gt;\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n  if (!content) return false\n  if (typeof content === 'string') return content.trim().length > 0\n  const children = content?.root?.children\n  if (!Array.isArray(children) || children.length === 0) return false\n  return children.some((node: any) => {\n    const nodeChildren = node?.children\n    if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n    return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n  })\n}\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-[#F5F6F7]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n  'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-[#F5F6F7]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst TitleButton = ({\n  data,\n  onClick,\n  className,\n}: {\n  data: TitleProps['data']\n  onClick?: () => void\n  className?: string\n}) => {\n  const { theme = 'light', extensions, title, caption, align } = data\n  if (!extensions?.textLink) return null\n\n  const href = extensions?.link ? trackUrlRef(extensions.link, `${componentType}_${componentName}`) : undefined\n\n  return (\n    <a\n      className={cn(\n        { 'aiui-dark': theme === 'dark' },\n        'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n        { 'text-[#080A0F]': theme === 'light' },\n        { 'text-[#F5F6F7]': theme === 'dark' },\n        { 'justify-center mt-4': align === 'center' },\n        { 'mt-1 laptop:mt-0': align === 'left' },\n        className\n      )}\n      {...(href ? { href } : {})}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${title}#${caption}`}\n      {...(onClick ? { onClick } : {})}\n    >\n      <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n      <div className=\"lg-desktop:size-5 size-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n            fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n            className=\"transition-all duration-[0.4s]\"\n          />\n        </svg>\n      </div>\n    </a>\n  )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n  ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, ...rest }, ref) => {\n    const {\n      title,\n      titleSize = 4,\n      caption,\n      subtitle,\n      content,\n      countdown,\n      showCountdown = false,\n      theme = 'light',\n      extensions,\n      align = 'left',\n    } = data\n    const innerRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLHeadingElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n    const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n    const handleCountdownEnd = () => {\n      setIsCountdownVisible(false)\n    }\n\n    // CMS field mapping: new targetDateTime > legacy targetDate\n    const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n    const countdownTz = countdown?.targetDateTime_tz\n    // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n    const countdownLabels = countdown?.labels\n      ? {\n          day: countdown.labels.days || 'Day',\n          hour: countdown.labels.hours || 'Hours',\n          minute: countdown.labels.minutes || 'Mins',\n          second: countdown.labels.seconds || 'Secs',\n        }\n      : undefined\n\n    useEffect(() => {\n      gsap.registerPlugin(SplitText, ScrollTrigger)\n      function gsapResize() {\n        if (!titleRef.current) return\n        const height = titleRef.current?.clientHeight || 80\n        if (splitTextInstance.current) {\n          splitTextInstance.current.revert()\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n        }\n        splitTextInstance.current = new SplitText(titleRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom-=4%',\n          end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n          scrub: true,\n          invalidateOnRefresh: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length || 1\n            const overlap = 0.5\n            const interval = 1 / total\n            const step = interval * (1 - overlap)\n            const lastEnd = (total - 1) * step + interval\n            const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n            words.forEach((word: any, i: number) => {\n              const start = i * step\n              const width = interval\n              let opacity = (normalizedProgress - start) / width\n              opacity = Math.max(0, Math.min(1, opacity))\n              gsap.set(word, { opacity })\n            })\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div\n        {...rest}\n        id={extensions?.id}\n        className={cn(\n          'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n          className,\n          classNames?.wrapper\n        )}\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1', classNames?.container, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-left': align === 'left',\n          })}\n        >\n          {(caption || title) && (\n            <Heading\n              ref={titleRef}\n              as={as}\n              size={titleSize as HeadingProps['size']}\n              html={caption || title}\n              weight={weight}\n              className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n            />\n          )}\n          {subtitle && (\n            <Text html={subtitle} as=\"p\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n          )}\n          {hasVisibleContent(content) && (\n            <Text\n              html={content}\n              as=\"div\"\n              size={4}\n              className={cn(\n                'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n                classNames?.content\n              )}\n            />\n          )}\n          <TitleButton\n            data={data}\n            className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n            onClick={onButtonClick}\n          />\n          {showCountdown && countdown && isCountdownVisible && (\n            <Countdown\n              endDate={countdownEndDate}\n              endDate_tz={countdownTz}\n              timeLabels={countdownLabels}\n              showDays={countdown?.showDays}\n              showHours={countdown?.showHours}\n              showMinutes={countdown?.showMinutes}\n              showSeconds={countdown?.showSeconds}\n              theme={theme}\n              onExpire={handleCountdownEnd}\n              hideWhenExpired={true}\n              align={align === 'center' ? 'center' : 'left'}\n              className={cn('mt-4', classNames?.countdown)}\n            />\n          )}\n        </div>\n        <TitleButton\n          data={data}\n          className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n          onClick={onButtonClick}\n        />\n      </div>\n    )\n  }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "href", "Title", "classNames", "as", "weight", "onButtonClick", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn, extractLexicalText } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text, Countdown, type HeadingProps } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u5224\u65AD content \u5B57\u6BB5\u662F\u5426\u6709\u5B9E\u9645\u53EF\u89C1\u5185\u5BB9\u3002\n * - string\uFF1A\u53BB\u6389\u7A7A\u767D\u540E\u975E\u7A7A\u5373\u6709\u5185\u5BB9\n * - SerializedEditorState\uFF1A\u68C0\u67E5 root.children \u5185\u662F\u5426\u5B58\u5728\u975E\u7A7A\u6587\u672C\u8282\u70B9\uFF0C\n *   \u907F\u514D convertLexicalToHTML \u628A\u7A7A\u6587\u6863\u8F93\u51FA\u4E3A &lt;div class=\"payload-richtext\"&gt;&lt;/div&gt;\n */\nfunction hasVisibleContent(content: string | { root?: { children?: unknown[] } } | null | undefined): boolean {\n  if (!content) return false\n  if (typeof content === 'string') return content.trim().length > 0\n  const children = content?.root?.children\n  if (!Array.isArray(children) || children.length === 0) return false\n  return children.some((node: any) => {\n    const nodeChildren = node?.children\n    if (!Array.isArray(nodeChildren) || nodeChildren.length === 0) return false\n    return nodeChildren.some((child: any) => typeof child?.text === 'string' && child.text.length > 0)\n  })\n}\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-[#F5F6F7]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n  'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-[#F5F6F7]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst TitleButton = ({\n  data,\n  onClick,\n  className,\n}: {\n  data: TitleProps['data']\n  onClick?: () => void\n  className?: string\n}) => {\n  const { theme = 'light', extensions, title, caption, align } = data\n  const { trackingData } = useAiuiContext()\n  const contextHandle = trackingData?.contextHandle || ''\n  if (!extensions?.textLink) return null\n\n  const href = extensions?.link\n    ? trackUrlRef(extensions.link, `${contextHandle}_${componentType}_${componentName}`)\n    : undefined\n\n  return (\n    <a\n      className={cn(\n        { 'aiui-dark': theme === 'dark' },\n        'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex cursor-pointer items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n        { 'text-[#080A0F]': theme === 'light' },\n        { 'text-[#F5F6F7]': theme === 'dark' },\n        { 'justify-center mt-4': align === 'center' },\n        { 'mt-1 laptop:mt-0': align === 'left' },\n        className\n      )}\n      {...(href ? { href } : {})}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${title}#${caption}`}\n      {...(onClick ? { onClick } : {})}\n    >\n      <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n      <div className=\"lg-desktop:size-5 size-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M5.52827 3.52864C5.78862 3.26829 6.21063 3.26829 6.47098 3.52864L10.471 7.52864C10.7313 7.78899 10.7313 8.21099 10.471 8.47134L6.47098 12.4713C6.21063 12.7317 5.78862 12.7317 5.52827 12.4713C5.26792 12.211 5.26792 11.789 5.52827 11.5286L9.05692 7.99999L5.52827 4.47134C5.26792 4.21099 5.26792 3.78899 5.52827 3.52864Z\"\n            fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n            className=\"transition-all duration-[0.4s]\"\n          />\n        </svg>\n      </div>\n    </a>\n  )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n  ({ data, className, classNames, as = 'h2', weight = 'bold', onButtonClick, ...rest }, ref) => {\n    const {\n      title,\n      titleSize = 4,\n      caption,\n      subtitle,\n      content,\n      countdown,\n      showCountdown = false,\n      theme = 'light',\n      extensions,\n      align = 'left',\n    } = data\n    const innerRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLHeadingElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n    const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: extractLexicalText(caption) || extractLexicalText(title) || '',\n      componentDescription: extractLexicalText(subtitle) || '',\n    })\n\n    // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n    const handleCountdownEnd = () => {\n      setIsCountdownVisible(false)\n    }\n\n    // CMS field mapping: new targetDateTime > legacy targetDate\n    const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n    const countdownTz = countdown?.targetDateTime_tz\n    // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n    const countdownLabels = countdown?.labels\n      ? {\n          day: countdown.labels.days || 'Day',\n          hour: countdown.labels.hours || 'Hours',\n          minute: countdown.labels.minutes || 'Mins',\n          second: countdown.labels.seconds || 'Secs',\n        }\n      : undefined\n\n    useEffect(() => {\n      gsap.registerPlugin(SplitText, ScrollTrigger)\n      function gsapResize() {\n        if (!titleRef.current) return\n        const height = titleRef.current?.clientHeight || 80\n        if (splitTextInstance.current) {\n          splitTextInstance.current.revert()\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n        }\n        splitTextInstance.current = new SplitText(titleRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom-=4%',\n          end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n          scrub: true,\n          invalidateOnRefresh: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length || 1\n            const overlap = 0.5\n            const interval = 1 / total\n            const step = interval * (1 - overlap)\n            const lastEnd = (total - 1) * step + interval\n            const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n            words.forEach((word: any, i: number) => {\n              const start = i * step\n              const width = interval\n              let opacity = (normalizedProgress - start) / width\n              opacity = Math.max(0, Math.min(1, opacity))\n              gsap.set(word, { opacity })\n            })\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div\n        {...rest}\n        id={extensions?.id}\n        className={cn(\n          'titleBottom title-box flex items-end justify-between gap-2 pb-6',\n          className,\n          classNames?.wrapper\n        )}\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1', classNames?.container, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-left': align === 'left',\n          })}\n        >\n          {(caption || title) && (\n            <Heading\n              ref={titleRef}\n              as={as}\n              size={titleSize as HeadingProps['size']}\n              html={caption || title}\n              weight={weight}\n              className={cn(titleHeadingVariants({ theme }), classNames?.title)}\n            />\n          )}\n          {subtitle && (\n            <Text html={subtitle} as=\"p\" className={cn(subtitleVariants({ theme }), classNames?.subtitle)} />\n          )}\n          {hasVisibleContent(content) && (\n            <Text\n              html={content}\n              as=\"div\"\n              size={4}\n              className={cn(\n                'title-content text-info-primary desktop:text-base desktop:mt-4 lg-desktop:text-[18px] mt-2 text-[14px] leading-[1.6]',\n                classNames?.content\n              )}\n            />\n          )}\n          <TitleButton\n            data={data}\n            className={cn({ 'laptop:hidden': align === 'left' }, classNames?.button)}\n            onClick={onButtonClick}\n          />\n          {showCountdown && countdown && isCountdownVisible && (\n            <Countdown\n              endDate={countdownEndDate}\n              endDate_tz={countdownTz}\n              timeLabels={countdownLabels}\n              showDays={countdown?.showDays}\n              showHours={countdown?.showHours}\n              showMinutes={countdown?.showMinutes}\n              showSeconds={countdown?.showSeconds}\n              theme={theme}\n              onExpire={handleCountdownEnd}\n              hideWhenExpired={true}\n              align={align === 'center' ? 'center' : 'left'}\n              className={cn('mt-4', classNames?.countdown)}\n            />\n          )}\n        </div>\n        <TitleButton\n          data={data}\n          className={cn('hidden', { ['laptop:flex']: align === 'left' }, classNames?.button)}\n          onClick={onButtonClick}\n        />\n      </div>\n    )\n  }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "aA0FI,OAeE,OAAAA,EAfF,QAAAC,MAAA,oBAzFJ,OAAOC,IAAS,aAAAC,GAAW,UAAAC,EAAQ,uBAAAC,GAAqB,YAAAC,OAAgB,QACxE,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,EAAI,sBAAAC,MAA0B,yBACvC,OAAS,OAAAC,MAAW,2BACpB,OAAS,WAAAC,GAAS,QAAAC,EAAM,aAAAC,OAAoC,4BAC5D,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,eAAAC,OAAmB,6BAI5B,OAAS,eAAAC,OAAmB,8BAC5B,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,aAAAC,OAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAQtB,SAASC,GAAkBC,EAAmF,CAC5G,GAAI,CAACA,EAAS,MAAO,GACrB,GAAI,OAAOA,GAAY,SAAU,OAAOA,EAAQ,KAAK,EAAE,OAAS,EAChE,MAAMC,EAAWD,GAAS,MAAM,SAChC,MAAI,CAAC,MAAM,QAAQC,CAAQ,GAAKA,EAAS,SAAW,EAAU,GACvDA,EAAS,KAAMC,GAAc,CAClC,MAAMC,EAAeD,GAAM,SAC3B,MAAI,CAAC,MAAM,QAAQC,CAAY,GAAKA,EAAa,SAAW,EAAU,GAC/DA,EAAa,KAAMC,GAAe,OAAOA,GAAO,MAAS,UAAYA,EAAM,KAAK,OAAS,CAAC,CACnG,CAAC,CACH,CAKA,MAAMC,GAAuBjB,EAAI,GAAI,CACnC,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,gBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EAKKkB,GAAmBlB,EACvB,oHACA,CACE,SAAU,CACR,MAAO,CACL,MAAO,iBACP,KAAM,gBACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CACF,EAEMmB,EAAc,CAAC,CACnB,KAAAC,EACA,QAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAAE,MAAAC,EAAQ,QAAS,WAAAC,EAAY,MAAAC,EAAO,QAAAC,EAAS,MAAAC,CAAM,EAAIP,EACzD,CAAE,aAAAQ,CAAa,EAAIrB,GAAe,EAClCsB,EAAgBD,GAAc,eAAiB,GACrD,GAAI,CAACJ,GAAY,SAAU,OAAO,KAElC,MAAMM,EAAON,GAAY,KACrBlB,GAAYkB,EAAW,KAAM,GAAGK,CAAa,IAAIpB,CAAa,IAAIC,CAAa,EAAE,EACjF,OAEJ,OACErB,EAAC,KACC,UAAWS,EACT,CAAE,YAAayB,IAAU,MAAO,EAChC,2LACA,CAAE,iBAAkBA,IAAU,OAAQ,EACtC,CAAE,iBAAkBA,IAAU,MAAO,EACrC,CAAE,sBAAuBI,IAAU,QAAS,EAC5C,CAAE,mBAAoBA,IAAU,MAAO,EACvCL,CACF,EACC,GAAIQ,EAAO,CAAE,KAAAA,CAAK,EAAI,CAAC,EACxB,0BAAyB,GAAGrB,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAO,GACnD,GAAIL,EAAU,CAAE,QAAAA,CAAQ,EAAI,CAAC,EAE9B,UAAAjC,EAAC,OAAI,UAAU,6BAA8B,SAAAoC,GAAY,SAAS,EAClEpC,EAAC,OAAI,UAAU,2BACb,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,OAAO,OAAO,OAAO,QAAQ,YAAY,KAAK,OAC1F,SAAAA,EAAC,QACC,EAAE,gUACF,KAAMmC,IAAU,OAAS,UAAY,UACrC,UAAU,iCACZ,EACF,EACF,GACF,CAEJ,EAEMQ,EAAQzC,GAAM,WAClB,CAAC,CAAE,KAAA8B,EAAM,UAAAE,EAAW,WAAAU,EAAY,GAAAC,EAAK,KAAM,OAAAC,EAAS,OAAQ,cAAAC,EAAe,GAAGC,CAAK,EAAGC,IAAQ,CAC5F,KAAM,CACJ,MAAAZ,EACA,UAAAa,EAAY,EACZ,QAAAZ,EACA,SAAAa,EACA,QAAA3B,EACA,UAAA4B,EACA,cAAAC,EAAgB,GAChB,MAAAlB,EAAQ,QACR,WAAAC,EACA,MAAAG,EAAQ,MACV,EAAIP,EACEsB,EAAWlD,EAAuB,IAAI,EACtCmD,EAAWnD,EAA2B,IAAI,EAC1CoD,EAAoBpD,EAAyB,IAAI,EACjDqD,EAAmBrD,EAA6B,IAAI,EAGpD,CAACsD,EAAoBC,CAAqB,EAAIrD,GAAS,EAAI,EAE3D,CAAE,IAAKsD,EAAW,OAAAC,CAAO,EAAIzC,GAAU,EAE7Cf,GAAoB4C,EAAK,IAAMK,EAAS,OAAyB,EAGjErC,GAAYqC,EAAU,CACpB,cAAAjC,EACA,cAAAC,EACA,eAAgBX,EAAmB2B,CAAO,GAAK3B,EAAmB0B,CAAK,GAAK,GAC5E,qBAAsB1B,EAAmBwC,CAAQ,GAAK,EACxD,CAAC,EAGD,MAAMW,EAAqB,IAAM,CAC/BH,EAAsB,EAAK,CAC7B,EAGMI,EAAmBX,GAAW,gBAAkBA,GAAW,YAAc,GACzEY,EAAcZ,GAAW,kBAEzBa,EAAkBb,GAAW,OAC/B,CACE,IAAKA,EAAU,OAAO,MAAQ,MAC9B,KAAMA,EAAU,OAAO,OAAS,QAChC,OAAQA,EAAU,OAAO,SAAW,OACpC,OAAQA,EAAU,OAAO,SAAW,MACtC,EACA,OAEJ,OAAAjD,GAAU,IAAM,CACdI,EAAK,eAAeC,EAAWC,CAAa,EAC5C,SAASyD,GAAa,CACpB,GAAI,CAACX,EAAS,QAAS,OACvB,MAAMY,EAASZ,EAAS,SAAS,cAAgB,GAC7CC,EAAkB,SACpBA,EAAkB,QAAQ,OAAO,EAE/BC,EAAiB,SACnBA,EAAiB,QAAQ,KAAK,EAEhCD,EAAkB,QAAU,IAAIhD,EAAU+C,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMa,EAAQZ,EAAkB,QAAQ,MACxCjD,EAAK,IAAI6D,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BX,EAAiB,QAAUhD,EAAc,OAAO,CAC9C,QAAS8C,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWY,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,oBAAqB,GACrB,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,QAAU,EACxBI,GAAU,GACVC,EAAW,EAAIF,EACfG,EAAOD,GAAY,EAAID,IACvBG,GAAWJ,EAAQ,GAAKG,EAAOD,EAC/BG,GAAqB,KAAK,IAAI,EAAGD,EAAU,EAAIL,EAAWK,EAAU,CAAC,EAC3EP,EAAM,QAAQ,CAACS,GAAWC,KAAc,CACtC,MAAMC,GAAQD,GAAIJ,EACZM,GAAQP,EACd,IAAIQ,GAAWL,GAAqBG,IAASC,GAC7CC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,CAAO,CAAC,EAC1C1E,EAAK,IAAIsE,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIpB,GACFK,EAAW,EAGN,IAAM,CACXV,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACI,CAAM,CAAC,EAGT5D,EAAC,OACE,GAAG+C,EACJ,GAAIZ,GAAY,GAChB,UAAW1B,EACT,kEACAwB,EACAU,GAAY,OACd,EACA,IAAKU,EAEL,UAAArD,EAAC,OACC,IAAK2D,EACL,UAAWlD,EAAG,SAAUkC,GAAY,UAAW,CAC7C,YAAaT,IAAU,OACvB,cAAeI,IAAU,SACzB,YAAaA,IAAU,MACzB,CAAC,EAEC,WAAAD,GAAWD,IACXrC,EAACa,GAAA,CACC,IAAK0C,EACL,GAAIV,EACJ,KAAMK,EACN,KAAMZ,GAAWD,EACjB,OAAQS,EACR,UAAWpC,EAAGmB,GAAqB,CAAE,MAAAM,CAAM,CAAC,EAAGS,GAAY,KAAK,EAClE,EAEDO,GACCnD,EAACc,EAAA,CAAK,KAAMqC,EAAU,GAAG,IAAI,UAAWzC,EAAGoB,GAAiB,CAAE,MAAAK,CAAM,CAAC,EAAGS,GAAY,QAAQ,EAAG,EAEhGrB,GAAkBC,CAAO,GACxBxB,EAACc,EAAA,CACC,KAAMU,EACN,GAAG,MACH,KAAM,EACN,UAAWd,EACT,uHACAkC,GAAY,OACd,EACF,EAEF5C,EAAC+B,EAAA,CACC,KAAMC,EACN,UAAWtB,EAAG,CAAE,gBAAiB6B,IAAU,MAAO,EAAGK,GAAY,MAAM,EACvE,QAASG,EACX,EACCM,GAAiBD,GAAaM,GAC7B1D,EAACe,GAAA,CACC,QAASgD,EACT,WAAYC,EACZ,WAAYC,EACZ,SAAUb,GAAW,SACrB,UAAWA,GAAW,UACtB,YAAaA,GAAW,YACxB,YAAaA,GAAW,YACxB,MAAOjB,EACP,SAAU2B,EACV,gBAAiB,GACjB,MAAOvB,IAAU,SAAW,SAAW,OACvC,UAAW7B,EAAG,OAAQkC,GAAY,SAAS,EAC7C,GAEJ,EACA5C,EAAC+B,EAAA,CACC,KAAMC,EACN,UAAWtB,EAAG,SAAU,CAAG,cAAgB6B,IAAU,MAAO,EAAGK,GAAY,MAAM,EACjF,QAASG,EACX,GACF,CAEJ,CACF,EAEAJ,EAAM,YAAc,QAEpB,IAAOuC,GAAQlE,GAAW2B,CAAK",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "extractLexicalText", "cva", "Heading", "Text", "Countdown", "withLayout", "useExposure", "trackUrlRef", "useAiuiContext", "useInView", "componentType", "componentName", "hasVisibleContent", "content", "children", "node", "nodeChildren", "child", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "onClick", "className", "theme", "extensions", "title", "caption", "align", "trackingData", "contextHandle", "href", "Title", "classNames", "as", "weight", "onButtonClick", "rest", "ref", "titleSize", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
 }

package/dist/esm/biz-components/VideoFeature/VideoFeature.d.ts CHANGED Viewed

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

package/dist/esm/biz-components/VideoModal/index.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export interface VideoModalType extends Omit<React.HTMLAttributes<HTMLDivElement
     youTubeId?: string;
     videoUrl?: string;
     onCloseModal: () => void;
+    videoClassName?: string;
 }
 declare const VideoModal: (props: VideoModalType) => import("react/jsx-runtime").JSX.Element;
 export { VideoModal };

package/dist/esm/biz-components/VideoModal/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Dialog as a,DialogContent as r}from"../../components/dialog.js";import{YouTubePlayer as s}from"../VideoModal/YouTubePlayer.js";const d=l=>{const{visible:n,youTubeId:e,videoUrl:t,onCloseModal:i,className:p,...c}=l;return o(a,{open:n,onOpenChange:()=>i(),children:u(r,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[e?o(s,{youTubeId:e}):t?o("video",{className:"size-full overflow-hidden rounded-2xl object-contain",src:t,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,o("div",{onClick:()=>i(),className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:o("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};export{d as VideoModal};
+import{jsx as o,jsxs as m}from"react/jsx-runtime";import{Dialog as d,DialogContent as p}from"../../components/dialog.js";import{YouTubePlayer as u}from"../VideoModal/YouTubePlayer.js";import{cn as a}from"../../helpers/index.js";const c=l=>{const{visible:n,youTubeId:e,videoUrl:t,onCloseModal:i,className:r,videoClassName:s}=l;return o(d,{open:n,onOpenChange:()=>i(),children:m(p,{className:a("max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",r),children:[e?o(u,{youTubeId:e}):t?o("video",{className:a("size-full overflow-hidden rounded-2xl object-contain",s),src:t,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,o("div",{onClick:()=>i(),className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:o("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};export{c as VideoModal};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/VideoModal/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/VideoModal/index.tsx"],
-  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\n\nexport interface VideoModalType extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  visible: boolean\n  youTubeId?: string\n  videoUrl?: string\n  onCloseModal: () => void\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, youTubeId, videoUrl, onCloseModal, className, ...rest } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n        {youTubeId ? (\n          <YouTubePlayer youTubeId={youTubeId} />\n        ) : videoUrl ? (\n          <video\n            className=\"size-full overflow-hidden rounded-2xl object-contain\"\n            src={videoUrl}\n            muted\n            loop\n            autoPlay\n            controls\n          />\n        ) : null}\n        <div\n          onClick={() => onCloseModal()}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            strokeWidth=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
-  "mappings": "AAeM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAfN,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,iBAAAC,MAAqB,iCAS9B,MAAMC,EAAcC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,aAAAC,EAAc,UAAAC,EAAW,GAAGC,CAAK,EAAIN,EAE3E,OACEN,EAACE,EAAA,CAAO,KAAMK,EAAS,aAAc,IAAMG,EAAa,EACtD,SAAAT,EAACE,EAAA,CAAc,UAAU,wFACtB,UAAAK,EACCR,EAACI,EAAA,CAAc,UAAWI,EAAW,EACnCC,EACFT,EAAC,SACC,UAAU,uDACV,IAAKS,EACL,MAAK,GACL,KAAI,GACJ,SAAQ,GACR,SAAQ,GACV,EACE,KACJT,EAAC,OACC,QAAS,IAAMU,EAAa,EAC5B,UAAU,wHAEV,SAAAV,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,YAAY,MACZ,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,EAAE,uBAAuB,EAC9E,EACF,GACF,EACF,CAEJ",
-  "names": ["jsx", "jsxs", "Dialog", "DialogContent", "YouTubePlayer", "VideoModal", "props", "visible", "youTubeId", "videoUrl", "onCloseModal", "className", "rest"]
+  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface VideoModalType extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  visible: boolean\n  youTubeId?: string\n  videoUrl?: string\n  onCloseModal: () => void\n  videoClassName?: string\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, youTubeId, videoUrl, onCloseModal, className, videoClassName } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent\n        className={cn(\n          'max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden',\n          className\n        )}\n      >\n        {youTubeId ? (\n          <YouTubePlayer youTubeId={youTubeId} />\n        ) : videoUrl ? (\n          <video\n            className={cn('size-full overflow-hidden rounded-2xl object-contain', videoClassName)}\n            src={videoUrl}\n            muted\n            loop\n            autoPlay\n            controls\n          />\n        ) : null}\n        <div\n          onClick={() => onCloseModal()}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            strokeWidth=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
+  "mappings": "AAiBM,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBAjBN,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,iBAAAC,MAAqB,iCAC9B,OAAS,MAAAC,MAAU,yBAUnB,MAAMC,EAAcC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,aAAAC,EAAc,UAAAC,EAAW,eAAAC,CAAe,EAAIN,EAElF,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAS,aAAc,IAAMG,EAAa,EACtD,SAAAV,EAACE,EAAA,CACC,UAAWE,EACT,wFACAO,CACF,EAEC,UAAAH,EACCT,EAACI,EAAA,CAAc,UAAWK,EAAW,EACnCC,EACFV,EAAC,SACC,UAAWK,EAAG,uDAAwDQ,CAAc,EACpF,IAAKH,EACL,MAAK,GACL,KAAI,GACJ,SAAQ,GACR,SAAQ,GACV,EACE,KACJV,EAAC,OACC,QAAS,IAAMW,EAAa,EAC5B,UAAU,wHAEV,SAAAX,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,YAAY,MACZ,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,EAAE,uBAAuB,EAC9E,EACF,GACF,EACF,CAEJ",
+  "names": ["jsx", "jsxs", "Dialog", "DialogContent", "YouTubePlayer", "cn", "VideoModal", "props", "visible", "youTubeId", "videoUrl", "onCloseModal", "className", "videoClassName"]
 }

package/dist/esm/biz-components/WheelLottery/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{useState as s,useCallback as N,useRef as Ze,useEffect as Y,useImperativeHandle as qe,forwardRef as et}from"react";import{cn as u}from"../../helpers/index.js";import{DEFAULT_WHEEL_CONFIG as J,DEFAULT_CHANCE_METHODS as tt,INITIAL_WHEEL_STATE as ot}from"./types.js";import{Grid as rt,GridItem as Q}from"../../components/grid.js";import{Wheel as nt}from"./Wheel.js";import{PrizePool as st}from"../LotteryShared/PrizePool.js";import{ChanceMethods as it}from"../LotteryShared/ChanceMethods.js";import{WinnerModal as at}from"../LotteryShared/WinnerModal.js";import{RulesModal as lt}from"../LotteryShared/RulesModal.js";import{MyRewardsModal as pt}from"../LotteryShared/MyRewardsModal.js";import{ErrorModal as X}from"../LotteryShared/ErrorModal.js";import{ShareModal as dt}from"../LotteryShared/ShareModal.js";import{withLayout as ct}from"../../shared/Styles.js";const Z=et(({prizes:l,theme:i,winningPrizeId:v,spinDuration:A=J.spinDuration,wheelBackgroundImage:q,pointerImage:ee,chanceMethods:k=tt,chanceTitle:te=J.chanceTitle,chanceSubtitle:oe,chanceFooterNote:re,chanceMethodsText:P,mechanismType:ne,inputConfig:se,winningInfos:ie=[],winnerNameTemplate:ae,prizesTitle:le,onSpinStart:C,onSpinEnd:R,onSpinError:D,winnerModalConfig:o,rulesModalConfig:pe={},myRewardsModalConfig:de={},errorModalConfig:f={},shareModalConfig:x={},userData:p,onLoginRequired:z,onCopyCode:ce,opportunitiesText:F=["Number of draws remaining today:"],className:me},fe)=>{const{rulesData:h,rulesText:B="Rules"}=pe,{rewardsData:I,myRewardsText:U="My Rewards",codeText:ue="CODE:",copyText:O="COPY",copiedText:j="COPIED",prizeText:xe="Prize time:",emptyText:he,copyError:we,availableText:ge,usedStatusText:ye,expiredText:Te,notFoundText:be}=de,Se=P?.completedText,We=P?.usedText,w=p?.isLoggedIn??!1,G=p?.availableChances??0,Me=w&&G<=0,[r,d]=s(ot),[Pe,g]=s(!1),[ze,y]=s(!1),[Ee,T]=s(!1),[Ne,b]=s(!1),[ve,S]=s(!1),[Ce,W]=s(!1),[Re,H]=s(""),[Ie,Le]=s(),[Ae,ke]=s(),[De,Fe]=s(),[Be,Ue]=s(),[Oe,je]=s(),[n,Ge]=s(),E=Ze(null);qe(fe,()=>({showError:({message:e,title:a,confirmText:M})=>{H(e),Le(a),ke(M),b(!0)},hideError:()=>{b(!1)},showNoWin:e=>{Fe(e?.title),Ue(e?.message),je(e?.confirmText),S(!0)},hideNoWin:()=>{S(!1)},showWinner:(e,a)=>{d(M=>({...M,winningPrize:e})),Ge(a),g(!0)},hideWinner:()=>{g(!1)},showRules:()=>{y(!0)},hideRules:()=>{y(!1)},showRewards:()=>{T(!0)},hideRewards:()=>{T(!1)},showShare:()=>{W(!0)},hideShare:()=>{W(!1)},hideAllModals:()=>{g(!1),y(!1),T(!1),b(!1),S(!1),W(!1)}}),[]),Y(()=>{},[l,v]),Y(()=>()=>{E.current!==null&&cancelAnimationFrame(E.current)},[]);const _=N(async()=>{if(!r.isSpinning){if(!p?.isLoggedIn){z?.();return}if(!(p.availableChances<=0)){d(e=>({...e,isSpinning:!0,isButtonDisabled:!0}));try{let e=v;C&&(e=await C());const a=l.find(c=>c.prizeKey===e)||l[0],M=l.findIndex(c=>c.prizeKey===a.prizeKey),$e=360/l.length,Ve=M*$e,K=3*360+(360-Ve);await new Promise(c=>setTimeout(c,1500)),d(c=>({...c,isFinished:!0,currentRotation:0}));const Ye=Date.now(),$=()=>{const Je=Date.now()-Ye,V=Math.min(Je/A,1),Qe=1-Math.pow(1-V,3),Xe=K*Qe;d(L=>({...L,currentRotation:Xe})),V<1?E.current=requestAnimationFrame($):(d(L=>({...L,isSpinning:!1,isButtonDisabled:!0,winningPrize:a,currentRotation:K})),R?R?.(a):setTimeout(()=>{a.prizeKey==="try-again"?S(!0):g(!0)},500))};E.current=requestAnimationFrame($)}catch(e){d(a=>({...a,isSpinning:!1,isButtonDisabled:!1})),H(e.message||"An error occurred"),b(!0),D?.(e),console.error("\u62BD\u5956\u63A5\u53E3\u8C03\u7528\u5931\u8D25:",e)}}}},[r.isSpinning,l,v,A,C,R,D,p,z]),He=N(()=>{if(w){_();return}z?.()},[_,w,z]),_e=N(()=>{g(!1),d(e=>({...e,isButtonDisabled:!1,isFinished:!1}))},[]),Ke=N(()=>{S(!1),d(e=>({...e,isButtonDisabled:!1,isFinished:!1}))},[]);return m("div",{className:u("wheel-lottery-container","w-full",i==="dark"?"aiui-dark":"",me),children:[m("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:[r.isSpinning&&"\u62BD\u5956\u8FDB\u884C\u4E2D...",r.winningPrize&&!r.isSpinning&&`\u5DF2\u4E2D\u5956: ${r.winningPrize.name}`]}),m(rt,{className:u("wheel-lottery-main","tablet:mb-4 mb-3"),children:[t(Q,{span:7,className:u("wheel-section","relative flex w-full flex-1 items-center justify-center overflow-hidden","rounded-box","laptop:min-h-[288px] min-h-[240px]","lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[480]","desktop:aspect-w-[759] desktop:aspect-h-[384]","laptop:aspect-w-[516] laptop:aspect-h-[288]","l-tablet:col-span-12","l-tablet:mb-3",i==="dark"?"bg-[#1E2024]":"bg-[#EAEAEC]"),children:m("div",{className:u("w-full px-[16px] pt-[16px]","lg-desktop:pb-[32px] lg-desktop:px-[32px]","desktop:pt-[24px] desktop:px-[24px]","laptop:pt-[16px] laptop:px-[16px]","tablet:px-[24px]","l-tablet:absolute l-tablet:top-0 l-tablet:inset-x-0 l-tablet:z-10"),children:[m("div",{className:"tablet:max-h-[24px] relative z-10 mb-2 flex max-h-[40px] w-full flex-wrap items-center justify-between gap-3",children:[t("div",{children:w&&m("p",{className:"text-info-primary font-[700]",children:[F?.[0],t("span",{className:"ml-1 text-[#FF6B35]",children:G}),F?.[1]||""]})}),m("div",{className:"flex items-center gap-4",children:[h&&h.length>0&&t("button",{onClick:()=>y(!0),className:"cursor-pointer touch-manipulation",type:"button",children:t("span",{className:"text-info-primary font-[700] underline",children:B})}),p?.isLoggedIn&&I&&t("button",{onClick:()=>T(!0),className:"cursor-pointer touch-manipulation whitespace-nowrap",type:"button",children:t("span",{className:"text-info-primary font-[700] underline",children:U})})]})]}),t(nt,{theme:i,prizes:l,rotation:r.currentRotation,isSpinning:r.isSpinning,isFinished:r.isFinished,isButtonDisabled:r.isButtonDisabled||!w||Me,userData:p,onGoClick:He,wheelBackgroundImage:q,pointerImage:ee})]})}),k.length>0&&t(Q,{span:5,className:u("info-section","rounded-box","relative flex flex-col overflow-hidden","lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[480]","desktop:aspect-w-[536] desktop:aspect-h-[384]","laptop:aspect-w-[364] laptop:aspect-h-[288]","l-tablet:min-h-[280px] laptop:max-h-[320px]","w-full","l-tablet:col-span-12",i==="dark"?"bg-[#1E2024]":"bg-[#EAEAEC]"),children:t(it,{theme:i,userData:p,methods:k,title:te,subtitle:oe,footerNote:re,onOpenShareModal:()=>W(!0),chanceBadgeText:P?.chanceBadgeText,completedText:Se,usedText:We,loadingText:P?.loadingText,mechanismType:ne,inputConfig:se})})]}),t("div",{className:u("wheel-lottery-footer","rounded-box","flex flex-col overflow-hidden",i==="dark"?"bg-[#1E2024]":"bg-[#EAEAEC]"),children:t(st,{theme:i,prizes:l,title:le,winningInfos:ie,winnerNameTemplate:ae})}),t(at,{isOpen:Pe,prize:r.winningPrize,title:n?.title||o?.title,prizeTitle:n?.prizeTitle||o?.prizeTitle,prizeImage:n?.prizeImage||o?.prizeImage,prizeDescription:n?.prizeDescription||o?.prizeDescription,winnerNote:n?.winnerNote??r.winningPrize?.winnerModalConfig?.winnerNote??o?.winnerNote,learnMoreUrl:n?.learnMoreUrl||r.winningPrize?.winnerModalConfig?.learnMoreUrl||o?.learnMoreUrl,learnMoreText:n?.learnMoreText||r.winningPrize?.winnerModalConfig?.learnMoreText||o?.learnMoreText,couponCode:n?.couponCode||o?.couponCode,expiresAt:n?.expiresAt||o?.expiresAt,expiresAtLabel:n?.expiresAtLabel||o?.expiresAtLabel,couponDiscount:n?.couponDiscount||o?.couponDiscount,couponUnit:n?.couponUnit||o?.couponUnit,confirmText:n?.confirmText||r.winningPrize?.winnerModalConfig?.confirmText||o?.confirmText,confirmUrl:n?.confirmUrl||r.winningPrize?.winnerModalConfig?.confirmUrl||o?.confirmUrl,copyText:n?.copyText||o?.copyText||O,copiedText:n?.copiedText||o?.copiedText||j,onClose:_e,theme:i}),h&&h.length>0&&t(lt,{title:B,isOpen:ze,onClose:()=>y(!1),rules:h,theme:i}),I&&t(pt,{isOpen:Ee,onClose:()=>T(!1),rewards:I,onCopyCode:ce,codeText:ue,copyText:O,copiedText:j,prizeText:xe,emptyText:he,copyError:we,availableText:ge,usedStatusText:ye,expiredText:Te,notFoundText:be,theme:i,title:U}),t(X,{isOpen:Ne,onClose:()=>b(!1),title:Ie||f?.title,message:Re||f?.message,confirmText:Ae||f?.confirmText,theme:i}),t(X,{isOpen:ve,onClose:Ke,title:De||f?.title,message:Be||f?.message,confirmText:Oe||f?.confirmText,theme:i}),t(dt,{isOpen:Ce,onClose:()=>W(!1),title:x?.title,subtitle:x?.subtitle,note:x?.note,platforms:x?.platforms,onShareSuccess:x?.onShareSuccess,theme:i})]})});Z.displayName="WheelLottery";var zt=ct(Z);import{WinnerModal as vt}from"../LotteryShared/WinnerModal.js";import{RulesModal as Rt}from"../LotteryShared/RulesModal.js";import{MyRewardsModal as Lt}from"../LotteryShared/MyRewardsModal.js";import{ErrorModal as kt}from"../LotteryShared/ErrorModal.js";import{ShareModal as Ft}from"../LotteryShared/ShareModal.js";import{BaseModal as Ut}from"../LotteryShared/BaseModal.js";export{Ut as BaseModal,kt as ErrorModal,Lt as MyRewardsModal,Rt as RulesModal,Ft as ShareModal,Z as WheelLottery,vt as WinnerModal,zt as default};
+"use client";import{jsx as t,jsxs as m}from"react/jsx-runtime";import{useState as s,useCallback as N,useRef as Ze,useEffect as Y,useImperativeHandle as qe,forwardRef as et}from"react";import{cn as u}from"../../helpers/index.js";import{DEFAULT_WHEEL_CONFIG as J,DEFAULT_CHANCE_METHODS as tt,INITIAL_WHEEL_STATE as ot}from"./types.js";import{Grid as rt,GridItem as Q}from"../../components/grid.js";import{Wheel as nt}from"./Wheel.js";import{PrizePool as st}from"../LotteryShared/PrizePool.js";import{ChanceMethods as it}from"../LotteryShared/ChanceMethods.js";import{WinnerModal as at}from"../LotteryShared/WinnerModal.js";import{RulesModal as lt}from"../LotteryShared/RulesModal.js";import{MyRewardsModal as pt}from"../LotteryShared/MyRewardsModal.js";import{ErrorModal as X}from"../LotteryShared/ErrorModal.js";import{ShareModal as dt}from"../LotteryShared/ShareModal.js";import{withLayout as ct}from"../../shared/Styles.js";const Z=et(({prizes:l,theme:i,winningPrizeId:v,spinDuration:A=J.spinDuration,wheelBackgroundImage:q,pointerImage:ee,chanceMethods:k=tt,chanceTitle:te=J.chanceTitle,chanceSubtitle:oe,chanceFooterNote:re,chanceMethodsText:P,mechanismType:ne,inputConfig:se,winningInfos:ie=[],winnerNameTemplate:ae,prizesTitle:le,onSpinStart:C,onSpinEnd:R,onSpinError:D,winnerModalConfig:o,rulesModalConfig:pe={},myRewardsModalConfig:de={},errorModalConfig:f={},shareModalConfig:x={},userData:p,onLoginRequired:z,onCopyCode:ce,opportunitiesText:F=["Number of draws remaining today:"],className:me},fe)=>{const{rulesData:h,rulesText:B="Rules"}=pe,{rewardsData:I,myRewardsText:U="My Rewards",codeText:ue="CODE:",copyText:O="COPY",copiedText:j="COPIED",prizeText:xe="Prize time:",emptyText:he,copyError:we,availableText:ge,usedStatusText:ye,expiredText:Te,notFoundText:be}=de,Se=P?.completedText,We=P?.usedText,w=p?.isLoggedIn??!1,G=p?.availableChances??0,Me=w&&G<=0,[r,d]=s(ot),[Pe,g]=s(!1),[ze,y]=s(!1),[Ee,T]=s(!1),[Ne,b]=s(!1),[ve,S]=s(!1),[Ce,W]=s(!1),[Re,H]=s(""),[Ie,Le]=s(),[Ae,ke]=s(),[De,Fe]=s(),[Be,Ue]=s(),[Oe,je]=s(),[n,Ge]=s(),E=Ze(null);qe(fe,()=>({showError:({message:e,title:a,confirmText:M})=>{H(e),Le(a),ke(M),b(!0)},hideError:()=>{b(!1)},showNoWin:e=>{Fe(e?.title),Ue(e?.message),je(e?.confirmText),S(!0)},hideNoWin:()=>{S(!1)},showWinner:(e,a)=>{d(M=>({...M,winningPrize:e})),Ge(a),g(!0)},hideWinner:()=>{g(!1)},showRules:()=>{y(!0)},hideRules:()=>{y(!1)},showRewards:()=>{T(!0)},hideRewards:()=>{T(!1)},showShare:()=>{W(!0)},hideShare:()=>{W(!1)},hideAllModals:()=>{g(!1),y(!1),T(!1),b(!1),S(!1),W(!1)}}),[]),Y(()=>{},[l,v]),Y(()=>()=>{E.current!==null&&cancelAnimationFrame(E.current)},[]);const _=N(async()=>{if(!r.isSpinning){if(!p?.isLoggedIn){z?.();return}if(!(p.availableChances<=0)){d(e=>({...e,isSpinning:!0,isButtonDisabled:!0}));try{let e=v;C&&(e=await C());const a=l.find(c=>c.prizeKey===e)||l[0],M=l.findIndex(c=>c.prizeKey===a.prizeKey),$e=360/l.length,Ve=M*$e,K=3*360+(360-Ve);await new Promise(c=>setTimeout(c,1500)),d(c=>({...c,isFinished:!0,currentRotation:0}));const Ye=Date.now(),$=()=>{const Je=Date.now()-Ye,V=Math.min(Je/A,1),Qe=1-Math.pow(1-V,3),Xe=K*Qe;d(L=>({...L,currentRotation:Xe})),V<1?E.current=requestAnimationFrame($):(d(L=>({...L,isSpinning:!1,isButtonDisabled:!0,winningPrize:a,currentRotation:K})),R?R?.(a):setTimeout(()=>{a.prizeKey==="try-again"?S(!0):g(!0)},500))};E.current=requestAnimationFrame($)}catch(e){d(a=>({...a,isSpinning:!1,isButtonDisabled:!1})),H(e.message||"An error occurred"),b(!0),D?.(e),console.error("\u62BD\u5956\u63A5\u53E3\u8C03\u7528\u5931\u8D25:",e)}}}},[r.isSpinning,l,v,A,C,R,D,p,z]),He=N(()=>{if(w){_();return}z?.()},[_,w,z]),_e=N(()=>{g(!1),d(e=>({...e,isButtonDisabled:!1,isFinished:!1}))},[]),Ke=N(()=>{S(!1),d(e=>({...e,isButtonDisabled:!1,isFinished:!1}))},[]);return m("div",{className:u("wheel-lottery-container","w-full",i==="dark"?"aiui-dark":"",me),children:[m("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:[r.isSpinning&&"\u62BD\u5956\u8FDB\u884C\u4E2D...",r.winningPrize&&!r.isSpinning&&`\u5DF2\u4E2D\u5956: ${r.winningPrize.name}`]}),m(rt,{className:u("wheel-lottery-main","tablet:mb-4 mb-3"),children:[t(Q,{span:7,className:u("wheel-section","relative flex w-full flex-1 items-center justify-center overflow-hidden","rounded-box","laptop:min-h-[288px] min-h-[240px]","lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[480]","desktop:aspect-w-[759] desktop:aspect-h-[384]","laptop:aspect-w-[516] laptop:aspect-h-[288]","l-tablet:col-span-12","l-tablet:mb-3",i==="dark"?"bg-[#1E2024]":"bg-[#EAEAEC]"),children:m("div",{className:u("w-full px-[16px] pt-[16px]","lg-desktop:pb-[32px] lg-desktop:px-[32px]","desktop:pt-[24px] desktop:px-[24px]","laptop:pt-[16px] laptop:px-[16px]","tablet:px-[24px]","l-tablet:absolute l-tablet:top-0 l-tablet:inset-x-0 l-tablet:z-10"),children:[m("div",{className:"tablet:max-h-[24px] relative z-10 mb-2 flex max-h-[40px] w-full flex-wrap items-center justify-between gap-3",children:[t("div",{children:w&&m("p",{className:"text-info-primary font-[700]",children:[F?.[0],t("span",{className:"ml-1 text-[#FF6B35]",children:G}),F?.[1]||""]})}),m("div",{className:"flex items-center gap-4",children:[h&&h.length>0&&t("button",{onClick:e=>{e.stopPropagation(),y(!0)},className:"cursor-pointer touch-manipulation",type:"button",children:t("span",{className:"text-info-primary font-[700] underline",children:B})}),p?.isLoggedIn&&I&&t("button",{onClick:e=>{e.stopPropagation(),T(!0)},className:"cursor-pointer touch-manipulation whitespace-nowrap",type:"button",children:t("span",{className:"text-info-primary font-[700] underline",children:U})})]})]}),t(nt,{theme:i,prizes:l,rotation:r.currentRotation,isSpinning:r.isSpinning,isFinished:r.isFinished,isButtonDisabled:r.isButtonDisabled||!w||Me,userData:p,onGoClick:He,wheelBackgroundImage:q,pointerImage:ee})]})}),k.length>0&&t(Q,{span:5,className:u("info-section","rounded-box","relative flex flex-col overflow-hidden","lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[480]","desktop:aspect-w-[536] desktop:aspect-h-[384]","laptop:aspect-w-[364] laptop:aspect-h-[288]","l-tablet:min-h-[280px] laptop:max-h-[320px]","w-full","l-tablet:col-span-12",i==="dark"?"bg-[#1E2024]":"bg-[#EAEAEC]"),children:t(it,{theme:i,userData:p,methods:k,title:te,subtitle:oe,footerNote:re,onOpenShareModal:()=>W(!0),chanceBadgeText:P?.chanceBadgeText,completedText:Se,usedText:We,loadingText:P?.loadingText,mechanismType:ne,inputConfig:se})})]}),t("div",{className:u("wheel-lottery-footer","rounded-box","flex flex-col overflow-hidden",i==="dark"?"bg-[#1E2024]":"bg-[#EAEAEC]"),children:t(st,{theme:i,prizes:l,title:le,winningInfos:ie,winnerNameTemplate:ae})}),t(at,{isOpen:Pe,prize:r.winningPrize,title:n?.title||o?.title,prizeTitle:n?.prizeTitle||o?.prizeTitle,prizeImage:n?.prizeImage||o?.prizeImage,prizeDescription:n?.prizeDescription||o?.prizeDescription,winnerNote:n?.winnerNote??r.winningPrize?.winnerModalConfig?.winnerNote??o?.winnerNote,learnMoreUrl:n?.learnMoreUrl||r.winningPrize?.winnerModalConfig?.learnMoreUrl||o?.learnMoreUrl,learnMoreText:n?.learnMoreText||r.winningPrize?.winnerModalConfig?.learnMoreText||o?.learnMoreText,couponCode:n?.couponCode||o?.couponCode,expiresAt:n?.expiresAt||o?.expiresAt,expiresAtLabel:n?.expiresAtLabel||o?.expiresAtLabel,couponDiscount:n?.couponDiscount||o?.couponDiscount,couponUnit:n?.couponUnit||o?.couponUnit,confirmText:n?.confirmText||r.winningPrize?.winnerModalConfig?.confirmText||o?.confirmText,confirmUrl:n?.confirmUrl||r.winningPrize?.winnerModalConfig?.confirmUrl||o?.confirmUrl,copyText:n?.copyText||o?.copyText||O,copiedText:n?.copiedText||o?.copiedText||j,onClose:_e,theme:i}),h&&h.length>0&&t(lt,{title:B,isOpen:ze,onClose:()=>y(!1),rules:h,theme:i}),I&&t(pt,{isOpen:Ee,onClose:()=>T(!1),rewards:I,onCopyCode:ce,codeText:ue,copyText:O,copiedText:j,prizeText:xe,emptyText:he,copyError:we,availableText:ge,usedStatusText:ye,expiredText:Te,notFoundText:be,theme:i,title:U}),t(X,{isOpen:Ne,onClose:()=>b(!1),title:Ie||f?.title,message:Re||f?.message,confirmText:Ae||f?.confirmText,theme:i}),t(X,{isOpen:ve,onClose:Ke,title:De||f?.title,message:Be||f?.message,confirmText:Oe||f?.confirmText,theme:i}),t(dt,{isOpen:Ce,onClose:()=>W(!1),title:x?.title,subtitle:x?.subtitle,note:x?.note,platforms:x?.platforms,onShareSuccess:x?.onShareSuccess,theme:i})]})});Z.displayName="WheelLottery";var zt=ct(Z);import{WinnerModal as vt}from"../LotteryShared/WinnerModal.js";import{RulesModal as Rt}from"../LotteryShared/RulesModal.js";import{MyRewardsModal as Lt}from"../LotteryShared/MyRewardsModal.js";import{ErrorModal as kt}from"../LotteryShared/ErrorModal.js";import{ShareModal as Ft}from"../LotteryShared/ShareModal.js";import{BaseModal as Ut}from"../LotteryShared/BaseModal.js";export{Ut as BaseModal,kt as ErrorModal,Lt as MyRewardsModal,Rt as RulesModal,Ft as ShareModal,Z as WheelLottery,vt as WinnerModal,zt as default};
 //# sourceMappingURL=index.js.map