@anker-in/headless-ui 1.1.37 → 1.1.38

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 (9) hide show
  1. package/dist/cjs/biz-components/Faq/Faq.js +1 -1
  2. package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
  3. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
  4. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  5. package/dist/esm/biz-components/Faq/Faq.js +1 -1
  6. package/dist/esm/biz-components/Faq/Faq.js.map +3 -3
  7. package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
  8. package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  9. package/package.json +1 -1
package/dist/cjs/biz-components/Faq/Faq.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var x=Object.create;var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var b=(t,e)=>{for(var o in e)n(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of u(e))!h.call(t,i)&&i!==o&&n(t,i,{get:()=>e[i],enumerable:!(r=g(e,i))||r.enumerable});return t};var w=(t,e,o)=>(o=t!=null?x(y(t)):{},p(e||!t||!t.__esModule?n(o,"default",{value:t,enumerable:!0}):o,t)),N=t=>p(n({},"__esModule",{value:!0}),t);var q={};b(q,{FaqItem:()=>d,default:()=>F});module.exports=N(q);var a=require("react/jsx-runtime"),s=w(require("react")),m=require("../../components/index.js"),l=require("../../helpers/index.js"),f=require("../../shared/Styles.js");const c=s.default.forwardRef(({data:t,className:e},o)=>{const r=(0,s.useRef)(null);return(0,s.useImperativeHandle)(o,()=>r.current),(0,a.jsx)("div",{ref:r,className:(0,l.cn)(e),children:(0,a.jsx)("div",{children:t?.productData?.map((i,v)=>(0,a.jsx)(d,{data:i},v))})})});c.displayName="Faq";const d=({data:t})=>{const[e,o]=(0,s.useState)(!1);return(0,a.jsx)("div",{className:"tablet:py-6 border-b border-[#E4E5E6] py-4",children:(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{onClick:()=>{o(!e)},className:"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",children:[(0,a.jsx)(m.Text,{html:t?.title,className:"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]"}),(0,a.jsx)("div",{className:" transition-transform duration-300",children:(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,l.cn)("w-[20px] transition-transform duration-300",e&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,a.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,a.jsx)("div",{className:(0,l.cn)("overflow-hidden transition-all duration-300",e?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0"),children:(0,a.jsx)(m.Text,{html:t?.desc,className:"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]"})})]})})};d.displayName="FaqItem";var F=(0,f.withLayout)(c);
1
+ "use strict";"use client";var g=Object.create;var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of u(t))!h.call(e,i)&&i!==o&&n(e,i,{get:()=>t[i],enumerable:!(r=x(t,i))||r.enumerable});return e};var w=(e,t,o)=>(o=e!=null?g(y(e)):{},p(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>p(n({},"__esModule",{value:!0}),e);var q={};b(q,{FaqItem:()=>d,default:()=>F});module.exports=N(q);var a=require("react/jsx-runtime"),s=w(require("react")),m=require("../../components/index.js"),l=require("../../helpers/index.js"),f=require("../../shared/Styles.js");const c=s.default.forwardRef(({data:e,className:t},o)=>{const r=(0,s.useRef)(null);return(0,s.useImperativeHandle)(o,()=>r.current),(0,a.jsx)("div",{ref:r,className:(0,l.cn)(t),children:(0,a.jsx)("div",{children:e?.productData?.map((i,v)=>(0,a.jsx)(d,{data:i},v))})})});c.displayName="Faq";const d=({data:e})=>{const[t,o]=(0,s.useState)(!1);return(0,a.jsx)("div",{className:"tablet:py-6 border-b border-[#E4E5E6] py-4",children:(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{onClick:()=>{o(!t)},className:"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",children:[(0,a.jsx)(m.Heading,{as:"h3",html:e?.title,className:"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]"}),(0,a.jsx)("div",{className:" transition-transform duration-300",children:(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,l.cn)("w-[20px] transition-transform duration-300",t&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,a.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,a.jsx)("div",{className:(0,l.cn)("overflow-hidden transition-all duration-300",t?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0"),children:(0,a.jsx)(m.Text,{html:e?.desc,className:"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]"})})]})})};d.displayName="FaqItem";var F=(0,f.withLayout)(c);
2
2
  //# sourceMappingURL=Faq.js.map
package/dist/cjs/biz-components/Faq/Faq.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType } from './types.js'\nimport { Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(({ data, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n return (\n <div ref={innerRef} className={cn(className)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} />\n ))}\n </div>\n </div>\n )\n})\n\nFaq.displayName = 'Faq'\n\nconst FaqItem = ({ data }: { data: ItemType }) => {\n const [open, setOpen] = useState(false)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className=\"tablet:py-6 border-b border-[#E4E5E6] py-4\">\n <div>\n <div\n onClick={handleToggle}\n className=\"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4\"\n >\n <Text\n html={data?.title}\n className=\"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]\"\n />\n <div className=\" transition-transform duration-300\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0'\n )}\n >\n <Text\n html={data?.desc}\n className=\"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]\"\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAeU,IAAAK,EAAA,6BAdVC,EAA6D,oBAE7DC,EAAqB,qCACrBC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAAqC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnF,MAAMC,KAAW,UAAuB,IAAI,EAC5C,gCAAoBD,EAAK,IAAMC,EAAS,OAAQ,KAG9C,OAAC,OAAI,IAAKA,EAAU,aAAW,MAAGF,CAAS,EACzC,mBAAC,OACE,SAAAD,GAAM,aAAa,IAAI,CAACI,EAAWC,OAClC,OAACf,EAAA,CAAoB,KAAMc,GAAbC,CAAmB,CAClC,EACH,EACF,CAEJ,CAAC,EAEDP,EAAI,YAAc,MAElB,MAAMR,EAAU,CAAC,CAAE,KAAAU,CAAK,IAA0B,CAChD,KAAM,CAACM,EAAMC,CAAO,KAAI,YAAS,EAAK,EAMtC,SACE,OAAC,OAAI,UAAU,6CACb,oBAAC,OACC,qBAAC,OACC,QARa,IAAM,CACzBA,EAAQ,CAACD,CAAI,CACf,EAOQ,UAAU,4EAEV,oBAAC,QACC,KAAMN,GAAM,MACZ,UAAU,yFACZ,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CM,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,8CACAA,EAAO,iCAAmC,mBAC5C,EAEA,mBAAC,QACC,KAAMN,GAAM,KACZ,UAAU,2FACZ,EACF,GACF,EACF,CAEJ,EAEAV,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(({ data, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n return (\n <div ref={innerRef} className={cn(className)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} />\n ))}\n </div>\n </div>\n )\n})\n\nFaq.displayName = 'Faq'\n\nconst FaqItem = ({ data }: { data: ItemType }) => {\n const [open, setOpen] = useState(false)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className=\"tablet:py-6 border-b border-[#E4E5E6] py-4\">\n <div>\n <div\n onClick={handleToggle}\n className=\"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4\"\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className=\"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]\"\n />\n <div className=\" transition-transform duration-300\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0'\n )}\n >\n <Text\n html={data?.desc}\n className=\"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]\"\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAeU,IAAAK,EAAA,6BAdVC,EAA6D,oBAE7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAAqC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnF,MAAMC,KAAW,UAAuB,IAAI,EAC5C,gCAAoBD,EAAK,IAAMC,EAAS,OAAQ,KAG9C,OAAC,OAAI,IAAKA,EAAU,aAAW,MAAGF,CAAS,EACzC,mBAAC,OACE,SAAAD,GAAM,aAAa,IAAI,CAACI,EAAWC,OAClC,OAACf,EAAA,CAAoB,KAAMc,GAAbC,CAAmB,CAClC,EACH,EACF,CAEJ,CAAC,EAEDP,EAAI,YAAc,MAElB,MAAMR,EAAU,CAAC,CAAE,KAAAU,CAAK,IAA0B,CAChD,KAAM,CAACM,EAAMC,CAAO,KAAI,YAAS,EAAK,EAMtC,SACE,OAAC,OAAI,UAAU,6CACb,oBAAC,OACC,qBAAC,OACC,QARa,IAAM,CACzBA,EAAQ,CAACD,CAAI,CACf,EAOQ,UAAU,4EAEV,oBAAC,WACC,GAAG,KACH,KAAMN,GAAM,MACZ,UAAU,yFACZ,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CM,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,8CACAA,EAAO,iCAAmC,mBAC5C,EAEA,mBAAC,QACC,KAAMN,GAAM,KACZ,UAAU,2FACZ,EACF,GACF,EACF,CAEJ,EAEAV,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
6
6
  "names": ["Faq_exports", "__export", "FaqItem", "Faq_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "Faq", "React", "data", "className", "ref", "innerRef", "item", "index", "open", "setOpen"]
7
7
  }
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var pe=Object.create;var $=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var ge=(t,a)=>{for(var l in a)$(t,l,{get:a[l],enumerable:!0})},Z=(t,a,l,k)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of ue(a))!de.call(t,d)&&d!==l&&$(t,d,{get:()=>a[d],enumerable:!(k=ce(a,d))||k.enumerable});return t};var B=(t,a,l)=>(l=t!=null?pe(me(t)):{},Z(a||!t||!t.__esModule?$(l,"default",{value:t,enumerable:!0}):l,t)),be=t=>Z($({},"__esModule",{value:!0}),t);var he={};ge(he,{default:()=>fe});module.exports=be(he);var e=require("react/jsx-runtime"),o=B(require("react")),v=B(require("gsap")),w=require("gsap/dist/ScrollTrigger"),R=require("react-responsive"),J=require("react-intersection-observer"),K=B(require("../../helpers/ScrollLoadVideo.js")),r=require("../../components/index.js"),O=B(require("./Countdown.js")),m=require("../../helpers/index.js"),W=require("../../shared/Styles.js"),X=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),Y=require("../../components/button.js"),ee=require("../VideoModal/index.js");const c="image",u="hero_banner",xe=({size:t="base"})=>{const{width:a,height:l}=Y.sizeMap[t];return(0,e.jsx)("svg",{width:a,height:l,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},G=o.default.forwardRef(({data:t,className:a,onSecondaryClick:l,onPrimaryClick:k},d)=>{const{label:S,title:n,subtitle:i,endDate:M,endDate_tz:te,dateFormat:ae,pcImage:z,padImage:L,mobileImage:N,pcVideo:oe,padVideo:re,mobileVideo:D,isShowVideo:le,primaryButton:g,secondaryButton:s,theme:se="light",size:H="default",titleSize:E,caption:C=[],blockLink:U,iconArray:ne}=t,_=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),j=(0,R.useMediaQuery)({query:"(max-width: 1024px)"}),[F,q]=(0,o.useState)(!1),{ref:ie,inView:A}=(0,J.useInView)(),V=(0,o.useRef)(null),I=(0,o.useRef)(null),P=(0,o.useRef)(null),f=(0,o.useRef)(null),b=(0,o.useRef)(null);return(0,X.useExposure)(b,{componentType:c,componentName:u,componentTitle:n,componentDescription:i}),(0,o.useImperativeHandle)(d,()=>b.current),(0,o.useEffect)(()=>{v.default.registerPlugin(w.ScrollTrigger);function p(){if(!f.current)return;const x=b.current?.clientHeight||100;window.innerHeight<=x?V.current=w.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*40-20;v.default.set(f.current,{yPercent:y})}}):(P.current=w.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const y=h.progress*20-20;v.default.set(f.current,{yPercent:y})}}),I.current=w.ScrollTrigger.create({trigger:b.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*20;v.default.set(f.current,{yPercent:y})}}))}return A&&p(),()=>{V.current&&V.current.kill(),P.current&&P.current.kill(),I.current&&I.current.kill()}},[A]),(0,e.jsx)("div",{ref:ie,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:b,className:(0,m.cn)(se==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":H==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":H==="sm"},a),children:[U&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)(U,`${c}_${u}`),"data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}`,tabIndex:-1,"aria-hidden":"true","aria-label":n}),(0,e.jsx)("div",{ref:f,className:(0,m.cn)("absolute left-0 top-0 size-full"),children:le?(0,e.jsx)(K.default,{poster:_?N?.url:j?L?.url||N?.url:z?.url,src:_?D?.url:j?re?.url||D?.url:oe?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(r.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:z?.alt||"",source:`${z?.url||""} , ${L?.url??(N?.url||"")} 1024, ${N?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[S&&(0,e.jsx)(r.Heading,{as:"h3",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:S}),n&&(0,e.jsx)(r.Heading,{as:"h2",html:n,className:(0,m.cn)("hero-banner-title"),size:E?Number(E||"5"):H==="sm"?4:5}),i&&(0,e.jsx)(r.Heading,{as:"h3",className:(0,m.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:i}),M&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(O.default,{endDate:M,endDate_tz:te,dateFormat:ae})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[s?.isShowPlayVideoButton&&s?.playVideoButtonText?(0,e.jsxs)(r.Button,{onClick:()=>q(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}#${s?.playVideoButtonText}`,children:[s?.playVideoButtonText," ",(0,e.jsx)(xe,{size:"lg"})]}):s?.text?(0,e.jsxs)(r.Button,{"aria-label":n??i,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:s?.isCustomSecondaryButton?"button":"a",href:(0,T.trackUrlRef)(s?.link,`${c}_${u}`),onClick:p=>s?.isCustomSecondaryButton&&l?.(t,p),"data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}#${s?.text}`,children:[s?.text,(0,e.jsx)("span",{className:"sr-only",children:n??i})]}):null,g&&g.text&&(0,e.jsx)(r.Button,{"aria-label":n??i,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:g?.isCustomPrimaryButton?"button":"a",href:(0,T.trackUrlRef)(g.link,`${c}_${u}`),onClick:p=>g?.isCustomPrimaryButton&&k?.(t,p),"data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}#${g?.text}`,children:g.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:ne?.map((p,x)=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(r.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:p?.pcImage?.alt||"",source:p?.pcImage?.url})},x))})]}),C.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:C.map((p,x)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(r.Text,{size:2,className:(0,m.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:p.title}),x<C.length-1&&(0,e.jsx)("div",{className:(0,m.cn)("bg-info-primary w-px")})]},x))}),F&&(0,e.jsx)(ee.VideoModal,{visible:F,videoUrl:s?.videoUrl?.url,youTubeId:s?.youtubeId,onCloseModal:()=>q(!1)})]})})});G.displayName="HeroBanner";var fe=(0,W.withLayout)(G);
1
+ "use strict";"use client";var pe=Object.create;var $=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var ge=(t,a)=>{for(var l in a)$(t,l,{get:a[l],enumerable:!0})},Z=(t,a,l,k)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of ue(a))!de.call(t,d)&&d!==l&&$(t,d,{get:()=>a[d],enumerable:!(k=ce(a,d))||k.enumerable});return t};var B=(t,a,l)=>(l=t!=null?pe(me(t)):{},Z(a||!t||!t.__esModule?$(l,"default",{value:t,enumerable:!0}):l,t)),be=t=>Z($({},"__esModule",{value:!0}),t);var he={};ge(he,{default:()=>fe});module.exports=be(he);var e=require("react/jsx-runtime"),o=B(require("react")),v=B(require("gsap")),w=require("gsap/dist/ScrollTrigger"),S=require("react-responsive"),J=require("react-intersection-observer"),K=B(require("../../helpers/ScrollLoadVideo.js")),r=require("../../components/index.js"),O=B(require("./Countdown.js")),m=require("../../helpers/index.js"),W=require("../../shared/Styles.js"),X=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),Y=require("../../components/button.js"),ee=require("../VideoModal/index.js");const c="image",u="hero_banner",xe=({size:t="base"})=>{const{width:a,height:l}=Y.sizeMap[t];return(0,e.jsx)("svg",{width:a,height:l,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},G=o.default.forwardRef(({data:t,className:a,onSecondaryClick:l,onPrimaryClick:k},d)=>{const{label:M,title:n,subtitle:i,endDate:L,endDate_tz:te,dateFormat:ae,pcImage:z,padImage:D,mobileImage:N,pcVideo:oe,padVideo:re,mobileVideo:E,isShowVideo:le,primaryButton:g,secondaryButton:s,theme:se="light",size:H="default",titleSize:C,caption:V=[],blockLink:U,iconArray:ne}=t,_=(0,S.useMediaQuery)({query:"(max-width: 768px)"}),j=(0,S.useMediaQuery)({query:"(max-width: 1024px)"}),[F,q]=(0,o.useState)(!1),{ref:ie,inView:A}=(0,J.useInView)(),I=(0,o.useRef)(null),P=(0,o.useRef)(null),R=(0,o.useRef)(null),f=(0,o.useRef)(null),b=(0,o.useRef)(null);return(0,X.useExposure)(b,{componentType:c,componentName:u,componentTitle:n,componentDescription:i}),(0,o.useImperativeHandle)(d,()=>b.current),(0,o.useEffect)(()=>{v.default.registerPlugin(w.ScrollTrigger);function p(){if(!f.current)return;const x=b.current?.clientHeight||100;window.innerHeight<=x?I.current=w.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*40-20;v.default.set(f.current,{yPercent:y})}}):(R.current=w.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const y=h.progress*20-20;v.default.set(f.current,{yPercent:y})}}),P.current=w.ScrollTrigger.create({trigger:b.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*20;v.default.set(f.current,{yPercent:y})}}))}return A&&p(),()=>{I.current&&I.current.kill(),R.current&&R.current.kill(),P.current&&P.current.kill()}},[A]),(0,e.jsx)("div",{ref:ie,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:b,className:(0,m.cn)(se==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":H==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":H==="sm"},a),children:[U&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)(U,`${c}_${u}`),"data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}`,tabIndex:-1,"aria-hidden":"true","aria-label":n}),(0,e.jsx)("div",{ref:f,className:(0,m.cn)("absolute left-0 top-0 size-full"),children:le?(0,e.jsx)(K.default,{poster:_?N?.url:j?D?.url||N?.url:z?.url,src:_?E?.url:j?re?.url||E?.url:oe?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(r.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:z?.alt||"",source:`${z?.url||""} , ${D?.url??(N?.url||"")} 1024, ${N?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[M&&(0,e.jsx)(r.Heading,{as:"h3",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:M}),n&&(0,e.jsx)(r.Heading,{as:C==="4"?"h1":"h2",html:n,className:(0,m.cn)("hero-banner-title"),size:C?Number(C||"5"):H==="sm"?4:5}),i&&(0,e.jsx)(r.Heading,{as:"h3",className:(0,m.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:i}),L&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(O.default,{endDate:L,endDate_tz:te,dateFormat:ae})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[s?.isShowPlayVideoButton&&s?.playVideoButtonText?(0,e.jsxs)(r.Button,{onClick:()=>q(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}#${s?.playVideoButtonText}`,children:[s?.playVideoButtonText," ",(0,e.jsx)(xe,{size:"lg"})]}):s?.text?(0,e.jsxs)(r.Button,{"aria-label":n??i,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:s?.isCustomSecondaryButton?"button":"a",href:(0,T.trackUrlRef)(s?.link,`${c}_${u}`),onClick:p=>s?.isCustomSecondaryButton&&l?.(t,p),"data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}#${s?.text}`,children:[s?.text,(0,e.jsx)("span",{className:"sr-only",children:n??i})]}):null,g&&g.text&&(0,e.jsx)(r.Button,{"aria-label":n??i,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:g?.isCustomPrimaryButton?"button":"a",href:(0,T.trackUrlRef)(g.link,`${c}_${u}`),onClick:p=>g?.isCustomPrimaryButton&&k?.(t,p),"data-headless-type-name":`${c}#${u}`,"data-headless-title-desc-button":`${n}#${i}#${g?.text}`,children:g.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:ne?.map((p,x)=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(r.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:p?.pcImage?.alt||"",source:p?.pcImage?.url})},x))})]}),V.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:V.map((p,x)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(r.Text,{size:2,className:(0,m.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:p.title}),x<V.length-1&&(0,e.jsx)("div",{className:(0,m.cn)("bg-info-primary w-px")})]},x))}),F&&(0,e.jsx)(ee.VideoModal,{visible:F,videoUrl:s?.videoUrl?.url,youTubeId:s?.youtubeId,onCloseModal:()=>q(!1)})]})})});G.displayName="HeroBanner";var fe=(0,W.withLayout)(G);
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.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 { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ data, className, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n className={cn('hero-banner-title')}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\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 { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ data, className, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title')}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
+ "mappings": "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",
6
6
  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_Countdown", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "Countdown", "e", "icon", "index", "c"]
7
7
  }
package/dist/esm/biz-components/Faq/Faq.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import c,{useImperativeHandle as f,useRef as v,useState as x}from"react";import{Text as n}from"../../components/index.js";import{cn as i}from"../../helpers/index.js";import{withLayout as g}from"../../shared/Styles.js";const l=c.forwardRef(({data:a,className:e},o)=>{const s=v(null);return f(o,()=>s.current),t("div",{ref:s,className:i(e),children:t("div",{children:a?.productData?.map((m,p)=>t(r,{data:m},p))})})});l.displayName="Faq";const r=({data:a})=>{const[e,o]=x(!1);return t("div",{className:"tablet:py-6 border-b border-[#E4E5E6] py-4",children:d("div",{children:[d("div",{onClick:()=>{o(!e)},className:"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",children:[t(n,{html:a?.title,className:"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]"}),t("div",{className:" transition-transform duration-300",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",className:i("w-[20px] transition-transform duration-300",e&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:t("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),t("div",{className:i("overflow-hidden transition-all duration-300",e?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0"),children:t(n,{html:a?.desc,className:"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]"})})]})})};r.displayName="FaqItem";var w=g(l);export{r as FaqItem,w as default};
1
+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import p,{useImperativeHandle as c,useRef as f,useState as v}from"react";import{Text as g,Heading as x}from"../../components/index.js";import{cn as i}from"../../helpers/index.js";import{withLayout as u}from"../../shared/Styles.js";const n=p.forwardRef(({data:a,className:t},o)=>{const s=f(null);return c(o,()=>s.current),e("div",{ref:s,className:i(t),children:e("div",{children:a?.productData?.map((d,m)=>e(r,{data:d},m))})})});n.displayName="Faq";const r=({data:a})=>{const[t,o]=v(!1);return e("div",{className:"tablet:py-6 border-b border-[#E4E5E6] py-4",children:l("div",{children:[l("div",{onClick:()=>{o(!t)},className:"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",children:[e(x,{as:"h3",html:a?.title,className:"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]"}),e("div",{className:" transition-transform duration-300",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",className:i("w-[20px] transition-transform duration-300",t&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:e("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),e("div",{className:i("overflow-hidden transition-all duration-300",t?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0"),children:e(g,{html:a?.desc,className:"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]"})})]})})};r.displayName="FaqItem";var N=u(n);export{r as FaqItem,N as default};
2
2
  //# sourceMappingURL=Faq.js.map
package/dist/esm/biz-components/Faq/Faq.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType } from './types.js'\nimport { Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(({ data, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n return (\n <div ref={innerRef} className={cn(className)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} />\n ))}\n </div>\n </div>\n )\n})\n\nFaq.displayName = 'Faq'\n\nconst FaqItem = ({ data }: { data: ItemType }) => {\n const [open, setOpen] = useState(false)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className=\"tablet:py-6 border-b border-[#E4E5E6] py-4\">\n <div>\n <div\n onClick={handleToggle}\n className=\"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4\"\n >\n <Text\n html={data?.title}\n className=\"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]\"\n />\n <div className=\" transition-transform duration-300\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0'\n )}\n >\n <Text\n html={data?.desc}\n className=\"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]\"\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
- "mappings": "aAeU,cAAAA,EAmBF,QAAAC,MAnBE,oBAdV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,QAAAC,MAAY,4BACrB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMP,EAAM,WAAqC,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnF,MAAMC,EAAWT,EAAuB,IAAI,EAC5C,OAAAD,EAAoBS,EAAK,IAAMC,EAAS,OAAQ,EAG9Cb,EAAC,OAAI,IAAKa,EAAU,UAAWN,EAAGI,CAAS,EACzC,SAAAX,EAAC,OACE,SAAAU,GAAM,aAAa,IAAI,CAACI,EAAWC,IAClCf,EAACgB,EAAA,CAAoB,KAAMF,GAAbC,CAAmB,CAClC,EACH,EACF,CAEJ,CAAC,EAEDN,EAAI,YAAc,MAElB,MAAMO,EAAU,CAAC,CAAE,KAAAN,CAAK,IAA0B,CAChD,KAAM,CAACO,EAAMC,CAAO,EAAIb,EAAS,EAAK,EAMtC,OACEL,EAAC,OAAI,UAAU,6CACb,SAAAC,EAAC,OACC,UAAAA,EAAC,OACC,QARa,IAAM,CACzBiB,EAAQ,CAACD,CAAI,CACf,EAOQ,UAAU,4EAEV,UAAAjB,EAACM,EAAA,CACC,KAAMI,GAAM,MACZ,UAAU,yFACZ,EACAV,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OACC,MAAM,6BACN,UAAWO,EAAG,6CAA8CU,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAjB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,EAGAA,EAAC,OACC,UAAWO,EACT,8CACAU,EAAO,iCAAmC,mBAC5C,EAEA,SAAAjB,EAACM,EAAA,CACC,KAAMI,GAAM,KACZ,UAAU,2FACZ,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOG,EAAQX,EAAWC,CAAG",
6
- "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Text", "cn", "withLayout", "Faq", "data", "className", "ref", "innerRef", "item", "index", "FaqItem", "open", "setOpen", "Faq_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(({ data, className }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n return (\n <div ref={innerRef} className={cn(className)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} />\n ))}\n </div>\n </div>\n )\n})\n\nFaq.displayName = 'Faq'\n\nconst FaqItem = ({ data }: { data: ItemType }) => {\n const [open, setOpen] = useState(false)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className=\"tablet:py-6 border-b border-[#E4E5E6] py-4\">\n <div>\n <div\n onClick={handleToggle}\n className=\"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4\"\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className=\"desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]\"\n />\n <div className=\" transition-transform duration-300\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0'\n )}\n >\n <Text\n html={data?.desc}\n className=\"desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]\"\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
5
+ "mappings": "aAeU,cAAAA,EAmBF,QAAAC,MAnBE,oBAdV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,QAAAC,EAAM,WAAAC,MAAe,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMR,EAAM,WAAqC,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnF,MAAMC,EAAWV,EAAuB,IAAI,EAC5C,OAAAD,EAAoBU,EAAK,IAAMC,EAAS,OAAQ,EAG9Cd,EAAC,OAAI,IAAKc,EAAU,UAAWN,EAAGI,CAAS,EACzC,SAAAZ,EAAC,OACE,SAAAW,GAAM,aAAa,IAAI,CAACI,EAAWC,IAClChB,EAACiB,EAAA,CAAoB,KAAMF,GAAbC,CAAmB,CAClC,EACH,EACF,CAEJ,CAAC,EAEDN,EAAI,YAAc,MAElB,MAAMO,EAAU,CAAC,CAAE,KAAAN,CAAK,IAA0B,CAChD,KAAM,CAACO,EAAMC,CAAO,EAAId,EAAS,EAAK,EAMtC,OACEL,EAAC,OAAI,UAAU,6CACb,SAAAC,EAAC,OACC,UAAAA,EAAC,OACC,QARa,IAAM,CACzBkB,EAAQ,CAACD,CAAI,CACf,EAOQ,UAAU,4EAEV,UAAAlB,EAACO,EAAA,CACC,GAAG,KACH,KAAMI,GAAM,MACZ,UAAU,yFACZ,EACAX,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OACC,MAAM,6BACN,UAAWQ,EAAG,6CAA8CU,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAlB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,EAGAA,EAAC,OACC,UAAWQ,EACT,8CACAU,EAAO,iCAAmC,mBAC5C,EAEA,SAAAlB,EAACM,EAAA,CACC,KAAMK,GAAM,KACZ,UAAU,2FACZ,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOG,EAAQX,EAAWC,CAAG",
6
+ "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Text", "Heading", "cn", "withLayout", "Faq", "data", "className", "ref", "innerRef", "item", "index", "FaqItem", "open", "setOpen", "Faq_default"]
7
7
  }
package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import q,{useImperativeHandle as oe,useRef as x,useState as re,useEffect as le}from"react";import h from"gsap";import{ScrollTrigger as y}from"gsap/dist/ScrollTrigger";import{useMediaQuery as A}from"react-responsive";import{useInView as se}from"react-intersection-observer";import ne from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as C,Picture as Q,Text as ie}from"../../components/index.js";import pe from"./Countdown.js";import{cn as p}from"../../helpers/index.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as ue}from"../../hooks/useExposure.js";import{trackUrlRef as V}from"../../shared/trackUrlRef.js";import{sizeMap as me}from"../../components/button.js";import{VideoModal as de}from"../VideoModal/index.js";const l="image",s="hero_banner",ge=({size:m="base"})=>{const{width:v,height:w}=me[m];return e("svg",{width:v,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Z=q.forwardRef(({data:m,className:v,onSecondaryClick:w,onPrimaryClick:G},J)=>{const{label:I,title:a,subtitle:o,endDate:P,endDate_tz:K,dateFormat:O,pcImage:k,padImage:R,mobileImage:f,pcVideo:W,padVideo:X,mobileVideo:S,isShowVideo:Y,primaryButton:n,secondaryButton:t,theme:ee="light",size:N="default",titleSize:M,caption:$=[],blockLink:L,iconArray:te}=m,D=A({query:"(max-width: 768px)"}),E=A({query:"(max-width: 1024px)"}),[U,_]=re(!1),{ref:ae,inView:j}=se(),B=x(null),T=x(null),z=x(null),d=x(null),i=x(null);return ue(i,{componentType:l,componentName:s,componentTitle:a,componentDescription:o}),oe(J,()=>i.current),le(()=>{h.registerPlugin(y);function r(){if(!d.current)return;const u=i.current?.clientHeight||100;window.innerHeight<=u?B.current=y.create({trigger:i.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*40-20;h.set(d.current,{yPercent:b})}}):(z.current=y.create({trigger:i.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:g=>{const b=g.progress*20-20;h.set(d.current,{yPercent:b})}}),T.current=y.create({trigger:i.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*20;h.set(d.current,{yPercent:b})}}))}return j&&r(),()=>{B.current&&B.current.kill(),z.current&&z.current.kill(),T.current&&T.current.kill()}},[j]),e("div",{ref:ae,"data-ui-component-id":"HeroBanner",children:c("div",{ref:i,className:p(ee==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},v),children:[L&&e("a",{className:"absolute inset-0 z-10",href:V(L,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}`,tabIndex:-1,"aria-hidden":"true","aria-label":a}),e("div",{ref:d,className:p("absolute left-0 top-0 size-full"),children:Y?e(ne,{poster:D?f?.url:E?R?.url||f?.url:k?.url,src:D?S?.url:E?X?.url||S?.url:W?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(Q,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${R?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),c("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[c("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[I&&e(C,{as:"h3",className:p("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:I}),a&&e(C,{as:"h2",html:a,className:p("hero-banner-title"),size:M?Number(M||"5"):N==="sm"?4:5}),o&&e(C,{as:"h3",className:p("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:o}),P&&e("div",{className:"mt-3",children:e(pe,{endDate:P,endDate_tz:K,dateFormat:O})})]}),c("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[t?.isShowPlayVideoButton&&t?.playVideoButtonText?c(H,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}#${t?.playVideoButtonText}`,children:[t?.playVideoButtonText," ",e(ge,{size:"lg"})]}):t?.text?c(H,{"aria-label":a??o,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:t?.isCustomSecondaryButton?"button":"a",href:V(t?.link,`${l}_${s}`),onClick:r=>t?.isCustomSecondaryButton&&w?.(m,r),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}#${t?.text}`,children:[t?.text,e("span",{className:"sr-only",children:a??o})]}):null,n&&n.text&&e(H,{"aria-label":a??o,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:n?.isCustomPrimaryButton?"button":"a",href:V(n.link,`${l}_${s}`),onClick:r=>n?.isCustomPrimaryButton&&G?.(m,r),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}#${n?.text}`,children:n.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:te?.map((r,u)=>e("div",{className:"h-12",children:e(Q,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:r?.pcImage?.alt||"",source:r?.pcImage?.url})},u))})]}),$.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:$.map((r,u)=>c(q.Fragment,{children:[e(ie,{size:2,className:p("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:r.title}),u<$.length-1&&e("div",{className:p("bg-info-primary w-px")})]},u))}),U&&e(de,{visible:U,videoUrl:t?.videoUrl?.url,youTubeId:t?.youtubeId,onCloseModal:()=>_(!1)})]})})});Z.displayName="HeroBanner";var Ve=ce(Z);export{Ve as default};
1
+ "use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import q,{useImperativeHandle as oe,useRef as x,useState as re,useEffect as le}from"react";import h from"gsap";import{ScrollTrigger as y}from"gsap/dist/ScrollTrigger";import{useMediaQuery as A}from"react-responsive";import{useInView as se}from"react-intersection-observer";import ne from"../../helpers/ScrollLoadVideo.js";import{Button as C,Heading as V,Picture as Q,Text as ie}from"../../components/index.js";import pe from"./Countdown.js";import{cn as p}from"../../helpers/index.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as ue}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as me}from"../../components/button.js";import{VideoModal as de}from"../VideoModal/index.js";const l="image",s="hero_banner",ge=({size:m="base"})=>{const{width:v,height:w}=me[m];return e("svg",{width:v,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Z=q.forwardRef(({data:m,className:v,onSecondaryClick:w,onPrimaryClick:G},J)=>{const{label:P,title:a,subtitle:o,endDate:R,endDate_tz:K,dateFormat:O,pcImage:k,padImage:S,mobileImage:f,pcVideo:W,padVideo:X,mobileVideo:M,isShowVideo:Y,primaryButton:n,secondaryButton:t,theme:ee="light",size:N="default",titleSize:$,caption:B=[],blockLink:L,iconArray:te}=m,D=A({query:"(max-width: 768px)"}),E=A({query:"(max-width: 1024px)"}),[U,_]=re(!1),{ref:ae,inView:j}=se(),T=x(null),z=x(null),H=x(null),d=x(null),i=x(null);return ue(i,{componentType:l,componentName:s,componentTitle:a,componentDescription:o}),oe(J,()=>i.current),le(()=>{h.registerPlugin(y);function r(){if(!d.current)return;const u=i.current?.clientHeight||100;window.innerHeight<=u?T.current=y.create({trigger:i.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*40-20;h.set(d.current,{yPercent:b})}}):(H.current=y.create({trigger:i.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:g=>{const b=g.progress*20-20;h.set(d.current,{yPercent:b})}}),z.current=y.create({trigger:i.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*20;h.set(d.current,{yPercent:b})}}))}return j&&r(),()=>{T.current&&T.current.kill(),H.current&&H.current.kill(),z.current&&z.current.kill()}},[j]),e("div",{ref:ae,"data-ui-component-id":"HeroBanner",children:c("div",{ref:i,className:p(ee==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},v),children:[L&&e("a",{className:"absolute inset-0 z-10",href:I(L,`${l}_${s}`),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}`,tabIndex:-1,"aria-hidden":"true","aria-label":a}),e("div",{ref:d,className:p("absolute left-0 top-0 size-full"),children:Y?e(ne,{poster:D?f?.url:E?S?.url||f?.url:k?.url,src:D?M?.url:E?X?.url||M?.url:W?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(Q,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${S?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),c("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[c("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[P&&e(V,{as:"h3",className:p("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:P}),a&&e(V,{as:$==="4"?"h1":"h2",html:a,className:p("hero-banner-title"),size:$?Number($||"5"):N==="sm"?4:5}),o&&e(V,{as:"h3",className:p("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:o}),R&&e("div",{className:"mt-3",children:e(pe,{endDate:R,endDate_tz:K,dateFormat:O})})]}),c("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[t?.isShowPlayVideoButton&&t?.playVideoButtonText?c(C,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}#${t?.playVideoButtonText}`,children:[t?.playVideoButtonText," ",e(ge,{size:"lg"})]}):t?.text?c(C,{"aria-label":a??o,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:t?.isCustomSecondaryButton?"button":"a",href:I(t?.link,`${l}_${s}`),onClick:r=>t?.isCustomSecondaryButton&&w?.(m,r),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}#${t?.text}`,children:[t?.text,e("span",{className:"sr-only",children:a??o})]}):null,n&&n.text&&e(C,{"aria-label":a??o,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:n?.isCustomPrimaryButton?"button":"a",href:I(n.link,`${l}_${s}`),onClick:r=>n?.isCustomPrimaryButton&&G?.(m,r),"data-headless-type-name":`${l}#${s}`,"data-headless-title-desc-button":`${a}#${o}#${n?.text}`,children:n.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:te?.map((r,u)=>e("div",{className:"h-12",children:e(Q,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:r?.pcImage?.alt||"",source:r?.pcImage?.url})},u))})]}),B.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:B.map((r,u)=>c(q.Fragment,{children:[e(ie,{size:2,className:p("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:r.title}),u<B.length-1&&e("div",{className:p("bg-info-primary w-px")})]},u))}),U&&e(de,{visible:U,videoUrl:t?.videoUrl?.url,youTubeId:t?.youtubeId,onCloseModal:()=>_(!1)})]})})});Z.displayName="HeroBanner";var Ve=ce(Z);export{Ve as default};
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.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 { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ data, className, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n className={cn('hero-banner-title')}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\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 { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ data, className, onSecondaryClick, onPrimaryClick }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title')}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "index", "c", "HeroBanner_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.37",
3
+ "version": "1.1.38",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",