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

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

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

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

@@ -54,7 +54,7 @@ export interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivE
     /** 场景切换回调 */
     onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<MediaSceneSwitcherV2Props & 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<MediaSceneSwitcherV2Props & 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/MediaSceneSwitcherV2/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{Swiper as B,SwiperSlide as O}from"swiper/react";import{FreeMode as W,Mousewheel as j,Autoplay as U}from"swiper/modules";import{useMediaQuery as Y}from"react-responsive";import{cn as i}from"../../helpers/index.js";import{Heading as y,Text as g}from"../../components/index.js";import{withLayout as _}from"../../shared/Styles.js";import V from"../Media/index.js";const N=p=>({pcImage:p.lgDesktop,desktopImage:p.desktop,laptopImage:p.laptop,padImage:p.tablet,mobileImage:p.mobile}),q=3e3,E=s.forwardRef(({className:p,classNames:o={},data:R,onSceneChange:h,...z},H)=>{const{title:S,subtitle:k,items:a,defaultActiveIndex:L=0,layout:A="left",autoplay:c=!0,autoplayDelay:m=q}=R,[l,u]=s.useState(L),C=s.useRef(null),d=s.useRef(0),w=s.useRef([]),M=s.useRef(!1),b=Y({minWidth:1025});s.useEffect(()=>!c||a.length<=1||!b?void 0:((()=>{d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m)})(),()=>{d.current&&window.clearInterval(d.current)}),[c,m,a.length,b]),s.useEffect(()=>{if(!b||!w.current[l])return;const t=w.current[l],e=t?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const f=requestAnimationFrame(()=>{const I=e.getBoundingClientRect(),x=t.getBoundingClientRect();if(x.top>=I.top&&x.bottom<=I.bottom)return;const P=x.top-I.top-e.clientHeight/2+x.height/2;e.scrollTo({top:e.scrollTop+P,behavior:"smooth"})});return()=>cancelAnimationFrame(f)},[l,b]);const T=s.useCallback(t=>{u(t),M.current=!0,h?.(t,a[t]),C.current?.slideTo(t),c&&a.length>1&&(d.current&&window.clearInterval(d.current),d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m))},[a,h,c,m]),F=s.useCallback(t=>{if(M.current){M.current=!1;return}const e=t.realIndex;u(e),h?.(e,a[e])},[a,h]),v=a[l],D=A==="top";return n("div",{ref:H,className:i("scene-switcher-root","text-info-primary w-full",p,o.root,{"aiui-dark":R.theme==="dark"}),...z,children:[(S||k)&&n("div",{className:i("scene-switcher-header mb-6",o.header),children:[S&&r(y,{as:"h2",size:4,html:S,className:i("scene-switcher-title",o.title)}),k&&r(g,{as:"p",size:3,className:i("",o?.subtitle),html:k})]}),r("div",{className:i("scene-switcher-swiper","laptop:hidden !overflow-visible",o.swiper),children:r(B,{modules:[W,j,U],onSwiper:t=>{C.current=t},className:"!overflow-visible",onSlideChange:F,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:L,loop:c&&a.length>1,autoplay:c&&a.length>1?{delay:m,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:a.map((t,e)=>r(O,{className:"h-[462px] !w-[296px]",children:n("div",{className:i("scene-switcher-slide","flex cursor-pointer flex-col",o.slide),onClick:()=>T(e),children:[r("div",{className:i("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",o.slideMedia),children:r(V,{...N(t.media),className:"rounded-t-box size-full overflow-hidden object-cover"})}),n("div",{className:i("scene-switcher-slide-content"," mt-6  border-t pt-4",l===e?"border-info-primary border-t-4":"border-lines-primary",o.slideContent),children:[r(y,{className:i("scene-switcher-tab-title ",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]})]})},e))})}),D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",o.container),children:[r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(V,{...N(v.media),className:i("scene-switcher-media","rounded-box size-full object-cover",o.media)})}),r("div",{className:i("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",o.tabList),children:a.map((t,e)=>n("div",{ref:f=>{w.current[e]=f},className:i("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",l===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",o.tabItem),onClick:()=>T(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]},e))})]}),!D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",A==="right"&&"flex-row-reverse",o.container),children:[r("div",{className:i("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",o.tabList),children:r("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:a.map((t,e)=>n(s.Fragment,{children:[e>0&&r("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),n("div",{ref:f=>{w.current[e]=f},className:i("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",l===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",o.tabItem),onClick:()=>T(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary hidden"),html:t.description})]})]},e))})}),r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(V,{...N(v.media),className:i("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",o.media)})})]})]})});E.displayName="MediaSceneSwitcherV2";var te=_(E);export{te as default};
+"use client";import{jsx as r,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{Swiper as B,SwiperSlide as O}from"swiper/react";import{FreeMode as W,Mousewheel as j,Autoplay as U}from"swiper/modules";import{useIsomorphicMediaQuery as Y}from"../../hooks/useIsomorphicMediaQuery.js";import{cn as i}from"../../helpers/index.js";import{Heading as y,Text as g}from"../../components/index.js";import{withLayout as _}from"../../shared/Styles.js";import V from"../Media/index.js";const N=p=>({pcImage:p.lgDesktop,desktopImage:p.desktop,laptopImage:p.laptop,padImage:p.tablet,mobileImage:p.mobile}),q=3e3,E=s.forwardRef(({className:p,classNames:o={},data:R,onSceneChange:f,...z},H)=>{const{title:S,subtitle:k,items:a,defaultActiveIndex:L=0,layout:A="left",autoplay:c=!0,autoplayDelay:m=q}=R,[l,u]=s.useState(L),C=s.useRef(null),d=s.useRef(0),w=s.useRef([]),M=s.useRef(!1),b=Y({minWidth:1025});s.useEffect(()=>!c||a.length<=1||!b?void 0:((()=>{d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m)})(),()=>{d.current&&window.clearInterval(d.current)}),[c,m,a.length,b]),s.useEffect(()=>{if(!b||!w.current[l])return;const t=w.current[l],e=t?.parentElement;if(!e||e.scrollHeight<=e.clientHeight)return;const h=requestAnimationFrame(()=>{const I=e.getBoundingClientRect(),x=t.getBoundingClientRect();if(x.top>=I.top&&x.bottom<=I.bottom)return;const P=x.top-I.top-e.clientHeight/2+x.height/2;e.scrollTo({top:e.scrollTop+P,behavior:"smooth"})});return()=>cancelAnimationFrame(h)},[l,b]);const T=s.useCallback(t=>{u(t),M.current=!0,f?.(t,a[t]),C.current?.slideTo(t),c&&a.length>1&&(d.current&&window.clearInterval(d.current),d.current=window.setInterval(()=>{u(e=>(e+1)%a.length)},m))},[a,f,c,m]),F=s.useCallback(t=>{if(M.current){M.current=!1;return}const e=t.realIndex;u(e),f?.(e,a[e])},[a,f]),v=a[l],D=A==="top";return n("div",{ref:H,className:i("scene-switcher-root","text-info-primary w-full",p,o.root,{"aiui-dark":R.theme==="dark"}),...z,children:[(S||k)&&n("div",{className:i("scene-switcher-header mb-6",o.header),children:[S&&r(y,{as:"h2",size:4,html:S,className:i("scene-switcher-title",o.title)}),k&&r(g,{as:"p",size:3,className:i("",o?.subtitle),html:k})]}),r("div",{className:i("scene-switcher-swiper","laptop:hidden !overflow-visible",o.swiper),children:r(B,{modules:[W,j,U],onSwiper:t=>{C.current=t},className:"!overflow-visible",onSlideChange:F,slidesPerView:"auto",spaceBetween:12,freeMode:!0,mousewheel:{forceToAxis:!0},initialSlide:L,loop:c&&a.length>1,autoplay:c&&a.length>1?{delay:m,disableOnInteraction:!1}:!1,breakpoints:{768:{spaceBetween:16}},children:a.map((t,e)=>r(O,{className:"h-[462px] !w-[296px]",children:n("div",{className:i("scene-switcher-slide","flex cursor-pointer flex-col",o.slide),onClick:()=>T(e),children:[r("div",{className:i("scene-switcher-slide-media","rounded-box relative aspect-[296/320] w-full overflow-hidden",o.slideMedia),children:r(V,{...N(t.media),className:"rounded-t-box size-full overflow-hidden object-cover"})}),n("div",{className:i("scene-switcher-slide-content"," mt-6  border-t pt-4",l===e?"border-info-primary border-t-4":"border-lines-primary",o.slideContent),children:[r(y,{className:i("scene-switcher-tab-title ",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]})]})},e))})}),D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:flex-col hidden","laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]",o.container),children:[r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(V,{...N(v.media),className:i("scene-switcher-media","rounded-box size-full object-cover",o.media)})}),r("div",{className:i("scene-switcher-tab-list","border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t",o.tabList),children:a.map((t,e)=>n("div",{ref:h=>{w.current[e]=h},className:i("scene-switcher-tab-item","desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors",l===e?"border-info-primary border-t-4":"hover:border-lines-primary border-transparent",o.tabItem),onClick:()=>T(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary"),html:t.description})]},e))})]}),!D&&n("div",{className:i("scene-switcher-container","laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]",A==="right"&&"flex-row-reverse",o.container),children:[r("div",{className:i("scene-switcher-tab-list","laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center",o.tabList),children:r("div",{className:"flex max-h-full w-full flex-col overflow-y-auto",children:a.map((t,e)=>n(s.Fragment,{children:[e>0&&r("div",{className:"border-lines-primary h-8 shrink-0 border-l-4"}),n("div",{ref:h=>{w.current[e]=h},className:i("scene-switcher-tab-item","shrink-0 cursor-pointer border-l-4 pl-5",l===e?"border-info-primary border-l-[6px]":"border-lines-primary hover:border-info-tertiary",o.tabItem),onClick:()=>T(e),role:"button","aria-selected":l===e,children:[r(y,{className:i("scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2",l===e?"text-info-primary":"text-info-tertiary",t.title),size:3,as:"h3",html:t.title}),t.description&&r(g,{className:i("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",l===e?"text-info-primary":"text-info-tertiary hidden"),html:t.description})]})]},e))})}),r("div",{className:i("scene-switcher-media-wrapper","rounded-box flex-1 overflow-hidden",o.mediaWrapper),children:v&&r(V,{...N(v.media),className:i("scene-switcher-media","rounded-box size-full h-full overflow-visible object-cover",o.media)})})]})]})});E.displayName="MediaSceneSwitcherV2";var te=_(E);export{te as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaSceneSwitcherV2/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'subtitle'\n  | 'container'\n  | 'tabList'\n  | 'tabItem'\n  | 'tabTitle'\n  | 'tabDescription'\n  | 'mediaWrapper'\n  | 'media'\n  | 'swiper'\n  | 'slide'\n  | 'slideMedia'\n  | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n  /** \u573A\u666F\u6807\u9898 */\n  title: string\n  /** \u573A\u666F\u63CF\u8FF0 */\n  description?: string\n  /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n  media: {\n    mobile?: MediaType\n    tablet?: MediaType\n    laptop?: MediaType\n    desktop?: MediaType\n    lgDesktop?: MediaType\n  }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  /** \u573A\u666F\u5217\u8868 */\n  items: MediaSceneSwitcherV2Item[]\n  /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n  defaultActiveIndex?: number\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n  layout?: MediaSceneSwitcherV2Layout\n  /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n  autoplay?: boolean\n  /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n  autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MediaSceneSwitcherV2Data\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n  classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n  /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n  onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\nconst toMediaProps = (media: MediaSceneSwitcherV2Item['media']) => ({\n  pcImage: media.lgDesktop,\n  desktopImage: media.desktop,\n  laptopImage: media.laptop,\n  padImage: media.tablet,\n  mobileImage: media.mobile,\n})\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n  ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n    const {\n      title,\n      subtitle,\n      items: scenes,\n      defaultActiveIndex = 0,\n      layout = 'left',\n      autoplay = true,\n      autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n    } = data\n    const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n    const swiperRef = React.useRef<SwiperType | null>(null)\n    const intervalRef = React.useRef<number>(0)\n    const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n    const isClickTriggered = React.useRef(false)\n\n    // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n    const isLaptopOrLarger = useMediaQuery({ minWidth: 1025 })\n\n    // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n    React.useEffect(() => {\n      if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n      const startAutoplay = () => {\n        intervalRef.current = window.setInterval(() => {\n          setActiveIndex(prev => (prev + 1) % scenes.length)\n        }, autoplayDelay)\n      }\n\n      startAutoplay()\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n    // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n    React.useEffect(() => {\n      if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n      const tabElement = tabRefs.current[activeIndex]\n      const parentContainer = tabElement?.parentElement\n\n      // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n      if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n      // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n      const rafId = requestAnimationFrame(() => {\n        const containerRect = parentContainer.getBoundingClientRect()\n        const tabRect = tabElement.getBoundingClientRect()\n\n        // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n        const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n        // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n        if (isVisible) return\n\n        // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n        const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n        parentContainer.scrollTo({\n          top: parentContainer.scrollTop + scrollOffset,\n          behavior: 'smooth',\n        })\n      })\n\n      return () => cancelAnimationFrame(rafId)\n    }, [activeIndex, isLaptopOrLarger])\n\n    const handleSceneClick = React.useCallback(\n      (index: number) => {\n        setActiveIndex(index)\n        isClickTriggered.current = true\n        onSceneChange?.(index, scenes[index])\n        swiperRef.current?.slideTo(index)\n\n        // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n        if (autoplay && scenes.length > 1) {\n          if (intervalRef.current) {\n            window.clearInterval(intervalRef.current)\n          }\n          intervalRef.current = window.setInterval(() => {\n            setActiveIndex(prev => (prev + 1) % scenes.length)\n          }, autoplayDelay)\n        }\n      },\n      [scenes, onSceneChange, autoplay, autoplayDelay]\n    )\n\n    const handleSlideChange = React.useCallback(\n      (swiper: SwiperType) => {\n        if (isClickTriggered.current) {\n          isClickTriggered.current = false\n          return\n        }\n        const index = swiper.realIndex\n        setActiveIndex(index)\n        onSceneChange?.(index, scenes[index])\n      },\n      [scenes, onSceneChange]\n    )\n\n    const activeScene = scenes[activeIndex]\n\n    const isMediaTop = layout === 'top'\n\n    return (\n      <div\n        ref={ref}\n        className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n          'aiui-dark': data.theme === 'dark',\n        })}\n        {...props}\n      >\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n        <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n          <Swiper\n            modules={[FreeMode, Mousewheel, Autoplay]}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n            }}\n            className=\"!overflow-visible\"\n            onSlideChange={handleSlideChange}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            initialSlide={defaultActiveIndex}\n            loop={autoplay && scenes.length > 1}\n            autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {scenes.map((scene, index) => (\n              <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n                <div\n                  className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n                  onClick={() => handleSceneClick(index)}\n                >\n                  {/* \u5A92\u4F53 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-media',\n                      'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n                      classNames.slideMedia\n                    )}\n                  >\n                    <Media\n                      {...toMediaProps(scene.media)}\n                      className=\"rounded-t-box size-full overflow-hidden object-cover\"\n                    />\n                  </div>\n                  {/* \u6587\u5B57\u5185\u5BB9 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-content',\n                      ' mt-6  border-t pt-4',\n                      activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n                      classNames.slideContent\n                    )}\n                  >\n                    <Heading\n                      className={cn(\n                        'scene-switcher-tab-title ',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                        scene.title\n                      )}\n                      size={3}\n                      as={'h3'}\n                      html={scene.title}\n                    />\n                    {scene.description && (\n                      <Text\n                        className={cn(\n                          'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                        )}\n                        html={scene.description}\n                      />\n                    )}\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n\n        {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n        {isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:flex-col hidden',\n              'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n              classNames.container\n            )}\n          >\n            {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <Media\n                  {...toMediaProps(activeScene.media)}\n                  className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n                />\n              )}\n            </div>\n\n            {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n                classNames.tabList\n              )}\n            >\n              {scenes.map((scene, index) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  className={cn(\n                    'scene-switcher-tab-item',\n                    'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n                    activeIndex === index\n                      ? 'border-info-primary border-t-4'\n                      : 'hover:border-lines-primary border-transparent',\n                    classNames.tabItem\n                  )}\n                  onClick={() => handleSceneClick(index)}\n                  role=\"button\"\n                  aria-selected={activeIndex === index}\n                >\n                  <Heading\n                    className={cn(\n                      'scene-switcher-tab-title line-clamp-2',\n                      activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                      scene.title\n                    )}\n                    size={3}\n                    as={'h3'}\n                    html={scene.title}\n                  />\n                  {scene.description && (\n                    <Text\n                      className={cn(\n                        'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                      )}\n                      html={scene.description}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n        {!isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n              'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n              layout === 'right' && 'flex-row-reverse',\n              classNames.container\n            )}\n          >\n            {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n                classNames.tabList\n              )}\n            >\n              {/* \u5185\u5C42\u6EDA\u52A8 */}\n              <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n                {scenes.map((scene, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n                    <div\n                      ref={el => {\n                        tabRefs.current[index] = el\n                      }}\n                      className={cn(\n                        'scene-switcher-tab-item',\n                        'shrink-0 cursor-pointer border-l-4 pl-5',\n                        activeIndex === index\n                          ? 'border-info-primary border-l-[6px]'\n                          : 'border-lines-primary hover:border-info-tertiary',\n                        classNames.tabItem\n                      )}\n                      onClick={() => handleSceneClick(index)}\n                      role=\"button\"\n                      aria-selected={activeIndex === index}\n                    >\n                      <Heading\n                        className={cn(\n                          'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                          scene.title\n                        )}\n                        size={3}\n                        as={'h3'}\n                        html={scene.title}\n                      />\n                      {scene.description && (\n                        <Text\n                          className={cn(\n                            'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                            activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n                          )}\n                          html={scene.description}\n                        />\n                      )}\n                    </div>\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n\n            {/* \u5A92\u4F53\u533A\u57DF */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <Media\n                  {...toMediaProps(activeScene.media)}\n                  className={cn(\n                    'scene-switcher-media',\n                    'rounded-box size-full h-full overflow-visible object-cover',\n                    classNames.media\n                  )}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Autoplay", "useMediaQuery", "cn", "Heading", "Text", "withLayout", "Media", "toMediaProps", "media", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "className", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isClickTriggered", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el", "MediaSceneSwitcherV2_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { useIsomorphicMediaQuery } from '../../hooks/useIsomorphicMediaQuery.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\n\nexport type MediaSceneSwitcherV2SemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'subtitle'\n  | 'container'\n  | 'tabList'\n  | 'tabItem'\n  | 'tabTitle'\n  | 'tabDescription'\n  | 'mediaWrapper'\n  | 'media'\n  | 'swiper'\n  | 'slide'\n  | 'slideMedia'\n  | 'slideContent'\n\n/**\n * \u573A\u666F\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Item {\n  /** \u573A\u666F\u6807\u9898 */\n  title: string\n  /** \u573A\u666F\u63CF\u8FF0 */\n  description?: string\n  /** \u573A\u666F\u5A92\u4F53\uFF08\u56FE\u7247/\u89C6\u9891\uFF09 */\n  media: {\n    mobile?: MediaType\n    tablet?: MediaType\n    laptop?: MediaType\n    desktop?: MediaType\n    lgDesktop?: MediaType\n  }\n}\n\n/**\n * \u5E03\u5C40\u6A21\u5F0F\n * - left: \u5DE6\u6587\u53F3\u56FE\uFF08laptop+ \u9ED8\u8BA4\uFF09\n * - right: \u5DE6\u56FE\u53F3\u6587\n * - top: \u4E0A\u56FE\u4E0B\u6587\uFF08swiper \u5361\u7247\u6A21\u5F0F\uFF09\n */\nexport type MediaSceneSwitcherV2Layout = 'left' | 'right' | 'top'\n\n/**\n * MediaSceneSwitcherV2 \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaSceneSwitcherV2Data {\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  /** \u573A\u666F\u5217\u8868 */\n  items: MediaSceneSwitcherV2Item[]\n  /** \u9ED8\u8BA4\u9009\u4E2D\u7684\u573A\u666F\u7D22\u5F15 */\n  defaultActiveIndex?: number\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF0C\u9ED8\u8BA4 text-left */\n  layout?: MediaSceneSwitcherV2Layout\n  /** \u662F\u5426\u5F00\u542F\u81EA\u52A8\u8F6E\u64AD\uFF0C\u9ED8\u8BA4 true */\n  autoplay?: boolean\n  /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09\uFF0C\u9ED8\u8BA4 3000 */\n  autoplayDelay?: number\n}\n\nexport interface MediaSceneSwitcherV2Props extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MediaSceneSwitcherV2Data\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n  classNames?: Partial<Record<MediaSceneSwitcherV2SemanticName, string>>\n  /** \u573A\u666F\u5207\u6362\u56DE\u8C03 */\n  onSceneChange?: (index: number, scene: MediaSceneSwitcherV2Item) => void\n}\n\nconst toMediaProps = (media: MediaSceneSwitcherV2Item['media']) => ({\n  pcImage: media.lgDesktop,\n  desktopImage: media.desktop,\n  laptopImage: media.laptop,\n  padImage: media.tablet,\n  mobileImage: media.mobile,\n})\n\n/**\n * MediaSceneSwitcherV2 - \u591A\u573A\u666F\u5207\u6362\u7EC4\u4EF6\n *\n * @description \u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u573A\u666F\u7684\u5207\u6362\u7EC4\u4EF6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\uFF1A\n * - mobile/tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40\n * - laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40\n */\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\nconst MediaSceneSwitcherV2 = React.forwardRef<HTMLDivElement, MediaSceneSwitcherV2Props>(\n  ({ className, classNames = {}, data, onSceneChange, ...props }, ref) => {\n    const {\n      title,\n      subtitle,\n      items: scenes,\n      defaultActiveIndex = 0,\n      layout = 'left',\n      autoplay = true,\n      autoplayDelay = DEFAULT_AUTOPLAY_DELAY,\n    } = data\n    const [activeIndex, setActiveIndex] = React.useState(defaultActiveIndex)\n    const swiperRef = React.useRef<SwiperType | null>(null)\n    const intervalRef = React.useRef<number>(0)\n    const tabRefs = React.useRef<(HTMLDivElement | null)[]>([])\n    const isClickTriggered = React.useRef(false)\n\n    // \u5224\u65AD\u662F\u5426\u662F\u684C\u9762\u7AEF\n    const isLaptopOrLarger = useIsomorphicMediaQuery({ minWidth: 1025 })\n\n    // \u684C\u9762\u7AEF\u81EA\u52A8\u8F6E\u64AD\uFF08\u53EA\u5728 laptop+ \u751F\u6548\uFF0C\u624B\u673A\u7AEF\u7531 Swiper \u7684 onSlideChange \u540C\u6B65\uFF09\n    React.useEffect(() => {\n      if (!autoplay || scenes.length <= 1 || !isLaptopOrLarger) return\n\n      const startAutoplay = () => {\n        intervalRef.current = window.setInterval(() => {\n          setActiveIndex(prev => (prev + 1) % scenes.length)\n        }, autoplayDelay)\n      }\n\n      startAutoplay()\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [autoplay, autoplayDelay, scenes.length, isLaptopOrLarger])\n\n    // \u5F53 activeIndex \u53D8\u5316\u65F6\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\uFF08\u4EC5\u5F53\u7236\u5BB9\u5668\u53EF\u6EDA\u52A8\u65F6\uFF09\n    React.useEffect(() => {\n      if (!isLaptopOrLarger || !tabRefs.current[activeIndex]) return\n\n      const tabElement = tabRefs.current[activeIndex]\n      const parentContainer = tabElement?.parentElement\n\n      // \u68C0\u67E5\u7236\u5BB9\u5668\u662F\u5426\u53EF\u6EDA\u52A8\n      if (!parentContainer || parentContainer.scrollHeight <= parentContainer.clientHeight) return\n\n      // \u4F7F\u7528 requestAnimationFrame \u907F\u514D\u963B\u585E\u4E3B\u7EBF\u7A0B\n      const rafId = requestAnimationFrame(() => {\n        const containerRect = parentContainer.getBoundingClientRect()\n        const tabRect = tabElement.getBoundingClientRect()\n\n        // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5DF2\u5728\u53EF\u89C6\u533A\u57DF\u5185\n        const isVisible = tabRect.top >= containerRect.top && tabRect.bottom <= containerRect.bottom\n\n        // \u5982\u679C\u5DF2\u7ECF\u53EF\u89C1\uFF0C\u4E0D\u9700\u8981\u6EDA\u52A8\n        if (isVisible) return\n\n        // \u8BA1\u7B97\u6EDA\u52A8\u8DDD\u79BB\uFF0C\u8BA9 tab \u5C3D\u91CF\u5C45\u4E2D\u663E\u793A\n        const scrollOffset = tabRect.top - containerRect.top - parentContainer.clientHeight / 2 + tabRect.height / 2\n\n        parentContainer.scrollTo({\n          top: parentContainer.scrollTop + scrollOffset,\n          behavior: 'smooth',\n        })\n      })\n\n      return () => cancelAnimationFrame(rafId)\n    }, [activeIndex, isLaptopOrLarger])\n\n    const handleSceneClick = React.useCallback(\n      (index: number) => {\n        setActiveIndex(index)\n        isClickTriggered.current = true\n        onSceneChange?.(index, scenes[index])\n        swiperRef.current?.slideTo(index)\n\n        // \u91CD\u7F6E\u81EA\u52A8\u8F6E\u64AD\u8BA1\u65F6\u5668\n        if (autoplay && scenes.length > 1) {\n          if (intervalRef.current) {\n            window.clearInterval(intervalRef.current)\n          }\n          intervalRef.current = window.setInterval(() => {\n            setActiveIndex(prev => (prev + 1) % scenes.length)\n          }, autoplayDelay)\n        }\n      },\n      [scenes, onSceneChange, autoplay, autoplayDelay]\n    )\n\n    const handleSlideChange = React.useCallback(\n      (swiper: SwiperType) => {\n        if (isClickTriggered.current) {\n          isClickTriggered.current = false\n          return\n        }\n        const index = swiper.realIndex\n        setActiveIndex(index)\n        onSceneChange?.(index, scenes[index])\n      },\n      [scenes, onSceneChange]\n    )\n\n    const activeScene = scenes[activeIndex]\n\n    const isMediaTop = layout === 'top'\n\n    return (\n      <div\n        ref={ref}\n        className={cn('scene-switcher-root', 'text-info-primary w-full', className, classNames.root, {\n          'aiui-dark': data.theme === 'dark',\n        })}\n        {...props}\n      >\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('scene-switcher-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('scene-switcher-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {/* Mobile/Tablet: \u6A2A\u5411\u6ED1\u52A8\u5361\u7247\u5E03\u5C40 */}\n        <div className={cn('scene-switcher-swiper', 'laptop:hidden !overflow-visible', classNames.swiper)}>\n          <Swiper\n            modules={[FreeMode, Mousewheel, Autoplay]}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n            }}\n            className=\"!overflow-visible\"\n            onSlideChange={handleSlideChange}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            initialSlide={defaultActiveIndex}\n            loop={autoplay && scenes.length > 1}\n            autoplay={autoplay && scenes.length > 1 ? { delay: autoplayDelay, disableOnInteraction: false } : false}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {scenes.map((scene, index) => (\n              <SwiperSlide key={index} className=\"h-[462px] !w-[296px]\">\n                <div\n                  className={cn('scene-switcher-slide', 'flex cursor-pointer flex-col', classNames.slide)}\n                  onClick={() => handleSceneClick(index)}\n                >\n                  {/* \u5A92\u4F53 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-media',\n                      'rounded-box relative aspect-[296/320] w-full overflow-hidden',\n                      classNames.slideMedia\n                    )}\n                  >\n                    <Media\n                      {...toMediaProps(scene.media)}\n                      className=\"rounded-t-box size-full overflow-hidden object-cover\"\n                    />\n                  </div>\n                  {/* \u6587\u5B57\u5185\u5BB9 */}\n                  <div\n                    className={cn(\n                      'scene-switcher-slide-content',\n                      ' mt-6  border-t pt-4',\n                      activeIndex === index ? 'border-info-primary border-t-4' : 'border-lines-primary',\n                      classNames.slideContent\n                    )}\n                  >\n                    <Heading\n                      className={cn(\n                        'scene-switcher-tab-title ',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                        scene.title\n                      )}\n                      size={3}\n                      as={'h3'}\n                      html={scene.title}\n                    />\n                    {scene.description && (\n                      <Text\n                        className={cn(\n                          'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2  text-[14px]',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                        )}\n                        html={scene.description}\n                      />\n                    )}\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n\n        {/* Laptop+: media-top \u5E03\u5C40 (\u4E0A\u56FE\u4E0B\u6587) */}\n        {isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:flex-col hidden',\n              'laptop:h-[470px] desktop:h-[628px] lg-desktop:h-[746px] desktop:gap-[32px] gap-[16px]',\n              classNames.container\n            )}\n          >\n            {/* \u5A92\u4F53\u533A\u57DF - \u663E\u793A\u5F53\u524D\u9009\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <Media\n                  {...toMediaProps(activeScene.media)}\n                  className={cn('scene-switcher-media', 'rounded-box size-full object-cover', classNames.media)}\n                />\n              )}\n            </div>\n\n            {/* Tab \u5217\u8868 - \u6A2A\u5411\u6392\u5217 */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'border-lines-primary laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex border-t',\n                classNames.tabList\n              )}\n            >\n              {scenes.map((scene, index) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  className={cn(\n                    'scene-switcher-tab-item',\n                    'desktop:pt-6 -mt-px flex-1 cursor-pointer border-t-2 pt-4 transition-colors',\n                    activeIndex === index\n                      ? 'border-info-primary border-t-4'\n                      : 'hover:border-lines-primary border-transparent',\n                    classNames.tabItem\n                  )}\n                  onClick={() => handleSceneClick(index)}\n                  role=\"button\"\n                  aria-selected={activeIndex === index}\n                >\n                  <Heading\n                    className={cn(\n                      'scene-switcher-tab-title line-clamp-2',\n                      activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                      scene.title\n                    )}\n                    size={3}\n                    as={'h3'}\n                    html={scene.title}\n                  />\n                  {scene.description && (\n                    <Text\n                      className={cn(\n                        'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                        activeIndex === index ? 'text-info-primary' : 'text-info-tertiary'\n                      )}\n                      html={scene.description}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Laptop+: \u5DE6\u6587\u53F3\u56FE / \u5DE6\u56FE\u53F3\u6587\u5E03\u5C40 */}\n        {!isMediaTop && (\n          <div\n            className={cn(\n              'scene-switcher-container',\n              'laptop:flex laptop:gap-6 desktop:gap-8 lg-desktop:gap-10 hidden',\n              'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n              layout === 'right' && 'flex-row-reverse',\n              classNames.container\n            )}\n          >\n            {/* Tab \u5217\u8868 - \u5916\u5C42\u5C45\u4E2D */}\n            <div\n              className={cn(\n                'scene-switcher-tab-list',\n                'laptop:w-[320px] desktop:w-[400px] lg-desktop:w-[544px] flex items-center',\n                classNames.tabList\n              )}\n            >\n              {/* \u5185\u5C42\u6EDA\u52A8 */}\n              <div className=\"flex max-h-full w-full flex-col overflow-y-auto\">\n                {scenes.map((scene, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"border-lines-primary h-8 shrink-0 border-l-4\" />}\n                    <div\n                      ref={el => {\n                        tabRefs.current[index] = el\n                      }}\n                      className={cn(\n                        'scene-switcher-tab-item',\n                        'shrink-0 cursor-pointer border-l-4 pl-5',\n                        activeIndex === index\n                          ? 'border-info-primary border-l-[6px]'\n                          : 'border-lines-primary hover:border-info-tertiary',\n                        classNames.tabItem\n                      )}\n                      onClick={() => handleSceneClick(index)}\n                      role=\"button\"\n                      aria-selected={activeIndex === index}\n                    >\n                      <Heading\n                        className={cn(\n                          'scene-switcher-tab-title desktop:line-clamp-3 line-clamp-2',\n                          activeIndex === index ? 'text-info-primary' : 'text-info-tertiary',\n                          scene.title\n                        )}\n                        size={3}\n                        as={'h3'}\n                        html={scene.title}\n                      />\n                      {scene.description && (\n                        <Text\n                          className={cn(\n                            'desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]',\n                            activeIndex === index ? 'text-info-primary' : 'text-info-tertiary hidden'\n                          )}\n                          html={scene.description}\n                        />\n                      )}\n                    </div>\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n\n            {/* \u5A92\u4F53\u533A\u57DF */}\n            <div\n              className={cn(\n                'scene-switcher-media-wrapper',\n                'rounded-box flex-1 overflow-hidden',\n                classNames.mediaWrapper\n              )}\n            >\n              {activeScene && (\n                <Media\n                  {...toMediaProps(activeScene.media)}\n                  className={cn(\n                    'scene-switcher-media',\n                    'rounded-box size-full h-full overflow-visible object-cover',\n                    classNames.media\n                  )}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaSceneSwitcherV2.displayName = 'MediaSceneSwitcherV2'\nexport default withLayout(MediaSceneSwitcherV2)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "FreeMode", "Mousewheel", "Autoplay", "useIsomorphicMediaQuery", "cn", "Heading", "Text", "withLayout", "Media", "toMediaProps", "media", "DEFAULT_AUTOPLAY_DELAY", "MediaSceneSwitcherV2", "className", "classNames", "data", "onSceneChange", "props", "ref", "title", "subtitle", "scenes", "defaultActiveIndex", "layout", "autoplay", "autoplayDelay", "activeIndex", "setActiveIndex", "swiperRef", "intervalRef", "tabRefs", "isClickTriggered", "isLaptopOrLarger", "prev", "tabElement", "parentContainer", "rafId", "containerRect", "tabRect", "scrollOffset", "handleSceneClick", "index", "handleSlideChange", "swiper", "activeScene", "isMediaTop", "scene", "el", "MediaSceneSwitcherV2_default"]
 }

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

