@anker-in/headless-ui 1.0.19-temp-101308 → 1.0.19-temp-101401

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.
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var G=Object.create;var b=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var l in t)b(e,l,{get:t[l],enumerable:!0})},L=(e,t,l,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of K(t))!W.call(e,a)&&a!==l&&b(e,a,{get:()=>t[a],enumerable:!(s=J(t,a))||s.enumerable});return e};var y=(e,t,l)=>(l=e!=null?G(O(e)):{},L(t||!e||!e.__esModule?b(l,"default",{value:e,enumerable:!0}):l,e)),Y=e=>L(b({},"__esModule",{value:!0}),e);var ee={};X(ee,{default:()=>Z});module.exports=Y(ee);var r=require("react/jsx-runtime"),o=y(require("react")),u=y(require("gsap")),m=require("gsap/dist/ScrollTrigger"),T=require("react-responsive"),B=require("react-intersection-observer"),E=y(require("../../helpers/ScrollLoadVideo.js")),g=require("../../components/index.js"),d=require("../../helpers/index.js"),z=require("../../shared/Styles.js"),D=require("../../hooks/useExposure.js"),U=require("../../shared/trackUrlRef.js"),se=require("../../components/button.js"),ie=require("../VideoModal/index.js");const k="image",w="collections_banner",S=o.default.forwardRef(({data:e,className:t},l)=>{const{title:s,subtitle:a,pcImage:N,padImage:j,mobileImage:H,pcVideo:R,padVideo:P,mobileVideo:f,isShowVideo:q,theme:_="light",blockLink:V}=e,$=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),I=(0,T.useMediaQuery)({query:"(max-width: 1024px)"}),{ref:Q,inView:M}=(0,B.useInView)(),h=(0,o.useRef)(null),x=(0,o.useRef)(null),v=(0,o.useRef)(null),i=(0,o.useRef)(null),n=(0,o.useRef)(null);return(0,D.useExposure)(n,{componentType:k,componentName:w,componentTitle:s,componentDescription:a}),(0,o.useImperativeHandle)(l,()=>n.current),(0,o.useEffect)(()=>{u.default.registerPlugin(m.ScrollTrigger);function A(){if(!i.current)return;const F=n.current?.clientHeight||100;window.innerHeight<=F?h.current=m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const p=c.progress*40-20;u.default.set(i.current,{yPercent:p})}}):(v.current=m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:c=>{const p=c.progress*20-20;u.default.set(i.current,{yPercent:p})}}),x.current=m.ScrollTrigger.create({trigger:n.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:c=>{const p=c.progress*20;u.default.set(i.current,{yPercent:p})}}))}return M&&A(),()=>{h.current&&h.current.kill(),v.current&&v.current.kill(),x.current&&x.current.kill()}},[M]),(0,r.jsx)("div",{ref:Q,"data-ui-component-id":"CollectionsBanner",children:(0,r.jsxs)("div",{ref:n,className:(0,d.cn)(_==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden","lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/480]",t),children:[V&&(0,r.jsx)("a",{tabIndex:-1,"aria-hidden":"true","aria-label":s,className:"absolute inset-0 z-10","data-headless-title-desc-button":`${s}#${a}`,"data-headless-type-name":`${k}#${w}`,href:(0,U.trackUrlRef)(V,`${k}_${w}`)}),(0,r.jsx)("div",{ref:i,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:q?(0,r.jsx)(E.default,{poster:$?f?.url:I?P?.url||f?.url:R?.url,src:$?f?.url:I?P?.url||f?.url:R?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,r.jsx)(g.Picture,{loading:"eager",fetchPriority:"high",className:"laptop:w-full h-full",imgClassName:"h-full object-cover",alt:N?.alt||"",source:`${N?.url||""} , ${j?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),(0,r.jsx)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4",children:(0,r.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[s&&(0,r.jsx)(g.Heading,{as:"h2",className:(0,d.cn)("font-bold hero-banner-title"),html:s}),a&&(0,r.jsx)(g.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-lg desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm font-bold"),html:a})]})})]})})});S.displayName="CollectionsBanner";var Z=(0,z.withLayout)(S);
1
+ "use strict";"use client";var G=Object.create;var b=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var l in t)b(e,l,{get:t[l],enumerable:!0})},L=(e,t,l,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of K(t))!W.call(e,s)&&s!==l&&b(e,s,{get:()=>t[s],enumerable:!(a=J(t,s))||a.enumerable});return e};var y=(e,t,l)=>(l=e!=null?G(O(e)):{},L(t||!e||!e.__esModule?b(l,"default",{value:e,enumerable:!0}):l,e)),Y=e=>L(b({},"__esModule",{value:!0}),e);var ee={};X(ee,{default:()=>Z});module.exports=Y(ee);var r=require("react/jsx-runtime"),o=y(require("react")),u=y(require("gsap")),m=require("gsap/dist/ScrollTrigger"),T=require("react-responsive"),z=require("react-intersection-observer"),B=y(require("../../helpers/ScrollLoadVideo.js")),g=require("../../components/index.js"),d=require("../../helpers/index.js"),E=require("../../shared/Styles.js"),D=require("../../hooks/useExposure.js"),U=require("../../shared/trackUrlRef.js"),ae=require("../../components/button.js"),ie=require("../VideoModal/index.js");const k="image",w="collections_banner",S=o.default.forwardRef(({data:e,className:t},l)=>{const{title:a,subtitle:s,pcImage:N,padImage:j,mobileImage:H,pcVideo:R,padVideo:P,mobileVideo:f,isShowVideo:q,theme:_="light",blockLink:V}=e,$=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),I=(0,T.useMediaQuery)({query:"(max-width: 1024px)"}),{ref:Q,inView:M}=(0,z.useInView)(),h=(0,o.useRef)(null),x=(0,o.useRef)(null),v=(0,o.useRef)(null),i=(0,o.useRef)(null),n=(0,o.useRef)(null);return(0,D.useExposure)(n,{componentType:k,componentName:w,componentTitle:a,componentDescription:s}),(0,o.useImperativeHandle)(l,()=>n.current),(0,o.useEffect)(()=>{u.default.registerPlugin(m.ScrollTrigger);function A(){if(!i.current)return;const F=n.current?.clientHeight||100;window.innerHeight<=F?h.current=m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:c=>{const p=c.progress*40-20;u.default.set(i.current,{yPercent:p})}}):(v.current=m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:c=>{const p=c.progress*20-20;u.default.set(i.current,{yPercent:p})}}),x.current=m.ScrollTrigger.create({trigger:n.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:c=>{const p=c.progress*20;u.default.set(i.current,{yPercent:p})}}))}return M&&A(),()=>{h.current&&h.current.kill(),v.current&&v.current.kill(),x.current&&x.current.kill()}},[M]),(0,r.jsx)("div",{ref:Q,"data-ui-component-id":"CollectionsBanner",children:(0,r.jsxs)("div",{ref:n,className:(0,d.cn)(_==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden","lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/430]",t),children:[V&&(0,r.jsx)("a",{tabIndex:-1,"aria-hidden":"true","aria-label":a,className:"absolute inset-0 z-10","data-headless-title-desc-button":`${a}#${s}`,"data-headless-type-name":`${k}#${w}`,href:(0,U.trackUrlRef)(V,`${k}_${w}`)}),(0,r.jsx)("div",{ref:i,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:q?(0,r.jsx)(B.default,{poster:$?f?.url:I?P?.url||f?.url:R?.url,src:$?f?.url:I?P?.url||f?.url:R?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,r.jsx)(g.Picture,{loading:"eager",fetchPriority:"high",className:"laptop:w-full h-full",imgClassName:"h-full object-cover",alt:N?.alt||"",source:`${N?.url||""} , ${j?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),(0,r.jsx)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4",children:(0,r.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[a&&(0,r.jsx)(g.Heading,{as:"h2",size:5,className:(0,d.cn)("font-bold hero-banner-title"),html:a}),s&&(0,r.jsx)(g.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-lg desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm font-bold"),html:s})]})})]})})});S.displayName="CollectionsBanner";var Z=(0,E.withLayout)(S);
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/CollectionsBanner/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { CollectionsBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'collections_banner'\n\nconst CollectionsBanner = React.forwardRef<HTMLDivElement, CollectionsBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n theme = 'light',\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"CollectionsBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n 'lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/480]',\n className\n )}\n >\n {blockLink && (\n <a\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n className=\"absolute inset-0 z-10\"\n data-headless-title-desc-button={`${title}#${subtitle}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n />\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n loading=\"eager\"\n fetchPriority=\"high\"\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" className={cn('font-bold hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-lg desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm font-bold'\n )}\n html={subtitle}\n />\n )}\n </div>\n </div>\n </div>\n </div>\n )\n})\n\nCollectionsBanner.displayName = 'CollectionsBanner'\n\nexport default withLayout(CollectionsBanner)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { CollectionsBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'collections_banner'\n\nconst CollectionsBanner = React.forwardRef<HTMLDivElement, CollectionsBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n theme = 'light',\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"CollectionsBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n 'lg-desktop:aspect-[1920/480] desktop:aspect-[1440/384] laptop:aspect-[1024/400] tablet:aspect-[768/480] aspect-[390/430]',\n className\n )}\n >\n {blockLink && (\n <a\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n className=\"absolute inset-0 z-10\"\n data-headless-title-desc-button={`${title}#${subtitle}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n />\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n loading=\"eager\"\n fetchPriority=\"high\"\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-8 laptop:px-16 lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-8 absolute top-24 z-10 flex flex-col gap-6 px-4\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('font-bold hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-lg desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm font-bold'\n )}\n html={subtitle}\n />\n )}\n </div>\n </div>\n </div>\n </div>\n )\n})\n\nCollectionsBanner.displayName = 'CollectionsBanner'\n\nexport default withLayout(CollectionsBanner)\n"],
5
+ "mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,IAAA,eAAAC,EAAAH,IAqHU,IAAAI,EAAA,6BApHVC,EAAwE,oBACxEC,EAAiB,mBACjBC,EAA8B,mCAE9BC,EAA8B,4BAC9BC,EAA0B,uCAC1BC,EAA4B,+CAC5BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,GAAwB,sCACxBC,GAA2B,kCAE3B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAoB,EAAAC,QAAM,WAAmD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC/G,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,QACR,UAAAC,CACF,EAAIb,EAEEc,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EACtD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EACvCC,KAAmB,UAA6B,IAAI,EACpDC,KAAe,UAA6B,IAAI,EAChDC,KAAgB,UAA6B,IAAI,EAEjDC,KAAQ,UAAyB,IAAI,EACrCC,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAA1B,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMoB,EAAO,OAAyB,KAE/D,aAAU,IAAM,CACd,EAAAC,QAAK,eAAe,eAAa,EACjC,SAASC,GAAa,CACpB,GAAI,CAACH,EAAM,QAAS,OACpB,MAAMI,EAAeH,EAAO,SAAS,cAAgB,IAChC,OAAO,aAERG,EAClBP,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASI,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWI,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAH,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUM,CAAM,CAAC,CAC7C,CACF,CAAC,GAEDP,EAAc,QAAU,gBAAc,OAAO,CAC3C,QAASE,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWI,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAH,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUM,CAAM,CAAC,CAC7C,CACF,CAAC,EACDR,EAAa,QAAU,gBAAc,OAAO,CAC1C,QAASG,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWI,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B,EAAAH,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUM,CAAM,CAAC,CAC7C,CACF,CAAC,EAEL,CACA,OAAIV,GAAQO,EAAW,EAChB,IAAM,CACXN,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DE,EAAc,SAAWA,EAAc,QAAQ,KAAK,EACpDD,EAAa,SAAWA,EAAa,QAAQ,KAAK,CACpD,CACF,EAAG,CAACF,CAAM,CAAC,KAGT,OAAC,OAAI,IAAKD,EAAW,uBAAqB,oBACxC,oBAAC,OACC,IAAKM,EACL,aAAW,MACTV,IAAU,OAAS,YAAc,GACjC,oDACA,2HACAX,CACF,EAEC,UAAAY,MACC,OAAC,KACC,SAAU,GACV,cAAY,OACZ,aAAYV,EACZ,UAAU,wBACV,kCAAiC,GAAGA,CAAK,IAAIC,CAAQ,GACrD,0BAAyB,GAAGR,CAAa,IAAIC,CAAa,GAC1D,QAAM,eAAYgB,EAAW,GAAGjB,CAAa,IAAIC,CAAa,EAAE,EAClE,KAEF,OAAC,OAAI,IAAKwB,EAAO,aAAW,MAAG,iCAAiC,EAC7D,SAAAV,KACC,OAAC,EAAAiB,QAAA,CACC,OAAQd,EAAWJ,GAAa,IAAMK,EAAQN,GAAU,KAAOC,GAAa,IAAMF,GAAS,IAC3F,IACEM,EACKJ,GAAa,IACdK,EACGN,GAAU,KAAmBC,GAAa,IAC1CF,GAAS,IAElB,UAAU,uBACV,eAAe,sBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACb,KAEA,OAAC,WACC,QAAQ,QACR,cAAc,OACd,UAAU,uBACV,aAAa,sBACb,IAAKH,GAAS,KAAO,GACrB,OAAQ,GAAGA,GAAS,KAAO,EAAE,MAAMC,GAAU,MAAQC,GAAa,KAAO,GAAG,UAAUA,GAAa,KAAO,EAAE,OAC9G,EAEJ,KAGA,OAAC,OAAI,UAAU,iKACb,oBAAC,OAAI,UAAU,iCACZ,UAAAJ,MAAS,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,6BAA6B,EAAG,KAAMA,EAAO,EAC9FC,MACC,OAAC,WACC,GAAG,KACH,aAAW,MACT,2HACF,EACA,KAAMA,EACR,GAEJ,EACF,GACF,EACF,CAEJ,CAAC,EAEDN,EAAkB,YAAc,oBAEhC,IAAOlB,KAAQ,cAAWkB,CAAiB",
6
6
  "names": ["CollectionsBanner_exports", "__export", "CollectionsBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "CollectionsBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "theme", "blockLink", "isMobile", "isPad", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo"]
7
7
  }