@anker-in/headless-ui 1.0.26-temp-111401-alpha.1763091370012 → 1.0.26-temp.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left max-w-[686px]\">\n            {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map((icon, index) => (\n              <div key={index} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "icon", "index", "c", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    label,\n    title,\n    subtitle,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left max-w-[686px]\">\n            {label && (\n              <Heading\n                as=\"h3\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          {iconArray && iconArray.length > 0 && (\n            <div className=\"hero-banner-icon-list flex items-center gap-2\">\n              {iconArray.map((icon, index) => (\n                <Picture\n                  key={index}\n                  className=\"hero-banner-icon h-9 desktop:h-12\"\n                  imgClassName=\"h-full !w-auto\"\n                  source={icon.pcImage.url}\n                  alt={icon.pcImage.alt || ''}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "label", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "icon", "index", "c", "HeroBanner_default"]
 }

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

@@ -2,17 +2,12 @@ import type { ButtonProps } from '../../components/button.js';
 import type { Media, Theme } from '../../types/props.js';
 export interface HeroBannerProps {
     data: {
+        /** 标签 */
+        label?: string;
         /** 主标题 */
         title: string;
         /** 副标题/描述文本 */
         subtitle: string;
-        /** 结束时间（ISO 字符串） */
-        endDate?: string;
-        /** 结束时间时区（如: America/Los_Angeles） */
-        endDate_tz?: string;
-        dateFormat?: string;
-        /** 图标列表 */
-        iconArray?: Array<any>;
         pcImage: Media;
         padImage?: Media;
         mobileImage: Media;
@@ -44,6 +39,10 @@ export interface HeroBannerProps {
         caption?: Array<{
             title: string;
         }>;
+        /** 图标列表 */
+        iconArray?: Array<{
+            pcImage: Media;
+        }>;
     };
     /** 自定义类名 */
     className?: string;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    imagePosition,\n    layout,\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    poster,\n    padPoster,\n    mobPoster,\n    cols = 1,\n  } = data\n\n  // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n  const effectiveLayout = layout || imagePosition || 'left'\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (video?.url) {\n        setLoadedDesktopVideoSrc(video.url)\n      }\n    },\n  })\n\n  // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(tabletVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (padVideo?.url) {\n        setLoadedTabletVideoSrc(padVideo.url)\n      }\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobVideo?.url) {\n        setLoadedMobileVideoSrc(mobVideo.url)\n      }\n    },\n  })\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n  }\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n      const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n      const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n    const desktopPoster = poster?.url || image?.url\n    const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n    const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'image-with-text--dark text-white': theme === 'dark',\n          'image-with-text--light text-[#1f1f1f]': theme === 'light',\n          'aiui-dark': hasItems && theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n            />\n          </div>\n\n          <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n            <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (\n        <div\n          className={cn('image-with-text__content flex flex-col justify-center', {\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full items-start laptop:w-fit': hasItems,\n            // order\u63A7\u5236\n            'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n            'order-1':\n              (hasItems && effectiveLayout === 'right') ||\n              (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n            'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          })}\n        >\n          <Heading\n            as={'h2'}\n            size={4}\n            html={title}\n            className={cn('image-with-text__title', {\n              'w-full text-left': hasItems,\n            })}\n          />\n          {subtitle && (\n            <Text\n              as={'p'}\n              size={hasItems ? 4 : 3}\n              html={subtitle}\n              className={cn(\n                'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n                {\n                  'laptop:mt-[16px]': !hasItems,\n                  'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                }\n              )}\n            />\n          )}\n\n          {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n          {!hasItems && (desc || descIcon) && (\n            <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n              {descIcon && (\n                <img\n                  src={descIcon}\n                  alt=\"icon\"\n                  className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n                />\n              )}\n              {desc && (\n                <Heading\n                  as={'h4'}\n                  size={5}\n                  html={desc}\n                  className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n                />\n              )}\n            </div>\n          )}\n\n          {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && (\n            <div\n              className={cn('image-with-text__items w-full grid gap-6', {\n                'grid-cols-1': cols === 1,\n                'grid-cols-2': cols === 2,\n                'grid-cols-3': cols === 3,\n                'grid-cols-4': cols === 4,\n              })}\n            >\n              {items.map((item: ImageWithTextItem, index: number) => (\n                <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n                  <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n                    <Picture\n                      source={item.icon?.url}\n                      alt={item.icon?.alt}\n                      className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n                    />\n                    <Heading\n                      size={5}\n                      as=\"h6\"\n                      className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                    >\n                      {item.text}\n                    </Heading>\n                  </div>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    html={item.desc}\n                    className=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        className={cn('image-with-text__media-wrapper', {\n          // \u57FA\u7840\u6A21\u5F0F\n          'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n          'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n            })}\n          />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "cols", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    cols = Cols.One,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper mt-[24px] laptop:mt-[32px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n        })}\n      >\n        <Button\n          as=\"a\"\n          href={button.link}\n          variant={button.variant || 'secondary'}\n          size=\"base\"\n          className=\"image-with-text__button\"\n        >\n          {button.text}\n        </Button>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper overflow-hidden rounded-box\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper overflow-hidden rounded-box laptop:rounded-box\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div\n          className={cn(\n            'image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs relative inline-flex rounded-btn bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider absolute bottom-0 top-0 rounded-btn bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab relative z-10 cursor-pointer rounded-btn px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <Heading\n              as={'h2'}\n              size={4}\n              html={title}\n              className={cn('image-with-text__title', {\n                'w-full': hasItems,\n                'text-left': hasItems && textAlign === 'left',\n                'text-center': hasItems && textAlign === 'center',\n              })}\n            />\n            {subtitle && (\n              <Text\n                as={'p'}\n                size={hasItems ? 4 : 3}\n                html={subtitle}\n                className={cn(\n                  'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n                  {\n                    'laptop:mt-[16px]': !hasItems,\n                    'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  }\n                )}\n              />\n            )}\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items w-full grid gap-6 mt-[24px] laptop:mt-[32px] desktop:mt-[48px]', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  'grid-cols-1': cols === Cols.One,\n                  'grid-cols-2': cols === Cols.Two,\n                  'grid-cols-3': cols === Cols.Three,\n                  'grid-cols-4': cols === Cols.Four,\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-box laptop:rounded-box': !hasItems,\n            })}\n          />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "aA8LQ,cAAAA,EAkDI,QAAAC,MAlDJ,oBA7LR,OAAOC,IAAS,uBAAAC,GAAqB,UAAAC,EAAQ,YAAAC,EAAU,aAAAC,MAAiB,QACxE,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,OAAc,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,gCAAAC,OAAoC,yCAC7C,OAAS,UAAAC,EAAQ,mBAAAC,MAAuB,gBAExC,OAAS,QAAAC,MAAY,aAErB,MAAMC,GAAgB,QAChBC,GAAgB,kBAEhBC,GAAgBlB,GAAM,WAA+C,CAAC,CAAE,KAAAmB,GAAM,UAAAC,EAAU,EAAGC,KAAQ,CACvG,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,GAAQ,OACR,MAAAC,EAAQ,CAAC,EACT,OAAAC,GAAS,OACT,UAAAC,GAAY,QACZ,SAAAC,EAAW,CAAC,EACZ,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EAAOtB,EAAK,IACZ,OAAAuB,EACA,UAAAC,EAAY,MACd,EAAIpB,GAEEqB,EAAkBT,GAElBU,EAASvC,EAAuB,IAAI,EACpCwC,EAAkBxC,EAAuB,IAAI,EAC7CyC,EAAiBzC,EAAuB,IAAI,EAC5C0C,EAAiB1C,EAAuB,IAAI,EAC5C2C,EAAkB3C,EAAuB,IAAI,EAG7C,CAAC4C,EAAaC,EAAc,EAAI5C,EAAS,CAAC,EAC1C6C,EAAU9C,EAAqC,CAAC,CAAC,EACjD,CAAC+C,EAAaC,EAAc,EAAI/C,EAAS,CAAE,KAAM,EAAG,MAAO,CAAE,CAAC,EAG9D,CAACgD,EAAuBC,CAAwB,EAAIjD,EAAS,EAAE,EAC/D,CAACkD,EAAsBC,CAAuB,EAAInD,EAAS,EAAE,EAC7D,CAACoD,EAAsBC,CAAuB,EAAIrD,EAAS,EAAE,EAG7DsD,EAAYxB,EAAS,OAAS,EAG9ByB,EAAU1B,KAAc,QAE9BrB,GAAY8B,EAAQ,CAClB,cAAAzB,GACA,cAAAC,GACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDtB,GAAoBoB,GAAK,IAAMoB,EAAO,OAAyB,EAG/DrC,EAAU,IAAM,CACd,GAAI6B,EAAS,OAAS,EAAG,CACvB,MAAM0B,EAAUX,EAAQ,QAAQF,CAAW,EAC3C,GAAIa,EAAS,CACX,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAY,EAAIF,EACpCT,GAAe,CAAE,KAAMU,EAAY,MAAOC,CAAY,CAAC,CACzD,CACF,CACF,EAAG,CAACf,EAAab,EAAS,MAAM,CAAC,EAGjC,KAAM,CAAC6B,EAAkBC,EAAmB,EAAI5D,EAAS,EAAK,EAG9DS,GAA6BiC,EAAiB,CAC5C,KAAM,GACN,UAAW,IACX,SAAU,IAAM,CACdkB,GAAoB,EAAI,CAC1B,CACF,CAAC,EAGD3D,EAAU,IAAM,CACd,GAAI,CAAC0D,GAAoB,CAACJ,EAAS,OAGnC,IAAIM,EAAa,GACbC,EAAY,GACZC,EAAY,GAEhB,GAAIT,GAAaxB,EAASa,CAAW,EAAG,CACtC,MAAMqB,EAAYlC,EAASa,CAAW,EACtCkB,EAAaG,EAAU,OAAO,KAAO,GACrCF,EAAYE,EAAU,UAAU,KAAOH,EACvCE,EAAYC,EAAU,UAAU,KAAOH,CACzC,MACEA,EAAa9B,GAAO,KAAO,GAC3B+B,EAAY9B,GAAU,KAAO6B,EAC7BE,EAAY9B,GAAU,KAAO4B,EAI3BA,GAAYZ,EAAyBY,CAAU,EAC/CC,GAAWX,EAAwBW,CAAS,EAC5CC,GAAWV,EAAwBU,CAAS,EAGhD,WAAW,IAAM,CACA,CACbxB,EAAgB,SAAS,cAAc,OAAO,EAC9CC,EAAe,SAAS,cAAc,OAAO,EAC7CC,EAAe,SAAS,cAAc,OAAO,CAC/C,EAEO,QAAQwB,GAAgB,CACzBA,IACFA,EAAa,KAAK,EAClBA,EAAa,KAAK,EAAE,MAAM,IAAM,CAEhC,CAAC,EAEL,CAAC,CACH,EAAG,GAAG,CACR,EAAG,CAACN,EAAkBJ,EAASD,EAAWX,EAAab,EAAUC,GAAO,IAAKC,GAAU,IAAKC,GAAU,GAAG,CAAC,EAE1G,MAAMiC,GAAiB,CAACC,EAAeC,IAAwC,CAS7E,GARAxB,GAAeuB,CAAK,EAClBC,EAAE,OAAuB,eAAe,CACxC,SAAU,SACV,OAAQ,SACR,MAAO,SACT,CAAC,EAGGb,GAAWD,GAAaxB,EAASqC,CAAK,EAAG,CAC3C,MAAMH,EAAYlC,EAASqC,CAAK,EAG5BH,EAAU,OAAO,KACnBf,EAAyBe,EAAU,MAAM,GAAG,EAE1CA,EAAU,UAAU,KACtBb,EAAwBa,EAAU,SAAS,GAAG,EAE5CA,EAAU,UAAU,KACtBX,EAAwBW,EAAU,SAAS,GAAG,EAIhD,WAAW,IAAM,CACA,CACbzB,EAAgB,SAAS,cAAc,OAAO,EAC9CC,EAAe,SAAS,cAAc,OAAO,EAC7CC,EAAe,SAAS,cAAc,OAAO,CAC/C,EAEO,QAAQV,GAAS,CAClBA,IACFA,EAAM,KAAK,EACXA,EAAM,KAAK,EAAE,MAAM,IAAM,CAEzB,CAAC,EAEL,CAAC,CACH,EAAG,GAAG,CACR,CACF,EAGMsC,GAAe,IACf,CAACC,GAAa,CAACnC,GAAQ,KAAa,KAGtCxC,EAAC,OACC,UAAWW,EAAG,6DAA8D,CAC1E,sBAAuB8B,IAAc,SACrC,qBAAsBA,IAAc,MACtC,CAAC,EAED,SAAAzC,EAACU,GAAA,CACC,GAAG,IACH,KAAM8B,EAAO,KACb,QAASA,EAAO,SAAW,YAC3B,KAAK,OACL,UAAU,0BAET,SAAAA,EAAO,KACV,EACF,EAKEoC,EAAW5C,EAAM,OAAS,EAG1B2C,EAAY,EAAQnC,EAGpBqC,EAAiB,IAAM,CAC3B,GAAIlB,GAAaxB,EAASa,CAAW,EAAG,CACtC,MAAMqB,EAAYlC,EAASa,CAAW,EACtC,MAAO,GAAGqB,EAAU,OAAO,GAAG,KAAKA,EAAU,QAAQ,KAAOA,EAAU,OAAO,GAAG,UAAUA,EAAU,UAAU,KAAOA,EAAU,OAAO,GAAG,MAC3I,CACA,OAAIzC,EACK,GAAGA,GAAO,GAAG,IAAIC,GAAU,KAAOD,GAAO,GAAG,UAAUE,GAAa,KAAOF,GAAO,GAAG,OAEtF,EACT,EAGMkD,EAAc,IAAM,CACxB,GAAInB,EAAW,CACb,MAAMU,EAAYlC,EAASa,CAAW,EAEhC+B,EAAgBV,EAAU,OAAO,IACjCW,GAAeX,EAAU,QAAQ,KAAOU,EACxCE,GAAeZ,EAAU,UAAU,KAAOU,EAEhD,OACE/E,EAACgB,EAAA,CAAgB,KAAK,OACpB,SAAAhB,EAACe,EAAO,IAAP,CAEC,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,KAAM,CAAE,QAAS,CAAE,EACnB,WAAY,CAAE,SAAU,EAAI,EAC5B,UAAU,6DAEV,SAAAd,EAAC,OAAI,UAAU,6DAEb,UAAAD,EAAC,OAAI,IAAK4C,EAAiB,UAAU,2CACnC,SAAA5C,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQ+E,EACR,IAAK1B,EACL,KAAI,GACJ,UAAU,4GACX,EACH,EAEArD,EAAC,OAAI,IAAK6C,EAAgB,UAAU,0CAClC,SAAA7C,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQgF,GACR,IAAKzB,GAAwBF,EAC7B,KAAI,GACJ,UAAU,8FACX,EACH,EAEArD,EAAC,OAAI,IAAK8C,EAAgB,UAAU,0CAClC,SAAA9C,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQiF,GACR,IAAKxB,GAAwBJ,EAC7B,KAAI,GACJ,UAAU,4EACX,EACH,GACF,GA5CKgB,EAAU,OAAO,KAAOA,EAAU,OAAO,GA6ChD,EACF,CAEJ,CAGA,MAAMU,EAAgBnD,GAAO,IACvBoD,EAAenD,GAAU,KAAOkD,EAChCE,EAAenD,GAAa,KAAOiD,EAEzC,OACE9E,EAAC,OAAI,UAAU,gFAEb,UAAAD,EAAC,OAAI,IAAK4C,EAAiB,UAAU,2CACnC,SAAA5C,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQ+E,EACR,IAAK1B,EACL,KAAI,GACJ,UAAU,4GACX,EACH,EAEArD,EAAC,OAAI,IAAK6C,EAAgB,UAAU,0CAClC,SAAA7C,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQgF,EACR,IAAKzB,GAAwBF,EAC7B,KAAI,GACJ,UAAU,8FACX,EACH,EAEArD,EAAC,OAAI,IAAK8C,EAAgB,UAAU,0CAClC,SAAA9C,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQiF,EACR,IAAKxB,GAAwBJ,EAC7B,KAAI,GACJ,UAAU,4EACX,EACH,GACF,CAEJ,EAEA,OACEpD,EAAC,WACC,IAAK0C,EACL,uBAAqB,gBACrB,UAAWhC,EACT,oCACA,CAEE,0DAA2D,CAACgD,EAC5D,WAAY,CAACA,IAAcjB,IAAoB,OAASA,IAAoB,UAC5E,eAAgBA,IAAoB,QAAUA,IAAoB,QAClE,2BAA4B,CAACiB,IAAcjB,IAAoB,QAAUA,IAAoB,SAE7F,wEAAyEiB,EAEzE,YAAa5B,KAAU,MACzB,EACAT,EACF,EAGC,UAAAqC,GACC1D,EAAC,OACC,UAAWU,EACT,wGACA,CACE,YAAa8B,IAAc,OAC3B,cAAeA,IAAc,QAC/B,CACF,EAEA,UAAAxC,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMiB,EAAO,UAAU,yBAAyB,EAC5ExB,EAACS,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMiB,EACN,UAAU,qIACZ,GACF,EAEA1B,EAAC,OACC,UAAWW,EACT,qGACA,CACE,sBAAuB8B,IAAc,QACvC,CACF,EAEA,SAAAxC,EAAC,OAAI,UAAU,4FAEb,UAAAD,EAAC,OACC,UAAU,+GACV,MAAO,CACL,KAAMmD,EAAY,KAClB,MAAOA,EAAY,KACrB,EACF,EAGChB,EAAS,IAAI,CAAC+C,EAA4BV,IACzCxE,EAAC,OAEC,IAAKmF,GAAM,CACTjC,EAAQ,QAAQsB,CAAK,EAAIW,CAC3B,EACA,QAASV,GAAKF,GAAeC,EAAOC,CAAC,EACrC,UAAW9D,EACT,qNACAqC,IAAgBwB,EAAQ,0CAA4C,YACtE,EAEA,SAAAxE,EAACO,EAAA,CACC,GAAG,KACH,KAAM,EACN,KAAM2E,GAAM,MACZ,UAAU,mFACZ,GAfKV,CAgBP,CACD,GACH,EACF,GACF,EAID,CAACb,GACA1D,EAAC,OACC,UAAWU,EAAG,yCAA0C,CAEtD,iBAAkB,CAACgE,EACnB,kBAAmBA,EAEnB,sBAAuBC,EAEvB,cAAenC,IAAc,OAC7B,eAAgBA,IAAc,SAE9B,YAAaA,IAAc,OAC3B,cAAeA,IAAc,SAE7B,iBAAkBC,IAAoB,MACxC,CAAC,EAGD,UAAAzC,EAAC,OAAI,UAAWU,EAAG,gCAAiC,CAAE,gBAAiBgE,CAAU,CAAC,EAChF,UAAA3E,EAACO,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMiB,EACN,UAAWb,EAAG,yBAA0B,CACtC,SAAUiE,EACV,YAAaA,GAAYnC,IAAc,OACvC,cAAemC,GAAYnC,IAAc,QAC3C,CAAC,EACH,EACChB,GACCzB,EAACS,EAAA,CACC,GAAI,IACJ,KAAMmE,EAAW,EAAI,EACrB,KAAMnD,EACN,UAAWd,EACT,kIACA,CACE,mBAAoB,CAACiE,EACrB,6DAA8DA,EAC9D,YAAaA,GAAYnC,IAAc,OACvC,cAAemC,GAAYnC,IAAc,QAC3C,CACF,EACF,EAID,CAACmC,IAAalD,GAAQC,IACrB1B,EAAC,OAAI,UAAU,uDACZ,UAAA0B,GACC3B,EAAC,OACC,IAAK2B,EACL,IAAI,OACJ,UAAU,wFACZ,EAEDD,GACC1B,EAACO,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMmB,EACN,UAAU,8IACZ,GAEJ,EAIDkD,GACC5E,EAAC,OACC,UAAWW,EAAG,wFAAyF,CACrG,QAAS+B,IAAoB,OAASA,IAAoB,SAC1D,cAAeH,IAAStB,EAAK,IAC7B,cAAesB,IAAStB,EAAK,IAC7B,cAAesB,IAAStB,EAAK,MAC7B,cAAesB,IAAStB,EAAK,IAC/B,CAAC,EAEA,SAAAe,EAAM,IAAI,CAACkD,EAAyBV,IACnCvE,EAAC,OAEC,UAAWU,EAAG,wBAAyB,CACrC,cAAe8B,IAAc,QAC/B,CAAC,EAED,UAAAxC,EAAC,OACC,UAAWU,EAAG,oEAAqE,CACjF,iBAAkB8B,IAAc,SAChC,gBAAiBA,IAAc,MACjC,CAAC,EAED,UAAAzC,EAACQ,EAAA,CACC,OAAQ0E,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,UAAU,yLACV,aAAa,iBACf,EACAlF,EAACO,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,wGAET,SAAA2E,EAAK,KACR,GACF,EACAlF,EAACS,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMyE,EAAK,KACX,UAAU,oIACZ,IA9BKV,CA+BP,CACD,EACH,GAEJ,EAGCE,GAAa,GAChB,EAIF1E,EAAC,OACC,IAAK+C,EACL,UAAWpC,EAAG,iCAAkC,CAC9C,mBAAoB+B,IAAoB,QAAUA,IAAoB,QAEtE,wGACEkC,EACF,yCAA0CA,GAAYlC,IAAoB,OAE1E,6LACEiB,CACJ,CAAC,EAEA,SAAAA,EAECC,EACEkB,EAAY,EAEZ9E,EAACgB,EAAA,CAAgB,KAAK,OACpB,SAAAhB,EAACe,EAAO,IAAP,CAEC,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,KAAM,CAAE,QAAS,CAAE,EACnB,WAAY,CAAE,SAAU,EAAI,EAC5B,UAAU,6DAEV,SAAAf,EAACQ,EAAA,CACC,OAAQqE,EAAe,EACvB,IAAK1C,EAASa,CAAW,EAAE,OAAO,IAClC,UAAU,iLACZ,GAXKb,EAASa,CAAW,EAAE,OAAO,GAYpC,EACF,EAEAY,EAEFkB,EAAY,EAGZ9E,EAACQ,EAAA,CACC,OAAQqE,EAAe,EACvB,UAAWlE,EAAG,yBAA0B,CACtC,iCAAkC,CAACiE,CACrC,CAAC,EACH,EAEJ,GACF,CAEJ,CAAC,EAEDxD,GAAc,YAAc,gBAE5B,IAAOgE,GAAQxE,GAAWQ,EAAa",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "Button", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "Cols", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "cols", "button", "textAlign", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
 }

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

