@anker-in/headless-ui 1.1.78 → 1.1.79
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.
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/helpers/utils.js +1 -1
- package/dist/cjs/helpers/utils.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +3 -3
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/helpers/utils.js +1 -1
- package/dist/esm/helpers/utils.js.map +2 -2
- package/package.json +1 -1
- package/style.css +3 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"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 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 !h-auto\"\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 min-h-screen w-full\"\n videoClassName=\"object-cover w-full h-auto\"\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"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"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{clsx as
|
|
1
|
+
import{clsx as s}from"clsx";import{extendTailwindMerge as o}from"tailwind-merge";const a=o({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function l(...t){return a(s(t))}function p(){}function f(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const u=t=>t?.replace(/\s+/g,"-"),g=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),h=(t,e)=>{try{if(!t||!e)return t;const r=g(e),n=new RegExp(r,"gi");return t.replace(n,i=>`<span class='text-brand-0 font-bold'>${i}</span>`)}catch(r){return console.error("highlightSearchWord error:",r),t}},d=(t,e)=>{if(!t||t.startsWith("http://")||t.startsWith("https://")||t.startsWith("#"))return t;const r=t.split("/").filter(Boolean);return r.length===0?e==="us"?"/":`/${e}`:r[0]===e?`/${r.join("/")}`:`${e==="us"?"":`/${e}`}/${r.join("/")}`};export{f as atobID,l as cn,d as getLocalizedPath,h as highlightSearchWord,p as noop,u as spaceToHyphen};
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/utils.ts"],
|
|
4
|
-
"sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n borderRadius: ['btn'],\n },\n classGroups: {\n 'font-size': [\n 'text-heading-1',\n 'text-heading-2',\n 'text-heading-3',\n 'text-heading-4',\n 'text-heading-5',\n 'text-text-3',\n 'text-text-2',\n 'text-text-1',\n ],\n 'text-color': [\n 'text-info-primary',\n 'text-info-secondary',\n 'text-info-tertiary',\n 'text-info-quaternary',\n 'text-info-white',\n ],\n leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n },\n },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n if (id && typeof id === 'string' && id.includes('/')) {\n return id.split('/').pop()?.split('?')?.shift()\n } else {\n return id\n }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\n/**\n * \u8F6C\u4E49\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n * @param str \u9700\u8981\u8F6C\u4E49\u7684\u5B57\u7B26\u4E32\n * @returns \u8F6C\u4E49\u540E\u7684\u5B57\u7B26\u4E32\n */\nconst escapeRegExp = (str: string): string => {\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u9AD8\u4EAE\u641C\u7D22\u5173\u952E\u8BCD\n * @param text \u539F\u59CB\u6587\u672C\n * @param searchText \u641C\u7D22\u5173\u952E\u8BCD\n * @returns \u9AD8\u4EAE\u540E\u7684 HTML \u5B57\u7B26\u4E32\n */\nexport const highlightSearchWord = (text: string, searchText: string) => {\n try {\n if (!text || !searchText) {\n return text\n }\n\n // \u8F6C\u4E49\u641C\u7D22\u6587\u672C\u4E2D\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n const escapedSearchText = escapeRegExp(searchText)\n const regex = new RegExp(escapedSearchText, 'gi')\n\n // \u4F7F\u7528\u6B63\u5219\u8868\u8FBE\u5F0F\u7684\u5339\u914D\u7ED3\u679C\u6765\u4FDD\u6301\u539F\u59CB\u5927\u5C0F\u5199\n return text.replace(regex, match => `<span class='text-brand-0 font-bold'>${match}</span>`)\n } catch (e) {\n console.error('highlightSearchWord error:', e)\n return text\n }\n}\n\n/**\n * \u83B7\u53D6\u672C\u5730\u5316\u8DEF\u5F84\n *\n * \u6839\u636E\u8BED\u8A00\u6807\u8BC6\u4E3A\u8DEF\u5F84\u6DFB\u52A0\u5BF9\u5E94\u7684 locale \u524D\u7F00\u3002\n * - 'us' \u4E3A\u9ED8\u8BA4\u8BED\u8A00\uFF0C\u4E0D\u6DFB\u52A0\u524D\u7F00\n * - \u5176\u4ED6\u8BED\u8A00\u4F1A\u6DFB\u52A0 `/{locale}` \u524D\u7F00\n * - \u5B8C\u6574 URL\uFF08http/https\uFF09\u4E0D\u505A\u5904\u7406\n * - \u81EA\u52A8\u5904\u7406\u8DEF\u5F84\u683C\u5F0F\uFF08\u8865\u5145\u524D\u5BFC\u659C\u6760\u3001\u79FB\u9664\u5C3E\u90E8\u659C\u6760\uFF09\n *\n * @param path - \u539F\u59CB\u8DEF\u5F84\n * @param locale - \u8BED\u8A00\u6807\u8BC6\uFF08\u5982 'us', 'uk', 'de', 'jp' \u7B49\uFF09\n * @returns \u672C\u5730\u5316\u540E\u7684\u8DEF\u5F84\n *\n * @example\n * // \u57FA\u672C\u7528\u6CD5 - \u9ED8\u8BA4\u8BED\u8A00 'us' \u4E0D\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'us') // => '/products'\n * getLocalizedPath('/about', 'us') // => '/about'\n *\n * @example\n * // \u5176\u4ED6\u8BED\u8A00\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'uk') // => '/uk/products'\n * getLocalizedPath('/about/team', 'de') // => '/de/about/team'\n * getLocalizedPath('/contact', 'jp') // => '/jp/contact'\n *\n * @example\n * // \u6839\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('/', 'us') // => '/'\n * getLocalizedPath('/', 'uk') // => '/uk'\n *\n * @example\n * // \u81EA\u52A8\u683C\u5F0F\u5316\u8DEF\u5F84\n * getLocalizedPath('products', 'uk') // => '/uk/products' (\u8865\u5145\u524D\u5BFC\u659C\u6760)\n * getLocalizedPath('/products/', 'uk') // => '/uk/products' (\u79FB\u9664\u5C3E\u90E8\u659C\u6760)\n * getLocalizedPath('//products//detail/', 'uk') // => '/uk/products/detail' (\u79FB\u9664\u591A\u4F59\u659C\u6760)\n *\n * @example\n * // \u5DF2\u5305\u542B locale \u7684\u8DEF\u5F84\u4E0D\u91CD\u590D\u6DFB\u52A0\n * getLocalizedPath('/uk/products', 'uk') // => '/uk/products'\n *\n * @example\n * // \u5B8C\u6574 URL \u4E0D\u5904\u7406\n * getLocalizedPath('https://example.com/page', 'uk') // => 'https://example.com/page'\n * getLocalizedPath('http://example.com', 'de') // => 'http://example.com'\n *\n * @example\n * // \u7A7A\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('', 'uk') // => ''\n */\nexport const getLocalizedPath = (path: string, locale: string): string => {\n if (!path) return path\n\n // \u5982\u679C\u662F\u5B8C\u6574 URL\uFF08http:// \u6216 https://\uFF09\uFF0C\u4E0D\u5904\u7406\n if (path.startsWith('http://') || path.startsWith('https://')) {\n return path\n }\n\n // \u5206\u5272\u8DEF\u5F84\u5E76\u8FC7\u6EE4\u7A7A\u6BB5\uFF08\u5904\u7406\u591A\u4E2A\u8FDE\u7EED\u659C\u6760\u7684\u60C5\u51B5\uFF09\n const pathSegments = path.split('/').filter(Boolean)\n\n // \u5982\u679C\u6CA1\u6709\u6709\u6548\u8DEF\u5F84\u6BB5\uFF0C\u8FD4\u56DE locale \u524D\u7F00\u6216 '/'\n if (pathSegments.length === 0) {\n return locale === 'us' ? '/' : `/${locale}`\n }\n\n // \u68C0\u67E5\u8DEF\u5F84\u662F\u5426\u5DF2\u7ECF\u5305\u542B locale\n if (pathSegments[0] === locale) {\n return `/${pathSegments.join('/')}`\n }\n\n // \u83B7\u53D6 locale \u524D\u7F00\u5E76\u62FC\u63A5\n const localePrefix = locale === 'us' ? '' : `/${locale}`\n return `${localePrefix}/${pathSegments.join('/')}`\n}\n"],
|
|
5
|
-
"mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC,CAEtB,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMC,EAAiBC,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAOhEC,EAAgBD,GACbA,EAAI,QAAQ,sBAAuB,MAAM,EASrCE,EAAsB,CAACC,EAAcC,IAAuB,CACvE,GAAI,CACF,GAAI,CAACD,GAAQ,CAACC,EACZ,OAAOD,EAIT,MAAME,EAAoBJ,EAAaG,CAAU,EAC3CE,EAAQ,IAAI,OAAOD,EAAmB,IAAI,EAGhD,OAAOF,EAAK,QAAQG,EAAOC,GAAS,wCAAwCA,CAAK,SAAS,CAC5F,OAASC,EAAG,CACV,eAAQ,MAAM,6BAA8BA,CAAC,EACtCL,CACT,CACF,EAkDaM,EAAmB,CAACC,EAAcC,IAA2B,CAIxE,GAHI,CAACD,GAGDA,EAAK,WAAW,SAAS,GAAKA,EAAK,WAAW,UAAU,
|
|
4
|
+
"sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n borderRadius: ['btn'],\n },\n classGroups: {\n 'font-size': [\n 'text-heading-1',\n 'text-heading-2',\n 'text-heading-3',\n 'text-heading-4',\n 'text-heading-5',\n 'text-text-3',\n 'text-text-2',\n 'text-text-1',\n ],\n 'text-color': [\n 'text-info-primary',\n 'text-info-secondary',\n 'text-info-tertiary',\n 'text-info-quaternary',\n 'text-info-white',\n ],\n leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n },\n },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n if (id && typeof id === 'string' && id.includes('/')) {\n return id.split('/').pop()?.split('?')?.shift()\n } else {\n return id\n }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\n/**\n * \u8F6C\u4E49\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n * @param str \u9700\u8981\u8F6C\u4E49\u7684\u5B57\u7B26\u4E32\n * @returns \u8F6C\u4E49\u540E\u7684\u5B57\u7B26\u4E32\n */\nconst escapeRegExp = (str: string): string => {\n return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u9AD8\u4EAE\u641C\u7D22\u5173\u952E\u8BCD\n * @param text \u539F\u59CB\u6587\u672C\n * @param searchText \u641C\u7D22\u5173\u952E\u8BCD\n * @returns \u9AD8\u4EAE\u540E\u7684 HTML \u5B57\u7B26\u4E32\n */\nexport const highlightSearchWord = (text: string, searchText: string) => {\n try {\n if (!text || !searchText) {\n return text\n }\n\n // \u8F6C\u4E49\u641C\u7D22\u6587\u672C\u4E2D\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n const escapedSearchText = escapeRegExp(searchText)\n const regex = new RegExp(escapedSearchText, 'gi')\n\n // \u4F7F\u7528\u6B63\u5219\u8868\u8FBE\u5F0F\u7684\u5339\u914D\u7ED3\u679C\u6765\u4FDD\u6301\u539F\u59CB\u5927\u5C0F\u5199\n return text.replace(regex, match => `<span class='text-brand-0 font-bold'>${match}</span>`)\n } catch (e) {\n console.error('highlightSearchWord error:', e)\n return text\n }\n}\n\n/**\n * \u83B7\u53D6\u672C\u5730\u5316\u8DEF\u5F84\n *\n * \u6839\u636E\u8BED\u8A00\u6807\u8BC6\u4E3A\u8DEF\u5F84\u6DFB\u52A0\u5BF9\u5E94\u7684 locale \u524D\u7F00\u3002\n * - 'us' \u4E3A\u9ED8\u8BA4\u8BED\u8A00\uFF0C\u4E0D\u6DFB\u52A0\u524D\u7F00\n * - \u5176\u4ED6\u8BED\u8A00\u4F1A\u6DFB\u52A0 `/{locale}` \u524D\u7F00\n * - \u5B8C\u6574 URL\uFF08http/https\uFF09\u4E0D\u505A\u5904\u7406\n * - \u81EA\u52A8\u5904\u7406\u8DEF\u5F84\u683C\u5F0F\uFF08\u8865\u5145\u524D\u5BFC\u659C\u6760\u3001\u79FB\u9664\u5C3E\u90E8\u659C\u6760\uFF09\n *\n * @param path - \u539F\u59CB\u8DEF\u5F84\n * @param locale - \u8BED\u8A00\u6807\u8BC6\uFF08\u5982 'us', 'uk', 'de', 'jp' \u7B49\uFF09\n * @returns \u672C\u5730\u5316\u540E\u7684\u8DEF\u5F84\n *\n * @example\n * // \u57FA\u672C\u7528\u6CD5 - \u9ED8\u8BA4\u8BED\u8A00 'us' \u4E0D\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'us') // => '/products'\n * getLocalizedPath('/about', 'us') // => '/about'\n *\n * @example\n * // \u5176\u4ED6\u8BED\u8A00\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'uk') // => '/uk/products'\n * getLocalizedPath('/about/team', 'de') // => '/de/about/team'\n * getLocalizedPath('/contact', 'jp') // => '/jp/contact'\n *\n * @example\n * // \u6839\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('/', 'us') // => '/'\n * getLocalizedPath('/', 'uk') // => '/uk'\n *\n * @example\n * // \u81EA\u52A8\u683C\u5F0F\u5316\u8DEF\u5F84\n * getLocalizedPath('products', 'uk') // => '/uk/products' (\u8865\u5145\u524D\u5BFC\u659C\u6760)\n * getLocalizedPath('/products/', 'uk') // => '/uk/products' (\u79FB\u9664\u5C3E\u90E8\u659C\u6760)\n * getLocalizedPath('//products//detail/', 'uk') // => '/uk/products/detail' (\u79FB\u9664\u591A\u4F59\u659C\u6760)\n *\n * @example\n * // \u5DF2\u5305\u542B locale \u7684\u8DEF\u5F84\u4E0D\u91CD\u590D\u6DFB\u52A0\n * getLocalizedPath('/uk/products', 'uk') // => '/uk/products'\n *\n * @example\n * // \u5B8C\u6574 URL \u4E0D\u5904\u7406\n * getLocalizedPath('https://example.com/page', 'uk') // => 'https://example.com/page'\n * getLocalizedPath('http://example.com', 'de') // => 'http://example.com'\n *\n * @example\n * // \u7A7A\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('', 'uk') // => ''\n */\nexport const getLocalizedPath = (path: string, locale: string): string => {\n if (!path) return path\n\n // \u5982\u679C\u662F\u5B8C\u6574 URL\uFF08http:// \u6216 https://\uFF09\u6216\u951A\u70B9\u94FE\u63A5\uFF08#\uFF09\uFF0C\u4E0D\u5904\u7406\n if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('#')) {\n return path\n }\n\n // \u5206\u5272\u8DEF\u5F84\u5E76\u8FC7\u6EE4\u7A7A\u6BB5\uFF08\u5904\u7406\u591A\u4E2A\u8FDE\u7EED\u659C\u6760\u7684\u60C5\u51B5\uFF09\n const pathSegments = path.split('/').filter(Boolean)\n\n // \u5982\u679C\u6CA1\u6709\u6709\u6548\u8DEF\u5F84\u6BB5\uFF0C\u8FD4\u56DE locale \u524D\u7F00\u6216 '/'\n if (pathSegments.length === 0) {\n return locale === 'us' ? '/' : `/${locale}`\n }\n\n // \u68C0\u67E5\u8DEF\u5F84\u662F\u5426\u5DF2\u7ECF\u5305\u542B locale\n if (pathSegments[0] === locale) {\n return `/${pathSegments.join('/')}`\n }\n\n // \u83B7\u53D6 locale \u524D\u7F00\u5E76\u62FC\u63A5\n const localePrefix = locale === 'us' ? '' : `/${locale}`\n return `${localePrefix}/${pathSegments.join('/')}`\n}\n"],
|
|
5
|
+
"mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC,CAEtB,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMC,EAAiBC,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAOhEC,EAAgBD,GACbA,EAAI,QAAQ,sBAAuB,MAAM,EASrCE,EAAsB,CAACC,EAAcC,IAAuB,CACvE,GAAI,CACF,GAAI,CAACD,GAAQ,CAACC,EACZ,OAAOD,EAIT,MAAME,EAAoBJ,EAAaG,CAAU,EAC3CE,EAAQ,IAAI,OAAOD,EAAmB,IAAI,EAGhD,OAAOF,EAAK,QAAQG,EAAOC,GAAS,wCAAwCA,CAAK,SAAS,CAC5F,OAASC,EAAG,CACV,eAAQ,MAAM,6BAA8BA,CAAC,EACtCL,CACT,CACF,EAkDaM,EAAmB,CAACC,EAAcC,IAA2B,CAIxE,GAHI,CAACD,GAGDA,EAAK,WAAW,SAAS,GAAKA,EAAK,WAAW,UAAU,GAAKA,EAAK,WAAW,GAAG,EAClF,OAAOA,EAIT,MAAME,EAAeF,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,EAGnD,OAAIE,EAAa,SAAW,EACnBD,IAAW,KAAO,IAAM,IAAIA,CAAM,GAIvCC,EAAa,CAAC,IAAMD,EACf,IAAIC,EAAa,KAAK,GAAG,CAAC,GAK5B,GADcD,IAAW,KAAO,GAAK,IAAIA,CAAM,EAChC,IAAIC,EAAa,KAAK,GAAG,CAAC,EAClD",
|
|
6
6
|
"names": ["clsx", "extendTailwindMerge", "twMerge", "cn", "inputs", "noop", "atobID", "id", "spaceToHyphen", "str", "escapeRegExp", "highlightSearchWord", "text", "searchText", "escapedSearchText", "regex", "match", "e", "getLocalizedPath", "path", "locale", "pathSegments"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1728,9 +1728,6 @@ video {
|
|
|
1728
1728
|
.w-\[50px\] {
|
|
1729
1729
|
width: 50px;
|
|
1730
1730
|
}
|
|
1731
|
-
.w-\[60\%\] {
|
|
1732
|
-
width: 60%;
|
|
1733
|
-
}
|
|
1734
1731
|
.w-\[70px\] {
|
|
1735
1732
|
width: 70px;
|
|
1736
1733
|
}
|
|
@@ -5504,6 +5501,9 @@ video {
|
|
|
5504
5501
|
.laptop\:w-\[49\%\] {
|
|
5505
5502
|
width: 49%;
|
|
5506
5503
|
}
|
|
5504
|
+
.laptop\:w-\[60\%\] {
|
|
5505
|
+
width: 60%;
|
|
5506
|
+
}
|
|
5507
5507
|
.laptop\:w-\[60px\] {
|
|
5508
5508
|
width: 60px;
|
|
5509
5509
|
}
|