@@ -118,7 +118,7 @@ export interface MediaShelfComponent extends React.ForwardRefExoticComponent<Med
     /** 独立的 ProductCard 组件 */
     ProductCard: typeof ProductCard;
 }
-declare const MediaShelfWrapped: React.ForwardRefExoticComponent<Omit<MediaShelfProps & 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 MediaShelfWrapped: React.ForwardRefExoticComponent<Omit<MediaShelfProps & 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;
     ProductCard: typeof ProductCard;
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { MediaTextOverlayProps } from './types.js';
 import 'swiper/css';
 import 'swiper/css/navigation';
-declare const _default: React.ForwardRefExoticComponent<Omit<MediaTextOverlayProps & 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<MediaTextOverlayProps & 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/MediaTextOverlay/MediaTextOverlay.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import N,{useRef as B,useMemo as C,useState as M,useEffect as E,useCallback as T}from"react";import{withLayout as O}from"../../shared/Styles.js";import{cn as v}from"../../helpers/utils.js";import{useExposure as S}from"../../hooks/useExposure.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as $}from"../../components/index.js";import{Swiper as R,SwiperSlide as j}from"swiper/react";import{Navigation as A}from"swiper/modules";const D=({disabled:l})=>p("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),H=({disabled:l})=>p("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),W="video",Z="media_text_overlay",_=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),F=()=>p("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),e("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),q=({data:l,configuration:r,jIndex:w,classNames:d={}})=>{const h=B(null),c=B(null),{content:i,media:s}=l,x=r?.theme||"light",b=r?.size||"lg",k=r?.onlyOne||!1,m=r?.isAutoPlay??!0,[f,a]=M(!1);S(h,{componentType:W,componentName:Z,position:w,componentTitle:i,navigation:r?.activeTab});const n=C(()=>[s.lgDesktop,s.desktop,s.laptop,s.pad,s.mobile].some(o=>o?.mimeType==="video/mp4"),[s]),P=T(()=>{const o=c.current;o&&(o.paused?(o.play(),a(!0)):(o.pause(),a(!1)))},[]);return E(()=>{const o=c.current;if(!o||!n||!m)return;const u=new IntersectionObserver(t=>{t.forEach(g=>{g.isIntersecting?o.play().catch(I=>{console.warn("Video autoplay failed:",I)}):o.pause()})},{threshold:.5});return u.observe(o),()=>{u.disconnect()}},[n,m]),p("div",{className:v("item-wrapper rounded-box group relative box-border w-full overflow-hidden",k?{lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[b]:"tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]",{"aiui-dark":x==="dark"}),ref:h,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:s.lgDesktop||s.desktop,desktopImage:s.desktop,laptopImage:s.laptop,padImage:s.pad,mobileImage:s.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:c,muted:!0,loop:!0,playsInline:!0,autoPlay:m,onVideoPlay:()=>a(!0),onVideoPause:()=>a(!1),onVideoEnded:()=>a(!1)})}),n&&e("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:e("button",{type:"button","aria-label":f?"Pause video":"Play video",onClick:P,className:v("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",d.playButton),children:f?e(F,{}):e(_,{})})}),e("div",{className:v("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",d.overlay),children:e("div",{className:v("flex items-end justify-between gap-4",d.content),children:e($,{size:2,html:i,className:"line-clamp-3"})})})]})},z=N.forwardRef((l,r)=>{const{data:w,className:d,classNames:h={},...c}=l,{items:i=[],theme:s="dark",size:x="sm",isShowPagination:b=!0,isAutoPlay:k=!0}=w,{locale:m="us"}=L(),f=B(null),[a,n]=M({isBeginning:!0,isEnd:!1}),P=C(()=>{const t=i?.length||0;return{0:{spaceBetween:12,slidesPerView:t>1?1.2:1},768:{spaceBetween:12,slidesPerView:t>2?2.3:t>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(t,3)},1440:{spaceBetween:16,slidesPerView:Math.min(t,4)},1920:{spaceBetween:16,slidesPerView:Math.min(t,4)}}},[i?.length]),y=N.useId().replace(/:/g,""),o=`${y}-custom-swiper-button-next`,u=`${y}-custom-swiper-button-prev`;return e("section",{"data-ui-component-id":"MediaTextOverlay",ref:r,...c,className:v("mediaTextOverlayBlock text-info-primary",d,h.root),children:i&&i.length>0?p("div",{className:"group relative",children:[e(R,{className:"!overflow-visible",modules:[A],navigation:{nextEl:`.${o}`,prevEl:`.${u}`},onSwiper:t=>{f.current=t,n({isBeginning:t.isBeginning,isEnd:t.isEnd})},onReachEnd:()=>{n(t=>({...t,isEnd:!0}))},onReachBeginning:()=>{n(t=>({...t,isBeginning:!0}))},onFromEdge:()=>{n({isBeginning:!1,isEnd:!1})},breakpoints:P,children:i.map((t,g)=>e(j,{className:"!flex !h-[unset]",children:e(q,{data:t,configuration:{theme:s,size:x,num:i.length,locale:m,onlyOne:i.length===1,index:g,isAutoPlay:k},jIndex:g})},`${y}-SwiperSlide-${g}`))}),b&&i.length>1&&p(G,{children:[e("button",{className:`${u} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${a.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(D,{disabled:a.isBeginning})}),e("button",{className:`${o} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${a.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(H,{disabled:a.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var ae=O(z);export{ae as default};
+"use client";import{Fragment as G,jsx as e,jsxs as r}from"react/jsx-runtime";import P,{useRef as N,useMemo as M,useState as I,useEffect as S,useCallback as E}from"react";import{withLayout as z}from"../../shared/Styles.js";import{cn as m}from"../../helpers/utils.js";import{useExposure as O}from"../../hooks/useExposure.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as $}from"../../components/index.js";import{Swiper as R,SwiperSlide as j}from"swiper/react";import{Navigation as D}from"swiper/modules";const H=({disabled:l})=>r("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),A=({disabled:l})=>r("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),W="video",Z="media_text_overlay",_=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),F=()=>r("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),e("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),q=({data:l,jIndex:w,classNames:p={},theme:x="light",size:u="lg",onlyOne:b=!1,isAutoPlay:s=!0,activeTab:k})=>{const g=N(null),d=N(null),{content:v,media:o}=l,[h,a]=I(!1);O(g,{componentType:W,componentName:Z,position:w,componentTitle:v,navigation:k});const n=M(()=>[o.lgDesktop,o.desktop,o.laptop,o.pad,o.mobile].some(i=>i?.mimeType==="video/mp4"),[o]),B=E(()=>{const i=d.current;i&&(i.paused?(i.play(),a(!0)):(i.pause(),a(!1)))},[]);return S(()=>{const i=d.current;if(!i||!n||!s)return;const c=new IntersectionObserver(t=>{t.forEach(y=>{y.isIntersecting?i.play().catch(C=>{console.warn("Video autoplay failed:",C)}):i.pause()})},{threshold:.5});return c.observe(i),()=>{c.disconnect()}},[n,s]),r("div",{className:m("item-wrapper rounded-box group relative box-border w-full overflow-hidden",b?{lg:"aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[u]:"tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]",{"aiui-dark":x==="dark"}),ref:g,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:o.lgDesktop||o.desktop,desktopImage:o.desktop,laptopImage:o.laptop,padImage:o.pad,mobileImage:o.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:d,muted:!0,loop:!0,playsInline:!0,autoPlay:s,onVideoPlay:()=>a(!0),onVideoPause:()=>a(!1),onVideoEnded:()=>a(!1)})}),n&&e("div",{className:"lg-desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:e("button",{type:"button","aria-label":h?"Pause video":"Play video",onClick:B,className:m("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",p.playButton),children:h?e(F,{}):e(_,{})})}),e("div",{className:m("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 lg-desktop:px-8 lg-desktop:pb-8 lg-desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",p.overlay),children:e("div",{className:m("flex items-end justify-between gap-4",p.content),children:e($,{size:u==="sm"?2:3,html:v,className:"line-clamp-3"})})})]})},T=P.forwardRef((l,w)=>{const{data:p,className:x,classNames:u={},...b}=l,{items:s=[],theme:k="dark",size:g="sm",isShowPagination:d=!0,isAutoPlay:v=!0}=p,{locale:o="us"}=L(),h=N(null),[a,n]=I({isBeginning:!0,isEnd:!1}),B=M(()=>{const t=s?.length||0;return{0:{spaceBetween:12,slidesPerView:t>1?1.2:1},768:{spaceBetween:12,slidesPerView:t>2?2.3:t>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(t,3)},1440:{spaceBetween:16,slidesPerView:Math.min(t,4)},1920:{spaceBetween:16,slidesPerView:Math.min(t,4)}}},[s?.length]),f=P.useId().replace(/:/g,""),i=`${f}-custom-swiper-button-next`,c=`${f}-custom-swiper-button-prev`;return e("section",{"data-ui-component-id":"MediaTextOverlay",ref:w,...b,className:m("mediaTextOverlayBlock text-info-primary",x,u.root),children:s&&s.length>0?r("div",{className:"group relative",children:[e(R,{className:"!overflow-visible",modules:[D],navigation:{nextEl:`.${i}`,prevEl:`.${c}`},onSwiper:t=>{h.current=t,n({isBeginning:t.isBeginning,isEnd:t.isEnd})},onReachEnd:()=>{n(t=>({...t,isEnd:!0}))},onReachBeginning:()=>{n(t=>({...t,isBeginning:!0}))},onFromEdge:()=>{n({isBeginning:!1,isEnd:!1})},breakpoints:B,children:s.map((t,y)=>e(j,{className:"!flex !h-[unset]",children:e(q,{data:t,jIndex:y,theme:k,size:g,onlyOne:s.length===1,isAutoPlay:v})},`${f}-SwiperSlide-${y}`))}),d&&s.length>1&&r(G,{children:[e("button",{className:`${c} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${a.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(H,{disabled:a.isBeginning})}),e("button",{className:`${i} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${a.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(A,{disabled:a.isEnd})})]})]}):null})});T.displayName="MediaTextOverlay";var ae=z(T);export{ae as default};
 //# sourceMappingURL=MediaTextOverlay.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaTextOverlay/MediaTextOverlay.tsx"],
-  "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\ninterface ItemBlockProps {\n  data: MediaTextOverlayItem\n  configuration?: any\n  jIndex?: number\n  classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const { content, media } = item\n  const theme = configuration?.theme || 'light'\n  const size = configuration?.size || 'lg'\n  const onlyOne = configuration?.onlyOne || false\n  const isAutoPlay = configuration?.isAutoPlay ?? true\n\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    position: jIndex,\n    componentTitle: content,\n    navigation: configuration?.activeTab,\n  })\n\n  const hasVideo = useMemo(\n    () =>\n      [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n    [media]\n  )\n\n  const handlePlayButtonClick = useCallback(() => {\n    const video = videoRef.current\n    if (video) {\n      if (video.paused) {\n        video.play()\n        setIsPlaying(true)\n      } else {\n        video.pause()\n        setIsPlaying(false)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video || !hasVideo || !isAutoPlay) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            video.play().catch(error => {\n              console.warn('Video autoplay failed:', error)\n            })\n          } else {\n            video.pause()\n          }\n        })\n      },\n      { threshold: 0.5 }\n    )\n\n    observer.observe(video)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasVideo, isAutoPlay])\n\n  const sizeClasses = {\n    lg: 'aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]',\n    sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n  }\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n        onlyOne\n          ? sizeClasses[size as keyof typeof sizeClasses]\n          : 'tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]',\n        {\n          'aiui-dark': theme === 'dark',\n        }\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Media\n          pcImage={media.lgDesktop || media.desktop}\n          desktopImage={media.desktop}\n          laptopImage={media.laptop}\n          padImage={media.pad}\n          mobileImage={media.mobile}\n          videoClassName=\"absolute inset-0 size-full object-cover\"\n          imgClassName=\"absolute inset-0 size-full object-cover\"\n          videoRef={videoRef}\n          muted={true}\n          loop={true}\n          playsInline={true}\n          autoPlay={isAutoPlay}\n          onVideoPlay={() => setIsPlaying(true)}\n          onVideoPause={() => setIsPlaying(false)}\n          onVideoEnded={() => setIsPlaying(false)}\n        />\n      </div>\n\n      {hasVideo && (\n        <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n          <button\n            type=\"button\"\n            aria-label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayButtonClick}\n            className={cn(\n              'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n              classNames.playButton\n            )}\n          >\n            {isPlaying ? <PauseIcon /> : <PlayIcon />}\n          </button>\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20',\n          classNames.overlay\n        )}\n      >\n        <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n          <Heading size={2} html={content} className=\"line-clamp-3\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n  const { data, className, classNames = {}, ...rest } = props\n  const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n  const { locale = 'us' } = useAiuiContext()\n  const swiperRef = useRef<any>(null)\n  const [swiperState, setSwiperState] = useState({\n    isBeginning: true,\n    isEnd: false,\n  })\n\n  const breakpoints = useMemo(() => {\n    const len = items?.length || 0\n    return {\n      0: {\n        spaceBetween: 12,\n        slidesPerView: len > 1 ? 1.2 : 1,\n      },\n      768: {\n        spaceBetween: 12,\n        slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n      },\n      1024: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 3),\n      },\n      1440: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n      1920: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n    }\n  }, [items?.length])\n\n  // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n  const id = React.useId().replace(/:/g, '')\n  const nextButtonClass = `${id}-custom-swiper-button-next`\n  const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n  return (\n    <section\n      data-ui-component-id=\"MediaTextOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n    >\n      {items && items.length > 0 ? (\n        <div className=\"group relative\">\n          <Swiper\n            className=\"!overflow-visible\"\n            modules={[Navigation]}\n            navigation={{\n              nextEl: `.${nextButtonClass}`,\n              prevEl: `.${prevButtonClass}`,\n            }}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n              setSwiperState({\n                isBeginning: swiper.isBeginning,\n                isEnd: swiper.isEnd,\n              })\n            }}\n            onReachEnd={() => {\n              setSwiperState(prev => ({ ...prev, isEnd: true }))\n            }}\n            onReachBeginning={() => {\n              setSwiperState(prev => ({ ...prev, isBeginning: true }))\n            }}\n            onFromEdge={() => {\n              setSwiperState({ isBeginning: false, isEnd: false })\n            }}\n            breakpoints={breakpoints}\n          >\n            {items.map((item, jIndex) => (\n              <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    theme,\n                    size,\n                    num: items.length,\n                    locale,\n                    onlyOne: items.length === 1,\n                    index: jIndex,\n                    isAutoPlay,\n                  }}\n                  jIndex={jIndex}\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {isShowPagination && items.length > 1 && (\n            <>\n              <button\n                className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Previous slide\"\n              >\n                <PrevIcon disabled={swiperState.isBeginning} />\n              </button>\n              <button\n                className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Next slide\"\n              >\n                <NextIcon disabled={swiperState.isEnd} />\n              </button>\n            </>\n          )}\n        </div>\n      ) : null}\n    </section>\n  )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "size", "onlyOne", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
+  "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { Theme } from '../../types/props.js'\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem, MediaTextOverlaySemanticName } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\ntype ItemBlockSemanticName = Extract<MediaTextOverlaySemanticName, 'playButton' | 'content' | 'overlay'>\n\ninterface ItemBlockProps {\n  data: MediaTextOverlayItem\n  jIndex?: number\n  classNames?: Partial<Record<ItemBlockSemanticName, string>>\n  theme?: Theme\n  size?: 'lg' | 'sm'\n  onlyOne?: boolean\n  isAutoPlay?: boolean\n  activeTab?: string\n}\n\nconst ItemBlock = ({\n  data: item,\n  jIndex,\n  classNames = {},\n  theme = 'light',\n  size = 'lg',\n  onlyOne = false,\n  isAutoPlay = true,\n  activeTab,\n}: ItemBlockProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const { content, media } = item\n\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    position: jIndex,\n    componentTitle: content,\n    navigation: activeTab,\n  })\n\n  const hasVideo = useMemo(\n    () =>\n      [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n    [media]\n  )\n\n  const handlePlayButtonClick = useCallback(() => {\n    const video = videoRef.current\n    if (video) {\n      if (video.paused) {\n        video.play()\n        setIsPlaying(true)\n      } else {\n        video.pause()\n        setIsPlaying(false)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video || !hasVideo || !isAutoPlay) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            video.play().catch(error => {\n              console.warn('Video autoplay failed:', error)\n            })\n          } else {\n            video.pause()\n          }\n        })\n      },\n      { threshold: 0.5 }\n    )\n\n    observer.observe(video)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasVideo, isAutoPlay])\n\n  const sizeClasses = {\n    lg: 'aspect-[390/400] tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640]',\n    sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n  }\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n        onlyOne\n          ? sizeClasses[size as keyof typeof sizeClasses]\n          : 'tablet:aspect-[768/400] laptop:aspect-[1024/384] desktop:aspect-[1440/512] lg-desktop:aspect-[1920/640] aspect-[390/400]',\n        {\n          'aiui-dark': theme === 'dark',\n        }\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Media\n          pcImage={media.lgDesktop || media.desktop}\n          desktopImage={media.desktop}\n          laptopImage={media.laptop}\n          padImage={media.pad}\n          mobileImage={media.mobile}\n          videoClassName=\"absolute inset-0 size-full object-cover\"\n          imgClassName=\"absolute inset-0 size-full object-cover\"\n          videoRef={videoRef}\n          muted={true}\n          loop={true}\n          playsInline={true}\n          autoPlay={isAutoPlay}\n          onVideoPlay={() => setIsPlaying(true)}\n          onVideoPause={() => setIsPlaying(false)}\n          onVideoEnded={() => setIsPlaying(false)}\n        />\n      </div>\n\n      {hasVideo && (\n        <div className=\"lg-desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n          <button\n            type=\"button\"\n            aria-label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayButtonClick}\n            className={cn(\n              'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n              classNames.playButton\n            )}\n          >\n            {isPlaying ? <PauseIcon /> : <PlayIcon />}\n          </button>\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 lg-desktop:px-8 lg-desktop:pb-8 lg-desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20',\n          classNames.overlay\n        )}\n      >\n        <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n          <Heading size={size === 'sm' ? 2 : 3} html={content} className=\"line-clamp-3\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n  const { data, className, classNames = {}, ...rest } = props\n  const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n  const { locale = 'us' } = useAiuiContext()\n  const swiperRef = useRef<SwiperType | null>(null)\n  const [swiperState, setSwiperState] = useState({\n    isBeginning: true,\n    isEnd: false,\n  })\n\n  const breakpoints = useMemo(() => {\n    const len = items?.length || 0\n    return {\n      0: {\n        spaceBetween: 12,\n        slidesPerView: len > 1 ? 1.2 : 1,\n      },\n      768: {\n        spaceBetween: 12,\n        slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n      },\n      1024: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 3),\n      },\n      1440: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n      1920: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n    }\n  }, [items?.length])\n\n  // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n  const id = React.useId().replace(/:/g, '')\n  const nextButtonClass = `${id}-custom-swiper-button-next`\n  const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n  return (\n    <section\n      data-ui-component-id=\"MediaTextOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n    >\n      {items && items.length > 0 ? (\n        <div className=\"group relative\">\n          <Swiper\n            className=\"!overflow-visible\"\n            modules={[Navigation]}\n            navigation={{\n              nextEl: `.${nextButtonClass}`,\n              prevEl: `.${prevButtonClass}`,\n            }}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n              setSwiperState({\n                isBeginning: swiper.isBeginning,\n                isEnd: swiper.isEnd,\n              })\n            }}\n            onReachEnd={() => {\n              setSwiperState(prev => ({ ...prev, isEnd: true }))\n            }}\n            onReachBeginning={() => {\n              setSwiperState(prev => ({ ...prev, isBeginning: true }))\n            }}\n            onFromEdge={() => {\n              setSwiperState({ isBeginning: false, isEnd: false })\n            }}\n            breakpoints={breakpoints}\n          >\n            {items.map((item, jIndex) => (\n              <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n                <ItemBlock\n                  data={item}\n                  jIndex={jIndex}\n                  theme={theme}\n                  size={size}\n                  onlyOne={items.length === 1}\n                  isAutoPlay={isAutoPlay}\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {isShowPagination && items.length > 1 && (\n            <>\n              <button\n                className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Previous slide\"\n              >\n                <PrevIcon disabled={swiperState.isBeginning} />\n              </button>\n              <button\n                className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Next slide\"\n              >\n                <NextIcon disabled={swiperState.isEnd} />\n              </button>\n            </>\n          )}\n        </div>\n      ) : null}\n    </section>\n  )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "jIndex", "classNames", "theme", "size", "onlyOne", "isAutoPlay", "activeTab", "ref", "videoRef", "content", "media", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
 }

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

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

package/dist/esm/biz-components/MemberEquity/index.js

@@ -1,5 +1,5 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import z,{useImperativeHandle as H,useRef as P}from"react";import{useMediaQuery as T}from"react-responsive";import{Button as x,Heading as j,Picture as y,Text as C}from"../../components/index.js";import{withLayout as R}from"../../shared/Styles.js";import{cn as d,getLocalizedPath as _}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as I}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{useAiuiContext as D}from"../AiuiProvider/index.js";const r="image",m="member_area",f=z.forwardRef(({data:g,className:k="",...v},h)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:N,shape:B,primaryButtonHandler:c,secondaryButtonHandler:$}=g,q=T({query:"(max-width: 768px)"}),n=P(null),{locale:M="us"}=D();H(h,()=>n.current),I(n,{componentType:r,componentName:m,componentTitle:t,componentDescription:o});const E=()=>{console.log("primaryButtonHandler",c),c?.()},w=()=>{$?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",...v,className:d("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",k,{"aiui-dark":N==="dark","rounded-box":B==="rounded","h-[480px]":q}),ref:n,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import z,{useImperativeHandle as P,useRef as T}from"react";import{useIsomorphicMediaQuery as _}from"../../hooks/useIsomorphicMediaQuery.js";import{Button as x,Heading as j,Picture as y,Text as C}from"../../components/index.js";import{withLayout as I}from"../../shared/Styles.js";import{cn as c,getLocalizedPath as R}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{useAiuiContext as S}from"../AiuiProvider/index.js";const r="image",n="member_area",f=z.forwardRef(({data:g,className:k="",...v},h)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:N,shape:$,primaryButtonHandler:d,secondaryButtonHandler:B}=g,q=_({query:"(max-width: 768px)"}),m=T(null),{locale:M="us",trackingData:E}=S();P(h,()=>m.current),D(m,{componentType:r,componentName:n,componentTitle:t,componentDescription:o});const w=()=>{console.log("primaryButtonHandler",d),d?.()},H=()=>{B?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",...v,className:c("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",k,{"aiui-dark":N==="dark","rounded-box":$==="rounded","h-[480px]":q}),ref:m,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
               tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 
               laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
-            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(j,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(C,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:w,className:d("member-equity-button-secondary ",u),as:"a",href:L(_(a.link||"",M),`${r}_${m}`),"data-headless-type-name":`${r}#${m}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:E,className:d("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${m}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});f.displayName="MemberEquity";var O=R(f);export{O as default};
+            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(j,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(C,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:H,className:c("member-equity-button-secondary ",u),as:"a",href:L(R(a.link||"",M),`${E?.contextHandle||""}_${r}_${n}`),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:w,className:c("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});f.displayName="MemberEquity";var W=I(f);export{W as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '', ...rest }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us' } = useAiuiContext()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        {...rest}\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(secondaryButton.link || '', locale),\n                    `${componentType}_${componentName}`\n                  )}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "getLocalizedPath", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MemberEquity", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useIsomorphicMediaQuery } from '../../hooks/useIsomorphicMediaQuery.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '', ...rest }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useIsomorphicMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us', trackingData } = useAiuiContext()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        {...rest}\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(secondaryButton.link || '', locale),\n                    `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                  )}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useIsomorphicMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "getLocalizedPath", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MemberEquity", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "trackingData", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
 }