@@ -0,0 +1,6 @@
+import type { ImageWithTextProps } from './types.js';
+declare const exampleWithColsEnum: ImageWithTextProps;
+declare const singleColumnLayout: ImageWithTextProps;
+declare const threeColumnLayout: ImageWithTextProps;
+declare const fourColumnLayout: ImageWithTextProps;
+export { exampleWithColsEnum, singleColumnLayout, threeColumnLayout, fourColumnLayout };

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

@@ -1,2 +1,3 @@
 export { default } from './ImageWithText.js';
 export type { ImageWithTextProps } from './types.js';
+export { Cols } from './types.js';

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

@@ -1,2 +1,2 @@
-import{default as o}from"./ImageWithText.js";export{o as default};
+import{default as t}from"./ImageWithText.js";import{Cols as p}from"./types.js";export{p as Cols,t as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/index.ts"],
-  "sourcesContent": ["export { default } from './ImageWithText.js'\nexport type { ImageWithTextProps } from './types.js'\n"],
-  "mappings": "AAAA,OAAS,WAAAA,MAAe",
-  "names": ["default"]
+  "sourcesContent": ["export { default } from './ImageWithText.js'\nexport type { ImageWithTextProps } from './types.js'\nexport { Cols } from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,qBAExB,OAAS,QAAAC,MAAY",
+  "names": ["default", "Cols"]
 }

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

@@ -7,6 +7,15 @@ export interface ImageWithTextItem {
     /** 功能描述 */
     desc: string;
 }
+/** 按钮配置 */
+export interface ButtonConfig {
+    /** 按钮文字 */
+    text: string;
+    /** 跳转链接 */
+    link: string;
+    /** 按钮类型，默认 primary */
+    variant?: 'primary' | 'secondary';
+}
 export interface ImageWithTextTabItem {
     /**
      * 桌面端图片 URL
@@ -32,26 +41,19 @@ export interface ImageWithTextTabItem {
     padVideo?: Media;
     /** 移动端视频 URL（当mediaType为video时使用） */
     mobVideo?: Media;
-    /**
-     * @deprecated 推荐使用 image 字段作为视频封面
-     * 桌面端视频封面图（向后兼容）
-     */
-    poster?: Media;
-    /**
-     * @deprecated 推荐使用 imgPad 字段作为视频封面
-     * 平板端视频封面图（向后兼容）
-     */
-    padPoster?: Media;
-    /**
-     * @deprecated 推荐使用 imageMob 字段作为视频封面
-     * 移动端视频封面图（向后兼容）
-     */
-    mobPoster?: Media;
     /** Tab 标题 */
     title: string;
 }
 export type MediaType = 'image' | 'video';
 export type LayoutPosition = 'left' | 'right' | 'top' | 'bottom';
+export type TextAlign = 'left' | 'center';
+/** 列数枚举类型 */
+export declare enum Cols {
+    One = "1",
+    Two = "2",
+    Three = "3",
+    Four = "4"
+}
 export interface ImageWithTextProps {
     data: {
         /** 主标题 */
@@ -66,10 +68,10 @@ export interface ImageWithTextProps {
         theme?: Theme;
         /** 布局位置，默认 left。支持上下左右布局（left/right/top/bottom） */
         layout?: LayoutPosition;
-        /** @deprecated 使用 layout 代替。图片位置（向后兼容用） */
-        imagePosition?: 'left' | 'right';
         /** 媒体类型，默认 image。所有模式都支持 image 和 video */
         mediaType?: MediaType;
+        /** 文本区域对齐方式，默认 left。支持左对齐和居中对齐 */
+        textAlign?: TextAlign;
         /**
          * PC端图片 URL
          * 当 mediaType='image' 时作为展示图片
@@ -94,27 +96,14 @@ export interface ImageWithTextProps {
         mobileImage?: Media;
         /** 移动端视频 URL（当mediaType为video时使用） */
         mobVideo?: Media;
-        /**
-         * @deprecated 推荐使用 image 字段作为视频封面
-         * 桌面端视频封面图（当mediaType为video时使用，向后兼容）
-         */
-        poster?: Media;
-        /**
-         * @deprecated 推荐使用 padImage 字段作为视频封面
-         * 平板端视频封面图（当mediaType为video时使用，向后兼容）
-         */
-        padPoster?: Media;
-        /**
-         * @deprecated 推荐使用 mobileImage 字段作为视频封面
-         * 移动端视频封面图（当mediaType为video时使用，向后兼容）
-         */
-        mobPoster?: Media;
         /** 功能项列表（可选，用于展示功能特性列表） */
         items?: ImageWithTextItem[];
         /** Tab数据列表（TabWithImage模式，当存在时优先级最高） */
         datalist?: ImageWithTextTabItem[];
         /** 功能项列数，默认 1行1列 */
-        cols?: number;
+        cols?: Cols;
+        /** 按钮配置 */
+        button?: ButtonConfig;
     };
     /** 自定义类名 */
     className?: string;

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

@@ -1 +1,2 @@
+var t=(e=>(e.One="1",e.Two="2",e.Three="3",e.Four="4",e))(t||{});export{t as Cols};
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
+  "sources": ["../../../../src/biz-components/ImageWithText/types.ts"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextItem {\n  /** \u529F\u80FD\u56FE\u6807 */\n  icon: Media\n  /** \u529F\u80FD\u6807\u9898 */\n  text: string\n  /** \u529F\u80FD\u63CF\u8FF0 */\n  desc: string\n}\n\n/** \u6309\u94AE\u914D\u7F6E */\nexport interface ButtonConfig {\n  /** \u6309\u94AE\u6587\u5B57 */\n  text: string\n  /** \u8DF3\u8F6C\u94FE\u63A5 */\n  link: string\n  /** \u6309\u94AE\u7C7B\u578B\uFF0C\u9ED8\u8BA4 primary */\n  variant?: 'primary' | 'secondary'\n}\n\nexport interface ImageWithTextTabItem {\n  /**\n   * \u684C\u9762\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n   */\n  image: Media\n  /**\n   * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > imgPad > image\uFF09\n   */\n  imgPad?: Media\n  /**\n   * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n   * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n   * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > imageMob > image\uFF09\n   */\n  imageMob?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  video?: Media\n  /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  padVideo?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n  mobVideo?: Media\n  /** Tab \u6807\u9898 */\n  title: string\n}\n\nexport type MediaType = 'image' | 'video'\nexport type LayoutPosition = 'left' | 'right' | 'top' | 'bottom'\nexport type TextAlign = 'left' | 'center'\n\n/** \u5217\u6570\u679A\u4E3E\u7C7B\u578B */\nexport enum Cols {\n  One = '1',\n  Two = '2',\n  Three = '3',\n  Four = '4',\n}\n\nexport interface ImageWithTextProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF0C\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n    desc?: string\n    /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807\uFF08\u57FA\u7840\u6A21\u5F0F\u4F7F\u7528\uFF09 */\n    descIcon?: string\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n    theme?: Theme\n    /** \u5E03\u5C40\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\uFF08left/right/top/bottom\uFF09 */\n    layout?: LayoutPosition\n    /** \u5A92\u4F53\u7C7B\u578B\uFF0C\u9ED8\u8BA4 image\u3002\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301 image \u548C video */\n    mediaType?: MediaType\n    /** \u6587\u672C\u533A\u57DF\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u9ED8\u8BA4 left\u3002\u652F\u6301\u5DE6\u5BF9\u9F50\u548C\u5C45\u4E2D\u5BF9\u9F50 */\n    textAlign?: TextAlign\n    /**\n     * PC\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1Aposter > image\uFF09\n     */\n    image?: Media\n    /** \u684C\u9762\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    video?: Media\n    /**\n     * \u5E73\u677F\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1ApadPoster > padImage > image\uFF09\n     */\n    padImage?: Media\n    /** \u5E73\u677F\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    padVideo?: Media\n    /**\n     * \u79FB\u52A8\u7AEF\u56FE\u7247 URL\n     * \u5F53 mediaType='image' \u65F6\u4F5C\u4E3A\u5C55\u793A\u56FE\u7247\n     * \u5F53 mediaType='video' \u65F6\u4F5C\u4E3A\u89C6\u9891\u5C01\u9762\u56FE\uFF08\u4F18\u5148\u7EA7\uFF1AmobPoster > mobileImage > image\uFF09\n     */\n    mobileImage?: Media\n    /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL\uFF08\u5F53mediaType\u4E3Avideo\u65F6\u4F7F\u7528\uFF09 */\n    mobVideo?: Media\n    /** \u529F\u80FD\u9879\u5217\u8868\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u5C55\u793A\u529F\u80FD\u7279\u6027\u5217\u8868\uFF09 */\n    items?: ImageWithTextItem[]\n    /** Tab\u6570\u636E\u5217\u8868\uFF08TabWithImage\u6A21\u5F0F\uFF0C\u5F53\u5B58\u5728\u65F6\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09 */\n    datalist?: ImageWithTextTabItem[]\n    /** \u529F\u80FD\u9879\u5217\u6570\uFF0C\u9ED8\u8BA4 1\u884C1\u5217 */\n    cols?: Cols\n    /** \u6309\u94AE\u914D\u7F6E */\n    button?: ButtonConfig\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "mappings": "AAuDO,IAAKA,OACVA,EAAA,IAAM,IACNA,EAAA,IAAM,IACNA,EAAA,MAAQ,IACRA,EAAA,KAAO,IAJGA,OAAA",
+  "names": ["Cols"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Heading as n,Text as c}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";function v(l){const{title:s,subtitle:o,desc:a,poster:p,videoUrl:d,mobPoster:m,mobVideoUrl:r,theme:x="light"}=l?.data??{};return t("section",{className:i("inline-video-section flex flex-col items-center rounded-[16px]","text-info-primary",{"aiui-dark":x==="dark"},l.className),children:[t("div",{className:i("inline-video-content laptop:items-center flex w-full flex-col items-start"),children:[e(n,{as:"h2",size:4,html:s,className:"inline-video-title laptop:text-center shrink text-left"}),t("div",{className:"inline-video-text-wrapper",children:[o&&e(n,{size:3,as:"h5",html:o,className:i("inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left")}),e(c,{as:"p",size:4,html:a,className:"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]"})]})]}),t("div",{className:"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-[16px] xl:h-[360px]",children:[e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:d,loop:!0,className:"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]"}),e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:m,src:r,loop:!0,className:"inline-video-mobile tablet:hidden block w-full"})]})]})}export{v as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Heading as n,Text as c}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";function v(l){const{title:s,subtitle:o,desc:a,poster:p,videoUrl:d,mobPoster:m,mobVideoUrl:r,theme:x="light"}=l?.data??{};return t("section",{className:i("inline-video-section flex flex-col items-center rounded-box","text-info-primary",{"aiui-dark":x==="dark"},l.className),children:[t("div",{className:i("inline-video-content laptop:items-center flex w-full flex-col items-start"),children:[e(n,{as:"h2",size:4,html:s,className:"inline-video-title laptop:text-center shrink text-left"}),t("div",{className:"inline-video-text-wrapper",children:[o&&e(n,{size:3,as:"h5",html:o,className:i("inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left")}),e(c,{as:"p",size:4,html:a,className:"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]"})]})]}),t("div",{className:"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-box xl:h-[360px]",children:[e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:d,loop:!0,className:"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]"}),e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:m,src:r,loop:!0,className:"inline-video-mobile tablet:hidden block w-full"})]})]})}export{v as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/InlineVideo/index.tsx"],
-  "sourcesContent": ["import { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport type { Theme } from '../../types/props.js'\n\nexport interface InlineVideoData {\n  title: string\n  subtitle?: string\n  desc: string\n  poster?: string\n  videoUrl: string\n  mobPoster?: string\n  mobVideoUrl: string\n  theme?: Theme\n}\n\nexport interface InlineVideoProps {\n  data: InlineVideoData\n  className?: string\n}\n\nexport default function VideoWithTitle(props: InlineVideoProps) {\n  const { title, subtitle, desc, poster, videoUrl, mobPoster, mobVideoUrl, theme = 'light' } = props?.data ?? {}\n\n  return (\n    <section\n      className={cn(\n        'inline-video-section flex flex-col items-center rounded-[16px]',\n        'text-info-primary', // \u4F7F\u7528\u4E3B\u9898\u989C\u8272\u53D8\u91CF\n        {\n          'aiui-dark': theme === 'dark', // \u6DF1\u8272\u6A21\u5F0F\n        },\n        props.className\n      )}\n    >\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className={cn('inline-video-content laptop:items-center flex w-full flex-col items-start')}>\n        {/* \u6807\u9898 */}\n        <Heading\n          as={'h2'}\n          size={4}\n          html={title}\n          className=\"inline-video-title laptop:text-center shrink text-left\"\n        />\n\n        {/* \u526F\u6807\u9898\u548C\u63CF\u8FF0\u5BB9\u5668 */}\n        <div className=\"inline-video-text-wrapper\">\n          {/* \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n          {subtitle && (\n            <Heading\n              size={3}\n              as={'h5'}\n              html={subtitle}\n              className={cn('inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left')}\n            />\n          )}\n\n          {/* \u63CF\u8FF0\u6587\u672C */}\n          <Text\n            as={'p'}\n            size={4}\n            html={desc}\n            className=\"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n          />\n        </div>\n      </div>\n\n      {/* \u89C6\u9891\u5BB9\u5668 */}\n      <div className=\"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-[16px] xl:h-[360px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={poster}\n          src={videoUrl}\n          loop\n          className=\"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]\"\n        ></video>\n\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={mobPoster}\n          src={mobVideoUrl}\n          loop\n          className=\"inline-video-mobile tablet:hidden block w-full\"\n        ></video>\n      </div>\n    </section>\n  )\n}\n"],
-  "mappings": "AAqCQ,cAAAA,EAQA,QAAAC,MARA,oBArCR,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAmBJ,SAARC,EAAgCC,EAAyB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,OAAAC,EAAQ,SAAAC,EAAU,UAAAC,EAAW,YAAAC,EAAa,MAAAC,EAAQ,OAAQ,EAAIR,GAAO,MAAQ,CAAC,EAE7G,OACEL,EAAC,WACC,UAAWG,EACT,iEACA,oBACA,CACE,YAAaU,IAAU,MACzB,EACAR,EAAM,SACR,EAGA,UAAAL,EAAC,OAAI,UAAWG,EAAG,2EAA2E,EAE5F,UAAAJ,EAACE,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMK,EACN,UAAU,yDACZ,EAGAN,EAAC,OAAI,UAAU,4BAEZ,UAAAO,GACCR,EAACE,EAAA,CACC,KAAM,EACN,GAAI,KACJ,KAAMM,EACN,UAAWJ,EAAG,oFAAoF,EACpG,EAIFJ,EAACG,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMM,EACN,UAAU,0SACZ,GACF,GACF,EAGAR,EAAC,OAAI,UAAU,iIAEb,UAAAD,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQU,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,+EACX,EAGDX,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQY,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,iDACX,GACH,GACF,CAEJ",
+  "sourcesContent": ["import { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport type { Theme } from '../../types/props.js'\n\nexport interface InlineVideoData {\n  title: string\n  subtitle?: string\n  desc: string\n  poster?: string\n  videoUrl: string\n  mobPoster?: string\n  mobVideoUrl: string\n  theme?: Theme\n}\n\nexport interface InlineVideoProps {\n  data: InlineVideoData\n  className?: string\n}\n\nexport default function VideoWithTitle(props: InlineVideoProps) {\n  const { title, subtitle, desc, poster, videoUrl, mobPoster, mobVideoUrl, theme = 'light' } = props?.data ?? {}\n\n  return (\n    <section\n      className={cn(\n        'inline-video-section flex flex-col items-center rounded-box',\n        'text-info-primary', // \u4F7F\u7528\u4E3B\u9898\u989C\u8272\u53D8\u91CF\n        {\n          'aiui-dark': theme === 'dark', // \u6DF1\u8272\u6A21\u5F0F\n        },\n        props.className\n      )}\n    >\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className={cn('inline-video-content laptop:items-center flex w-full flex-col items-start')}>\n        {/* \u6807\u9898 */}\n        <Heading\n          as={'h2'}\n          size={4}\n          html={title}\n          className=\"inline-video-title laptop:text-center shrink text-left\"\n        />\n\n        {/* \u526F\u6807\u9898\u548C\u63CF\u8FF0\u5BB9\u5668 */}\n        <div className=\"inline-video-text-wrapper\">\n          {/* \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n          {subtitle && (\n            <Heading\n              size={3}\n              as={'h5'}\n              html={subtitle}\n              className={cn('inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left')}\n            />\n          )}\n\n          {/* \u63CF\u8FF0\u6587\u672C */}\n          <Text\n            as={'p'}\n            size={4}\n            html={desc}\n            className=\"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n          />\n        </div>\n      </div>\n\n      {/* \u89C6\u9891\u5BB9\u5668 */}\n      <div className=\"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-box xl:h-[360px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={poster}\n          src={videoUrl}\n          loop\n          className=\"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]\"\n        ></video>\n\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={mobPoster}\n          src={mobVideoUrl}\n          loop\n          className=\"inline-video-mobile tablet:hidden block w-full\"\n        ></video>\n      </div>\n    </section>\n  )\n}\n"],
+  "mappings": "AAqCQ,cAAAA,EAQA,QAAAC,MARA,oBArCR,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAmBJ,SAARC,EAAgCC,EAAyB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,OAAAC,EAAQ,SAAAC,EAAU,UAAAC,EAAW,YAAAC,EAAa,MAAAC,EAAQ,OAAQ,EAAIR,GAAO,MAAQ,CAAC,EAE7G,OACEL,EAAC,WACC,UAAWG,EACT,8DACA,oBACA,CACE,YAAaU,IAAU,MACzB,EACAR,EAAM,SACR,EAGA,UAAAL,EAAC,OAAI,UAAWG,EAAG,2EAA2E,EAE5F,UAAAJ,EAACE,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMK,EACN,UAAU,yDACZ,EAGAN,EAAC,OAAI,UAAU,4BAEZ,UAAAO,GACCR,EAACE,EAAA,CACC,KAAM,EACN,GAAI,KACJ,KAAMM,EACN,UAAWJ,EAAG,oFAAoF,EACpG,EAIFJ,EAACG,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMM,EACN,UAAU,0SACZ,GACF,GACF,EAGAR,EAAC,OAAI,UAAU,8HAEb,UAAAD,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQU,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,+EACX,EAGDX,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQY,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,iDACX,GACH,GACF,CAEJ",
   "names": ["jsx", "jsxs", "Heading", "Text", "cn", "VideoWithTitle", "props", "title", "subtitle", "desc", "poster", "videoUrl", "mobPoster", "mobVideoUrl", "theme"]
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Media } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 /**
  * KSP 卡片项数据结构
  */
@@ -25,6 +25,8 @@ export interface KspData {
     title?: string;
     /** KSP 卡片列表（需要 7 个项） */
     items: KspCardItem[];
+    /** 主题，默认 light */
+    theme?: Theme;
 }
 /**
  * Ksp 组件 Props