npm - @anker-in/headless-ui - Versions diffs - 1.1.74 → 1.1.76 - Mend

@anker-in/headless-ui 1.1.74 → 1.1.76

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

Files changed (216) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div>\n                  <div\n                    ref={titleFadeInRef}\n                    className=\"media-player-base-title lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                </div>\n              )}\n              {btnText && (\n                <div className=\"flex items-center justify-center\">\n                  <Button\n                    variant=\"link\"\n                    className={cn(\n                      'media-player-base-button member-equity-button-secondary text-btn-primary-foreground z-20 translate-y-10'\n                    )}\n                    onClick={() => {\n                      setVisible(true)\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                  </Button>\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,jsxs as h}from"react/jsx-runtime";import*as g from"react";import{cn as p}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as M}from"../../shared/Styles.js";const P=o=>{if(!o)return;const{mobile:e,tablet:u,laptop:d,desktop:f,lgDesktop:c}=o,t=[],s=b=>b?.url,i=s(c),n=s(f),r=s(d),l=s(u),m=s(e);return i?t.push(i):n?t.push(n):r?t.push(r):l?t.push(l):m&&t.push(m),n&&i&&t.push(`${n} 1920`),r&&(n||i)&&t.push(`${r} 1440`),l&&(r||n||i)&&t.push(`${l} 1024`),m&&(l||r||n||i)&&t.push(`${m} 768`),t.length>0?t.join(", "):void 0},x=g.forwardRef(({classNames:o,data:e,className:u,...d},f)=>{const{backgroundImage:c}=e,t=g.useMemo(()=>P(c),[c]);return a("div",{ref:f,...d,className:p("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root,u),children:h("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[h("div",{className:p("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&a(v,{className:p("line-clamp-2 text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&a("p",{className:p("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),a("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&a(k,{as:"a",variant:"link",className:p("!p-0 text-[#F5F6F7]",o?.button),href:e.buttonLink,iconClassName:"size-4",children:e.buttonText})})]}),a(B,{source:t,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});x.displayName="PromotionalBar";var F=M(x);export{F as default};
+"use client";import{jsx as s,jsxs as h}from"react/jsx-runtime";import*as g from"react";import{cn as p}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as P}from"../../shared/Styles.js";import{getLocalizedPath as M}from"../../helpers/index.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";const D=o=>{if(!o)return;const{mobile:e,tablet:m,laptop:u,desktop:d,lgDesktop:f}=o,t=[],n=b=>b?.url,r=n(f),i=n(d),a=n(u),l=n(m),c=n(e);return r?t.push(r):i?t.push(i):a?t.push(a):l?t.push(l):c&&t.push(c),i&&r&&t.push(`${i} 1920`),a&&(i||r)&&t.push(`${a} 1440`),l&&(a||i||r)&&t.push(`${l} 1024`),c&&(l||a||i||r)&&t.push(`${c} 768`),t.length>0?t.join(", "):void 0},x=g.forwardRef(({classNames:o,data:e,className:m,...u},d)=>{const{locale:f="us"}=T(),{backgroundImage:t}=e,n=g.useMemo(()=>D(t),[t]);return s("div",{ref:d,...u,className:p("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root,m),children:h("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[h("div",{className:p("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&s(v,{className:p("line-clamp-2 text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&s("p",{className:p("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),s("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&s(k,{as:"a",variant:"link",className:p("!p-0 text-[#F5F6F7]",o?.button),href:M(e.buttonLink||"",f),iconClassName:"size-4",children:e.buttonText})})]}),s(B,{source:n,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});x.displayName="PromotionalBar";var w=P(x);export{w as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { backgroundImage } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root, className)}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading\n                className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n                html={data.contentTitle}\n                size={3}\n              />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n                  href={data.buttonLink}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
-  "mappings": "aA6GU,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBA3GV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAoD3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBrB,EAAM,WAC3B,CAAC,CAAE,WAAAsB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,gBAAAnB,CAAgB,EAAIgB,EACtBI,EAAgB3B,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OACC,IAAK4B,EACJ,GAAGD,EACJ,UAAWxB,EAAG,kDAAmDqB,GAAY,KAAME,CAAS,EAG5F,SAAAzB,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAqB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJzB,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BqB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJzB,EAAC,KACC,UAAWG,EACT,6HACAqB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEFzB,EAAC,OAAI,UAAU,mBACZ,SAAAyB,EAAK,YACJzB,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBqB,GAAY,MAAM,EACvD,KAAMC,EAAK,WACX,cAAc,SAEb,SAAAA,EAAK,WACR,EAEJ,GACF,EACAzB,EAACM,EAAA,CACC,OAAQuB,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAN,EAAe,YAAc,iBAC7B,IAAOO,EAAQvB,EAAWgB,CAAc",
-  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "pictureSource", "PromotionalBar_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { locale = 'us' } = useAiuiContext()\n    const { backgroundImage } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root, className)}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading\n                className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n                html={data.contentTitle}\n                size={3}\n              />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n                  href={getLocalizedPath(data.buttonLink || '', locale)}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
+  "mappings": "aAgHU,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBA9GV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,oBAAAC,MAAwB,yBACjC,OAAS,kBAAAC,MAAsB,2BAmD/B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBvB,EAAM,WAC3B,CAAC,CAAE,WAAAwB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAItB,EAAe,EACnC,CAAE,gBAAAE,CAAgB,EAAIgB,EACtBK,EAAgB9B,EAAM,QAAQ,IAC3BQ,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACEX,EAAC,OACC,IAAK8B,EACJ,GAAGD,EACJ,UAAW1B,EAAG,kDAAmDuB,GAAY,KAAME,CAAS,EAG5F,SAAA3B,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAuB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJ3B,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BuB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJ3B,EAAC,KACC,UAAWG,EACT,6HACAuB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEF3B,EAAC,OAAI,UAAU,mBACZ,SAAA2B,EAAK,YACJ3B,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBuB,GAAY,MAAM,EACvD,KAAMlB,EAAiBmB,EAAK,YAAc,GAAII,CAAM,EACpD,cAAc,SAEb,SAAAJ,EAAK,WACR,EAEJ,GACF,EACA3B,EAACM,EAAA,CACC,OAAQ0B,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAP,EAAe,YAAc,iBAC7B,IAAOQ,EAAQ1B,EAAWkB,CAAc",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "getLocalizedPath", "useAiuiContext", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "locale", "pictureSource", "PromotionalBar_default"]
 }

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as v}from"react/jsx-runtime";import W,{useEffect as X,useRef as m,useImperativeHandle as Y,useState as tt}from"react";import{gsap as w}from"gsap";import{SplitText as H}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{cva as E}from"class-variance-authority";import{Heading as et,Text as nt}from"../../components/index.js";import{withLayout as rt}from"../../shared/Styles.js";import{trackUrlRef as it}from"../../shared/trackUrlRef.js";import{useInView as st}from"react-intersection-observer";import ot from"./Countdown.js";const M="link",V="title",at=E("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),lt=E("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),P=({data:r,className:p})=>{const{theme:e="light",extensions:i,title:u,caption:f,align:s}=r;return i?.textLink?v("a",{className:c({"aiui-dark":e==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":e==="light"},{"text-[#F5F6F7]":e==="dark"},{"justify-center mt-4":s==="center"},{"mt-1 laptop:mt-0":s==="left"},p),href:it(i?.link,`${M}_${V}`),"data-headless-type-name":`${M}#${V}`,"data-headless-title-desc-button":`${u}#${f}`,children:[t("div",{className:"truncate whitespace-nowrap",children:i?.textLink}),t("div",{className:"lg-desktop:size-5 size-4",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 20 20",fill:"none",children:t("path",{d:"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z",fill:e==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]}):null},$=W.forwardRef(({data:r,className:p,as:e="h2",weight:i="bold",...u},f)=>{const{title:s,caption:T,subtitle:b,countdown:k,showCountdown:z=!1,theme:d="light",extensions:A,align:o="left"}=r,F=m(null),a=m(null),n=m(null),l=m(null),[B,S]=tt(!0),{ref:j,inView:y}=st();Y(f,()=>F.current);const D=()=>{S(!1)};return X(()=>{w.registerPlugin(H,R);function I(){if(!a.current)return;const _=a.current?.clientHeight||80;n.current&&n.current.revert(),l.current&&l.current.kill(),n.current=new H(a.current,{type:"words",wordsClass:"word"});const g=n.current.words;w.set(g,{opacity:0}),l.current=R.create({trigger:a.current,start:"bottom bottom-=4%",end:`bottom+=${_*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:O=>{const U=O.progress,N=g.length||1,Z=.5,h=1/N,L=h*(1-Z),C=(N-1)*L+h,q=Math.min(1,C>0?U/C:0);g.forEach((G,J)=>{const K=J*L,Q=h;let x=(q-K)/Q;x=Math.max(0,Math.min(1,x)),w.set(G,{opacity:x})})}})}return y&&I(),()=>{n.current&&n.current.revert(),l.current&&l.current.kill()}},[y]),v("div",{...u,id:A?.id,className:"titleBottom title-box flex items-end justify-between gap-2 pb-6",ref:F,children:[v("div",{ref:j,className:c("flex-1",p,{"aiui-dark":d==="dark","text-center":o==="center","text-left":o==="left"}),children:[(T||s)&&t(et,{ref:a,as:e,size:4,html:T||s,weight:i,className:at({theme:d})}),b&&t(nt,{html:b,as:"p",className:lt({theme:d})}),t(P,{data:r,className:c({"laptop:hidden":o==="left"})}),z&&k&&B&&t(ot,{className:c("mt-4 justify-start",{"justify-center":o==="center"}),config:k,onCountdownEnd:D,theme:d})]}),t(P,{data:r,className:c("hidden",{"laptop:flex":o==="left"})})]})});$.displayName="Title";var Tt=rt($);export{Tt as default};
+"use client";import{jsx as e,jsxs as b}from"react/jsx-runtime";import tt,{useEffect as et,useRef as u,useImperativeHandle as nt,useState as st}from"react";import{gsap as v}from"gsap";import{SplitText as D}from"gsap/dist/SplitText";import{ScrollTrigger as M}from"gsap/dist/ScrollTrigger";import{cn as d}from"../../helpers/utils.js";import{cva as E}from"class-variance-authority";import{Heading as rt,Text as it,Countdown as ot}from"../../components/index.js";import{withLayout as at}from"../../shared/Styles.js";import{trackUrlRef as lt}from"../../shared/trackUrlRef.js";import{useInView as ct}from"react-intersection-observer";const C="link",R="title",dt=E("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),mt=E("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),V=({data:r,className:p})=>{const{theme:n="light",extensions:i,title:f,caption:h,align:o}=r;return i?.textLink?b("a",{className:d({"aiui-dark":n==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":n==="light"},{"text-[#F5F6F7]":n==="dark"},{"justify-center mt-4":o==="center"},{"mt-1 laptop:mt-0":o==="left"},p),href:lt(i?.link,`${C}_${R}`),"data-headless-type-name":`${C}#${R}`,"data-headless-title-desc-button":`${f}#${h}`,children:[e("div",{className:"truncate whitespace-nowrap",children:i?.textLink}),e("div",{className:"lg-desktop:size-5 size-4",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z",fill:n==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]}):null},z=tt.forwardRef(({data:r,className:p,as:n="h2",weight:i="bold",...f},h)=>{const{title:o,caption:T,subtitle:k,countdown:t,showCountdown:S=!1,theme:m="light",extensions:P,align:a="left"}=r,y=u(null),l=u(null),s=u(null),c=u(null),[$,A]=st(!0),{ref:B,inView:F}=ct();nt(h,()=>y.current);const _=()=>{A(!1)},I=t?.targetDateTime||t?.targetDate||"",j=t?.targetDateTime_tz,O=t?.labels?{day:t.labels.days||"Day",hour:t.labels.hours||"Hours",minute:t.labels.minutes||"Mins",second:t.labels.seconds||"Secs"}:void 0;return et(()=>{v.registerPlugin(D,M);function U(){if(!l.current)return;const W=l.current?.clientHeight||80;s.current&&s.current.revert(),c.current&&c.current.kill(),s.current=new D(l.current,{type:"words",wordsClass:"word"});const g=s.current.words;v.set(g,{opacity:0}),c.current=M.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${W*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:Z=>{const q=Z.progress,L=g.length||1,G=.5,w=1/L,N=w*(1-G),H=(L-1)*N+w,J=Math.min(1,H>0?q/H:0);g.forEach((K,Q)=>{const X=Q*N,Y=w;let x=(J-X)/Y;x=Math.max(0,Math.min(1,x)),v.set(K,{opacity:x})})}})}return F&&U(),()=>{s.current&&s.current.revert(),c.current&&c.current.kill()}},[F]),b("div",{...f,id:P?.id,className:"titleBottom title-box flex items-end justify-between gap-2 pb-6",ref:y,children:[b("div",{ref:B,className:d("flex-1",p,{"aiui-dark":m==="dark","text-center":a==="center","text-left":a==="left"}),children:[(T||o)&&e(rt,{ref:l,as:n,size:4,html:T||o,weight:i,className:dt({theme:m})}),k&&e(it,{html:k,as:"p",className:mt({theme:m})}),e(V,{data:r,className:d({"laptop:hidden":a==="left"})}),S&&t&&$&&e(ot,{endDate:I,endDate_tz:j,timeLabels:O,showDays:t?.showDays,showHours:t?.showHours,showMinutes:t?.showMinutes,showSeconds:t?.showSeconds,theme:m,onExpire:_,hideWhenExpired:!0,align:a==="center"?"center":"left",className:d("mt-4")})]}),e(V,{data:r,className:d("hidden",{"laptop:flex":a==="left"})})]})});z.displayName="Title";var kt=at(z);export{kt as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-[#F5F6F7]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n  'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-[#F5F6F7]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n  const { theme = 'light', extensions, title, caption, align } = data\n  if (!extensions?.textLink) return null\n  return (\n    <a\n      className={cn(\n        { 'aiui-dark': theme === 'dark' },\n        'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n        { 'text-[#080A0F]': theme === 'light' },\n        { 'text-[#F5F6F7]': theme === 'dark' },\n        { 'justify-center mt-4': align === 'center' },\n        { 'mt-1 laptop:mt-0': align === 'left' },\n        className\n      )}\n      href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${title}#${caption}`}\n    >\n      <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n      <div className=\"lg-desktop:size-5 size-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path\n            d=\"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z\"\n            fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n            className=\"transition-all duration-[0.4s]\"\n          />\n        </svg>\n      </div>\n    </a>\n  )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n  ({ data, className, as = 'h2', weight = 'bold', ...rest }, ref) => {\n    const {\n      title,\n      caption,\n      subtitle,\n      countdown,\n      showCountdown = false,\n      theme = 'light',\n      extensions,\n      align = 'left',\n    } = data\n    const innerRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLHeadingElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n    const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n    const handleCountdownEnd = () => {\n      setIsCountdownVisible(false)\n    }\n\n    useEffect(() => {\n      gsap.registerPlugin(SplitText, ScrollTrigger)\n      function gsapResize() {\n        if (!titleRef.current) return\n        const height = titleRef.current?.clientHeight || 80\n        if (splitTextInstance.current) {\n          splitTextInstance.current.revert()\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n        }\n        splitTextInstance.current = new SplitText(titleRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom-=4%',\n          end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n          scrub: true,\n          invalidateOnRefresh: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length || 1\n            const overlap = 0.5\n            const interval = 1 / total\n            const step = interval * (1 - overlap)\n            const lastEnd = (total - 1) * step + interval\n            const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n            words.forEach((word: any, i: number) => {\n              const start = i * step\n              const width = interval\n              let opacity = (normalizedProgress - start) / width\n              opacity = Math.max(0, Math.min(1, opacity))\n              gsap.set(word, { opacity })\n            })\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div\n        {...rest}\n        id={extensions?.id}\n        className=\"titleBottom title-box flex items-end justify-between gap-2 pb-6\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-left': align === 'left',\n          })}\n        >\n          {(caption || title) && (\n            <Heading\n              ref={titleRef}\n              as={as}\n              size={4}\n              html={caption || title}\n              weight={weight}\n              className={titleHeadingVariants({ theme })}\n            />\n          )}\n          {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n          <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n          {showCountdown && countdown && isCountdownVisible && (\n            <Countdown\n              className={cn('mt-4 justify-start', {\n                'justify-center': align === 'center',\n              })}\n              config={countdown}\n              onCountdownEnd={handleCountdownEnd}\n              theme={theme}\n            />\n          )}\n        </div>\n        <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n      </div>\n    )\n  }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "withLayout", "trackUrlRef", "useInView", "Countdown", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "as", "weight", "rest", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text, Countdown } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-[#F5F6F7]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n  'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-[#F5F6F7]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n  const { theme = 'light', extensions, title, caption, align } = data\n  if (!extensions?.textLink) return null\n  return (\n    <a\n      className={cn(\n        { 'aiui-dark': theme === 'dark' },\n        'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n        { 'text-[#080A0F]': theme === 'light' },\n        { 'text-[#F5F6F7]': theme === 'dark' },\n        { 'justify-center mt-4': align === 'center' },\n        { 'mt-1 laptop:mt-0': align === 'left' },\n        className\n      )}\n      href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${title}#${caption}`}\n    >\n      <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n      <div className=\"lg-desktop:size-5 size-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path\n            d=\"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z\"\n            fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n            className=\"transition-all duration-[0.4s]\"\n          />\n        </svg>\n      </div>\n    </a>\n  )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n  ({ data, className, as = 'h2', weight = 'bold', ...rest }, ref) => {\n    const {\n      title,\n      caption,\n      subtitle,\n      countdown,\n      showCountdown = false,\n      theme = 'light',\n      extensions,\n      align = 'left',\n    } = data\n    const innerRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLHeadingElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n    const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n    const handleCountdownEnd = () => {\n      setIsCountdownVisible(false)\n    }\n\n    // CMS field mapping: new targetDateTime > legacy targetDate\n    const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n    const countdownTz = countdown?.targetDateTime_tz\n    // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n    const countdownLabels = countdown?.labels\n      ? {\n          day: countdown.labels.days || 'Day',\n          hour: countdown.labels.hours || 'Hours',\n          minute: countdown.labels.minutes || 'Mins',\n          second: countdown.labels.seconds || 'Secs',\n        }\n      : undefined\n\n    useEffect(() => {\n      gsap.registerPlugin(SplitText, ScrollTrigger)\n      function gsapResize() {\n        if (!titleRef.current) return\n        const height = titleRef.current?.clientHeight || 80\n        if (splitTextInstance.current) {\n          splitTextInstance.current.revert()\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n        }\n        splitTextInstance.current = new SplitText(titleRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom-=4%',\n          end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n          scrub: true,\n          invalidateOnRefresh: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length || 1\n            const overlap = 0.5\n            const interval = 1 / total\n            const step = interval * (1 - overlap)\n            const lastEnd = (total - 1) * step + interval\n            const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n            words.forEach((word: any, i: number) => {\n              const start = i * step\n              const width = interval\n              let opacity = (normalizedProgress - start) / width\n              opacity = Math.max(0, Math.min(1, opacity))\n              gsap.set(word, { opacity })\n            })\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div\n        {...rest}\n        id={extensions?.id}\n        className=\"titleBottom title-box flex items-end justify-between gap-2 pb-6\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-left': align === 'left',\n          })}\n        >\n          {(caption || title) && (\n            <Heading\n              ref={titleRef}\n              as={as}\n              size={4}\n              html={caption || title}\n              weight={weight}\n              className={titleHeadingVariants({ theme })}\n            />\n          )}\n          {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n          <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n          {showCountdown && countdown && isCountdownVisible && (\n            <Countdown\n              endDate={countdownEndDate}\n              endDate_tz={countdownTz}\n              timeLabels={countdownLabels}\n              showDays={countdown?.showDays}\n              showHours={countdown?.showHours}\n              showMinutes={countdown?.showMinutes}\n              showSeconds={countdown?.showSeconds}\n              theme={theme}\n              onExpire={handleCountdownEnd}\n              hideWhenExpired={true}\n              align={align === 'center' ? 'center' : 'left'}\n              className={cn('mt-4')}\n            />\n          )}\n        </div>\n        <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n      </div>\n    )\n  }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "as", "weight", "rest", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
 }

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

@@ -9,10 +9,19 @@ export interface Feature {
  * 倒计时配置
  */
 export interface CountdownConfig {
+    /**
+     * 新 CMS 字段，ISO 8601 带时区（如 '2026-03-28T16:00:00.000Z'）。优先于 targetDate 使用。
+     */
+    targetDateTime?: string;
+    /**
+     * 时区标识符（如 'Asia/Shanghai'），与 targetDateTime 配合使用
+     */
+    targetDateTime_tz?: string;
     /**
      * 倒计时目标时间（ISO 8601 格式或任何 dayjs 支持的格式）
+     * @deprecated 请使用 targetDateTime 替代。仅用于兼容旧 CMS 数据。
      */
-    targetDate: string;
+    targetDate?: string;
     /**
      * 是否显示天数
      * @default true

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

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

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

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

package/dist/esm/biz-components/WheelLottery/BaseModal.d.ts ADDED Viewed

@@ -0,0 +1,61 @@
+/**
+ * BaseModal - 通用弹窗基础组件
+ *
+ * 基于 Radix UI Dialog 实现的统一弹窗组件，提供遮罩层、关闭按钮等功能
+ *
+ * @module BaseModal
+ * @date 2026-01-29
+ */
+import React from 'react';
+export interface BaseModalProps {
+    /**
+     * 是否显示弹窗
+     */
+    isOpen: boolean;
+    /**
+     * 关闭弹窗回调
+     */
+    onClose: () => void;
+    /**
+     * 弹窗内容
+     */
+    children: React.ReactNode;
+    /**
+     * 弹窗最大宽度类名
+     * @default 'max-w-[358px] laptop:max-w-[480px]'
+     */
+    maxWidth?: string;
+    /**
+     * 弹窗背景渐变
+     * @default 'bg-white'
+     */
+    background?: string;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * title 弹窗标题
+     */
+    title?: string;
+    description?: string;
+    /**
+     * ARIA 标签
+     */
+    ariaLabelledBy?: string;
+    /**
+     * 主题模式
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+}
+/**
+ * BaseModal 通用弹窗组件（基于 Radix UI Dialog）
+ */
+export declare const BaseModal: React.FC<BaseModalProps>;
+export default BaseModal;

package/dist/esm/biz-components/WheelLottery/BaseModal.js ADDED Viewed

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

package/dist/esm/biz-components/WheelLottery/BaseModal.js.map ADDED Viewed

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