@anker-in/headless-ui 0.0.27-alpha.98 → 0.0.27

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as n,jsx as e,jsxs as r}from"react/jsx-runtime";import"react";import m from"../Title/index.js";import{cn as i}from"../../helpers/utils.js";import p from"../../components/picture.js";import c from"../SwiperBox/index.js";import{withStyles as f}from"../../shared/Styles.js";import{Avatar as v,AvatarImage as u,AvatarFallback as g}from"../../components/avatar.js";const w=({data:t,configuration:s})=>{const o=l=>l?Array.from(new Array(Number(l)))||[]:[];return r("div",{className:i("box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",s?.shape==="round"?"rounded-2xl":"rounded-none","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]"),children:[r("div",{className:i("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[r("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:o(t?.rating)?.map?.((l,a)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},a))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e(v,{className:"size-full",isAdaptation:!t?.avatar?.url,children:t?.avatar?.url?r(n,{children:[e(u,{src:t?.avatar?.url}),e(g,{children:t?.title})]}):t?.title})})]}),e("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:t?.description||""}),r("div",{className:i("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",s?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(p,{className:"w-full object-cover",source:t?.img?.url})}),e("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:t?.subTitle||""})]})]})},x=({className:t="",data:s,key:o})=>{const{products:l,title:a,...d}=s;return e(n,{children:r("div",{className:i("w-full",t),children:[a&&e(m,{data:{title:a}}),e(c,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:l,configuration:{...d}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})};var L=f(x);export{L as default};
+"use client";import{Fragment as A,jsx as e,jsxs as i}from"react/jsx-runtime";import u,{useImperativeHandle as w,useRef as x}from"react";import h from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import b from"../../components/picture.js";import g from"../SwiperBox/index.js";import{useMediaQuery as k}from"react-responsive";import{withStyles as N}from"../../shared/Styles.js";import{Avatar as y,AvatarImage as C,AvatarFallback as L}from"../../components/avatar.js";import{Container as E}from"../../components/container.js";import{useExposure as P}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const m="copy",c="product_review",T=({data:t,configuration:r})=>{const o=k({query:"(max-width: 768px)"}),d=s=>s?Array.from(new Array(Number(s)))||[]:[];return e("div",{className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":o}),children:i("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[i("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[i("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:d(t?.rating)?.map?.((s,l)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e(y,{className:"size-full",isAdaptation:!t?.avatar?.url,children:t?.avatar?.url?i(A,{children:[e(C,{src:t?.avatar?.url}),e(L,{children:t?.title})]}):t?.title})})]}),e("div",{className:"flex-1",children:e("p",{className:a("desktop:max-h-[151px] tablet:max-h-[140px]","desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold"),children:t?.description||""})}),e("a",{href:M(t?.link,`${m}_${c}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:i("div",{className:a("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(b,{className:"w-full object-cover",source:t?.img?.url})}),e("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:t?.subTitle||""})]})})]})})},B=u.forwardRef(({className:t="",data:r,key:o,...d},s)=>{const{products:l,title:n,theme:v,...f}=r,p=x(null);return w(s,()=>p.current),P(p,{componentType:m,componentName:c,componentTitle:n}),e("div",{className:t,ref:p,children:e("div",{className:"evaluate-box",children:e(E,{...r?.containerProps||{},className:"overflow-hidden",children:i("div",{ref:s,className:a("w-full",t,{"aiui-dark":v==="dark"}),children:[n&&e(h,{data:{title:n}}),e(g,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:l,configuration:{...f}},Slide:T,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var $=N(B);export{$ as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: {\n    url: string\n  }\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n}\n\nexport interface EvaluateProps {\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'box-border flex w-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]'\n      )}\n    >\n      <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n        <div className=\"flex-1\">\n          <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n          <div className=\"mt-1 flex items-center\">\n            {handleRating(data?.rating)?.map?.((_, index) => {\n              return (\n                <div key={index} className=\"mr-1\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path\n                      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n                      fill=\"#F77234\"\n                    />\n                  </svg>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n        <div className=\"desktop:size-12 size-10 overflow-hidden\">\n          <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n            {data?.avatar?.url ? (\n              <>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </>\n            ) : (\n              data?.title\n            )}\n          </Avatar>\n        </div>\n      </div>\n      <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n      <div\n        className={cn(\n          'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n          configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n        )}\n      >\n        <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n          <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n        </div>\n        <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key }) => {\n  const { products, title, ...ohter } = data\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        {title && <Title data={{ title: title }} />}\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'Evaluate' + key}\n          data={{ list: products, configuration: { ...ohter } }}\n          Slide={EvaluateItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3.1,\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withStyles(Evaluate)\n"],
-  "mappings": "aAqDQ,OAoBM,YAAAA,EAnBJ,OAAAC,EADF,QAAAC,MAAA,oBApDR,MAAkB,QAClB,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BA6BpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEb,EAAC,OACC,UAAWE,EACT,kHACAS,GAAe,QAAU,QAAU,cAAgB,eACnD,kDACF,EAEA,UAAAX,EAAC,OAAI,UAAWE,EAAG,6DAA6D,EAC9E,UAAAF,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,mCAAoC,SAAAW,GAAM,MAAM,EAC9DX,EAAC,OAAI,UAAU,yBACZ,SAAAa,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,IAEnChB,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQgB,CAOV,CAEH,EACH,GACF,EACAhB,EAAC,OAAI,UAAU,0CACb,SAAAA,EAACO,EAAA,CAAO,UAAU,YAAY,aAAc,CAACI,GAAM,QAAQ,IACxD,SAAAA,GAAM,QAAQ,IACbV,EAAAF,EAAA,CACE,UAAAC,EAACQ,EAAA,CAAY,IAAKG,GAAM,QAAQ,IAAK,EACrCX,EAACS,EAAA,CAAgB,SAAAE,GAAM,MAAM,GAC/B,EAEAA,GAAM,MAEV,EACF,GACF,EACAX,EAAC,KAAE,UAAU,wEAAyE,SAAAW,GAAM,aAAe,GAAG,EAC9GV,EAAC,OACC,UAAWE,EACT,2DACAS,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,UAAAZ,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACI,EAAA,CAAQ,UAAU,sBAAsB,OAAQO,GAAM,KAAK,IAAK,EACnE,EACAX,EAAC,KAAE,UAAU,2DAA4D,SAAAW,GAAM,UAAY,GAAG,GAChG,GACF,CAEJ,EAEMM,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAP,EAAM,IAAAQ,CAAI,IAAM,CAC3E,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAM,EAAIX,EACtC,OACEX,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAWE,EAAG,SAAUe,CAAS,EACnC,UAAAG,GAASrB,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOmB,CAAM,EAAG,EACzCrB,EAACK,EAAA,CACC,UAAU,oBACV,GAAI,WAAac,EACjB,KAAM,CAAE,KAAMC,EAAU,cAAe,CAAE,GAAGE,CAAM,CAAE,EACpD,MAAOZ,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,CAEJ,EAEA,IAAOa,EAAQjB,EAAWW,CAAQ",
-  "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "SwiperBox", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "products", "title", "ohter", "Evaluate_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: {\n    url: string\n  }\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: Theme\n    containerProps?: ContainerProps\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        {\n          'h-[360px]': isMobile,\n        }\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n        <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n          <div className=\"flex-1\">\n            <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n            <div className=\"mt-1 flex items-center\">\n              {handleRating(data?.rating)?.map?.((_, index) => {\n                return (\n                  <div key={index} className=\"mr-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                      <path\n                        d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n                        fill=\"#F77234\"\n                      />\n                    </svg>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n          <div className=\"desktop:size-12 size-10 overflow-hidden\">\n            <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n              {data?.avatar?.url ? (\n                <>\n                  <AvatarImage src={data?.avatar?.url} />\n                  <AvatarFallback>{data?.title}</AvatarFallback>\n                </>\n              ) : (\n                data?.title\n              )}\n            </Avatar>\n          </div>\n        </div>\n        <div className=\"flex-1\">\n          <p\n            className={cn(\n              'desktop:max-h-[151px] tablet:max-h-[140px]',\n              'desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold'\n            )}\n          >\n            {data?.description || ''}\n          </p>\n        </div>\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          onClick={() => {\n            configuration?.event?.primaryButton(data, configuration?.index)\n          }}\n        >\n          <div\n            className={cn(\n              'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n              configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n            )}\n          >\n            <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n              <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n            </div>\n            <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"evaluate-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n            {title && <Title data={{ title: title }} />}\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'Evaluate' + key}\n              data={{ list: products, configuration: { ...ohter } }}\n              Slide={EvaluateItem}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.1,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          </div>\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nexport default withStyles(Evaluate)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "useMediaQuery", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "Container", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "isMobile", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "Evaluate_default"]
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { ComponentCommonProps, Img } from '../../types/props.js';
+import type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js';
 type GraphicType = {
     imgUrl: Img;
     title: string;
     description?: string;
     textColor?: string;
+    link?: string;
 };
 export interface GraphicProps extends ComponentCommonProps {
     className?: string;
@@ -12,13 +13,11 @@ export interface GraphicProps extends ComponentCommonProps {
         title?: string;
         items?: GraphicType[];
         itemShape?: 'round' | 'square';
+        containerProps?: ContainerProps;
     };
 }
-declare const _default: {
-    (props: Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import p from"react";import{cn as r}from"../../helpers/utils.js";import{withStyles as a}from"../../shared/Styles.js";import n from"../SwiperBox/index.js";import{Heading as m}from"../../components/index.js";import{Picture as d,Text as c}from"../../components/index.js";import f from"../Title/index.js";const h=({data:e,configuration:i})=>t("div",{className:"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",children:o("div",{className:r("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:[t(d,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),o("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(c,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2"}),e?.description&&t(m,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),l=p.forwardRef(({data:e,className:i,...x},u)=>{const s=e?.items?.length>2;return o("div",{children:[e?.title&&t(f,{data:{title:e?.title}}),t(n,{className:r("!overflow-visible",i),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:s?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:s?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:s?4:2}}})]})});l.displayName="Graphic";var G=a(l);export{G as default};
+"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import d,{useImperativeHandle as h,useRef as f}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import u from"../SwiperBox/index.js";import{Heading as x}from"../../components/index.js";import{Picture as g,Text as k}from"../../components/index.js";import{Container as b}from"../../components/container.js";import v from"../Title/index.js";import{useMediaQuery as y}from"react-responsive";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";const c="image",n="graphic",C=({data:e,configuration:s})=>{const l=y({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346]  tablet:aspect-h-[360]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]"}})(),{"h-[360px]":l},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:i("a",{href:P(e?.link,`${c}_${n}`),className:"relative block size-full cursor-pointer",children:[t(g,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),i("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(k,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(x,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},m=d.forwardRef(({data:e,className:s,...l},r)=>{const p=e?.items?.length>2,o=f(null);return h(r,()=>o.current),N(o,{componentType:c,componentName:n,componentTitle:e?.title}),t("div",{className:s,ref:o,children:t("div",{className:"graphic-box",children:i(b,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(v,{data:{title:e?.title}}),t(u,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:p?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:p?3:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:p?4:2}}})]})})})});m.displayName="Graphic";var L=w(m);export{L as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div className=\"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]\">\n      <div\n        className={cn('relative h-full', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <SwiperBox\n        className={cn('!overflow-visible', className)}\n        id={'Graphic'}\n        data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n        Slide={Item}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 2.3 : 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 3.1 : 2,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 4 : 2,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "aAiCQ,cAAAA,EAKA,QAAAC,MALA,oBAhCR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAkBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCZ,EAAC,OAAI,UAAU,oFACb,SAAAC,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDS,GAAe,YAAc,OAClF,CAAC,EAED,UAAAZ,EAACO,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQI,GAAM,QAAQ,IACxB,EACAV,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACQ,EAAA,CACC,MAAO,CACL,MAAOG,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,0EACZ,EACCA,GAAM,aACLX,EAACM,EAAA,CACC,KAAMK,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAUX,EAAM,WAAyC,CAAC,CAAE,KAAAS,EAAM,UAAAG,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUN,GAAM,OAAyB,OAAS,EACxD,OACEV,EAAC,OACE,UAAAU,GAAM,OAASX,EAACS,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDX,EAACK,EAAA,CACC,UAAWF,EAAG,oBAAqBW,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMH,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeO,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDJ,EAAQ,YAAc,UAEtB,IAAOK,EAAQd,EAAWS,CAAO",
-  "names": ["jsx", "jsxs", "React", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Title", "Item", "data", "configuration", "Graphic", "className", "props", "ref", "isShow", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    containerProps?: ContainerProps\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346]  tablet:aspect-h-[360]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        {\n          'h-[360px]': isMobile,\n        },\n        'flex-1 shrink-0 md:basis-[296px]'\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n            <Text\n              style={{\n                color: data?.textColor,\n              }}\n              html={data?.title}\n              // eslint-disable-next-line tailwindcss/classnames-order\n              className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n            />\n            {data?.description && (\n              <Heading\n                html={data?.description}\n                style={{\n                  color: data?.textColor,\n                }}\n                as=\"h3\"\n                className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n              />\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          {data?.title && <Title data={{ title: data?.title }} />}\n          <SwiperBox\n            id=\"Graphic\"\n            className={cn('!overflow-visible')}\n            data={{\n              list: data?.items || [],\n              configuration: {\n                itemShape: data.itemShape,\n                num: data?.items?.length || 0,\n              },\n            }}\n            Slide={Item}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 2.3 : 2,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 3 : 2,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 4 : 2,\n              },\n            }}\n          />\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "Graphic_default"]
 }

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

@@ -17,12 +17,9 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
         attractionItems?: AttractionItem[];
     };
 }
-declare const _default: {
-    (props: Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export type { GraphicAttractionBlockProps };

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import h from"react";import{withStyles as u}from"../../shared/Styles.js";import p from"../../components/picture.js";import{Heading as v}from"../../components/heading.js";import{Text as a}from"../../components/text.js";import b from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";const k=h.forwardRef((s,c)=>{const{shape:r,imageUrlPc:m,imageUrlMob:n,sectionTitle:l,imageTitle:d,imageDescription:g,attractionItems:f}=s.data;return e("section",{ref:c,"data-ui-component-id":"GraphicAttractionBlock",className:o("text-info-primary relative",s.className),children:[l&&t(b,{data:{title:l}}),e("div",{className:o("tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden",{"rounded-box":r==="rounded"}),children:[t(p,{source:`${m?.url}, ${n?.url} 767`,className:"inset-0",imgClassName:"h-full object-cover"}),e("div",{className:"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4",children:[t(v,{as:"h3",className:"text-white",size:3,html:d}),t(a,{as:"p",className:"text-white",size:2,html:g})]})]}),t("div",{className:"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3",children:f?.map((i,x)=>e("div",{className:o("lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4",{"rounded-box":r==="rounded"}),children:[e("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t(a,{as:"p",className:"lg-desktop:text-[18px] tracking text-[14px] font-semibold",html:i.title}),t(p,{className:"lg-desktop:size-[36px] size-[30px] object-cover",source:i.icon?.url,alt:i.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t(a,{as:"p",className:"lg-desktop:text-[24px] tracking text-[20px] leading-tight",html:i.description})]},x))})]})});var I=u(k);export{I as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import h from"react";import{withStyles as u}from"../../shared/Styles.js";import p from"../../components/picture.js";import{Heading as k}from"../../components/heading.js";import{Text as a}from"../../components/text.js";import v from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";const b=h.forwardRef((s,c)=>{const{shape:r,imageUrlPc:m,imageUrlMob:n,sectionTitle:l,imageTitle:d,imageDescription:g,attractionItems:f}=s.data;return e("section",{ref:c,"data-ui-component-id":"GraphicAttractionBlock",className:o("text-info-primary relative",s.className),children:[l&&t(v,{data:{title:l}}),e("div",{className:o("tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden",{"rounded-box":r==="rounded"}),children:[t(p,{source:`${m?.url}, ${n?.url} 767`,className:"inset-0",imgClassName:"h-full object-cover"}),e("div",{className:"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4",children:[t(k,{as:"h3",className:"text-white",size:3,html:d}),t(a,{as:"p",className:"text-white",size:2,html:g})]})]}),t("div",{className:"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3",children:f?.map((i,x)=>e("div",{className:o("lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4",{"rounded-box":r==="rounded"}),children:[e("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t(a,{as:"p",className:"lg-desktop:text-[18px] tracking text-[14px] font-semibold",html:i.title}),t(p,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:i.icon?.url,alt:i.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t(a,{as:"p",className:"lg-desktop:text-[24px] tracking text-[20px] leading-tight",html:i.description})]},x))})]})});var I=u(b);export{I as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicAttractionBlock/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
-  "mappings": "AAqCuB,cAAAA,EAWf,QAAAC,MAXe,oBArCvB,OAAOC,MAAW,QAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAW,oBAElB,OAAS,MAAAC,MAAU,yBAqBnB,MAAMC,EAAyBP,EAAM,WAAwD,CAACQ,EAAOC,IAAQ,CAC3G,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,iBAAAC,EAAkB,gBAAAC,CAAgB,EAAIR,EAAM,KAE9G,OACET,EAAC,WACC,IAAKU,EACL,uBAAqB,yBACrB,UAAWH,EAAG,6BAA8BE,EAAM,SAAS,EAE1D,UAAAK,GAAgBf,EAACO,EAAA,CAAM,KAAM,CAAE,MAAOQ,CAAa,EAAG,EACvDd,EAAC,OACC,UAAWO,EAAG,4EAA6E,CACzF,cAAeI,IAAU,SAC3B,CAAC,EAED,UAAAZ,EAACI,EAAA,CACC,OAAQ,GAAGS,GAAY,GAAG,KAAKC,GAAa,GAAG,OAC/C,UAAU,UACV,aAAa,sBACf,EACAb,EAAC,OAAI,UAAU,sEACb,UAAAD,EAACK,EAAA,CAAQ,GAAG,KAAK,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAY,EACnEhB,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAkB,GACvE,GACF,EACAjB,EAAC,OAAI,UAAU,+EACZ,SAAAkB,GAAiB,IAAI,CAACC,EAAMC,IAC3BnB,EAAC,OAEC,UAAWO,EACT,8FACA,CAAE,cAAeI,IAAU,SAAU,CACvC,EAEA,UAAAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMa,EAAK,MAAO,EACrGnB,EAACI,EAAA,CACC,UAAU,kDACV,OAAQe,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,EACAnB,EAACM,EAAA,CACC,GAAG,IACH,UAAU,4DACV,KAAMa,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CAAC,EACD,IAAOC,EAAQlB,EAAWM,CAAsB",
+  "sourcesContent": ["import React from 'react'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
+  "mappings": "AAqCuB,cAAAA,EAWf,QAAAC,MAXe,oBArCvB,OAAOC,MAAW,QAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAW,oBAElB,OAAS,MAAAC,MAAU,yBAqBnB,MAAMC,EAAyBP,EAAM,WAAwD,CAACQ,EAAOC,IAAQ,CAC3G,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,iBAAAC,EAAkB,gBAAAC,CAAgB,EAAIR,EAAM,KAE9G,OACET,EAAC,WACC,IAAKU,EACL,uBAAqB,yBACrB,UAAWH,EAAG,6BAA8BE,EAAM,SAAS,EAE1D,UAAAK,GAAgBf,EAACO,EAAA,CAAM,KAAM,CAAE,MAAOQ,CAAa,EAAG,EACvDd,EAAC,OACC,UAAWO,EAAG,4EAA6E,CACzF,cAAeI,IAAU,SAC3B,CAAC,EAED,UAAAZ,EAACI,EAAA,CACC,OAAQ,GAAGS,GAAY,GAAG,KAAKC,GAAa,GAAG,OAC/C,UAAU,UACV,aAAa,sBACf,EACAb,EAAC,OAAI,UAAU,sEACb,UAAAD,EAACK,EAAA,CAAQ,GAAG,KAAK,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAY,EACnEhB,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAkB,GACvE,GACF,EACAjB,EAAC,OAAI,UAAU,+EACZ,SAAAkB,GAAiB,IAAI,CAACC,EAAMC,IAC3BnB,EAAC,OAEC,UAAWO,EACT,8FACA,CAAE,cAAeI,IAAU,SAAU,CACvC,EAEA,UAAAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMa,EAAK,MAAO,EACrGnB,EAACI,EAAA,CACC,UAAU,2DACV,OAAQe,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,EACAnB,EAACM,EAAA,CACC,GAAG,IACH,UAAU,4DACV,KAAMa,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CAAC,EACD,IAAOC,EAAQlB,EAAWM,CAAsB",
   "names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Heading", "Text", "Title", "cn", "GraphicAttractionBlock", "props", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "item", "index", "GraphicAttractionBlock_default"]
 }

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import type { HeroBannerProps } from './types.js';
-declare const _default: {
-    (props: Omit<HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import b,{useRef as f}from"react";import{useGSAP as z}from"@gsap/react";import g from"gsap";import{ScrollTrigger as l}from"gsap/dist/ScrollTrigger";import{Button as h,Heading as R,Picture as T,Text as v}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as E}from"../../shared/Styles.js";const y=b.forwardRef(({data:k,className:N},I)=>{const{title:u,subtitle:H,pcImage:w,mobileImage:B,primaryButton:n,secondaryButton:i,theme:P="light",caption:c=[]}=k,r=f(null),o=f(null);return z(()=>{if(!r.current)return;const m=o.current?.clientHeight||100;return window.innerHeight<=m?l.create({trigger:o.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:e=>{const p=e.progress*40-20;g.set(r.current,{yPercent:p})}}):(l.create({trigger:o.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:e=>{const p=e.progress*20-20;g.set(r.current,{yPercent:p})}}),l.create({trigger:o.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:e=>{const p=e.progress*20;g.set(r.current,{yPercent:p})}})),()=>{l.getAll().forEach(e=>e.kill())}},[]),s("div",{ref:o,"data-ui-component-id":"HeroBanner",className:a(P==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",N),children:[t("div",{ref:r,className:a("absolute left-0 top-0 size-full"),children:t(T,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${w.url||""} , ${B.url||""} 767`})}),s("div",{className:"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] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[u&&s("div",{className:"laptop:text-left max-w-[686px]",children:[t(R,{as:"h1",size:5,className:a("hero-banner-title"),html:u}),t(v,{as:"p",className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:H})]}),s("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[i&&i.text&&t(h,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text}),n&&n.text&&t(h,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:n.text})]})]}),c.length>0&&t("div",{className:"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((m,x)=>s(b.Fragment,{children:[t(v,{className:a("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:m.title}),x<c.length-1&&t("div",{className:a("bg-info-primary w-px")})]},x))})]})});y.displayName="HeroBanner";var F=E(y);export{F as default};
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:z},P)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(P,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:a=>{const p=a.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(a=>a.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:r(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",z),children:[e("div",{ref:o,className:r("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"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:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:r("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.length>0&&e("div",{className:"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:g.map((x,d)=>n(v.Fragment,{children:[e(H,{size:3,className:r("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:x.title}),d<g.length-1&&e("div",{className:r("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
 //# sourceMappingURL=HeroBanner.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\n// eslint-disable-next-line no-unused-vars\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useGSAP(() => {\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      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      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      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    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={`${pcImage.url || ''} , ${mobileImage.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"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] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"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                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\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    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\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  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      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      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      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    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"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={3}\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\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    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
 }

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

@@ -11,10 +11,12 @@ export interface HeroBannerProps {
         /** 主按钮文本和配置 */
         primaryButton?: {
             text: string;
+            link?: string;
         } & Omit<ButtonProps, 'children'>;
         /** 次要按钮文本和配置 */
         secondaryButton?: {
             text: string;
+            link?: string;
         } & Omit<ButtonProps, 'children'>;
         /** 主题 */
         theme?: Theme;

package/dist/esm/biz-components/Marquee/Marquee.d.ts

@@ -10,12 +10,9 @@ declare const MarqueeImageContent: {
     displayName: string;
 };
 declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: {
-    (props: Omit<MarqueeProps & React.RefAttributes<SwiperRef>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MarqueeProps & React.RefAttributes<SwiperRef>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export { MarqueeItem, MarqueeImageContent, MarqueeTextContent };

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as q,jsx as r,jsxs as y}from"react/jsx-runtime";import m from"react";import{Picture as c,Text as f}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Swiper as w,SwiperSlide as x}from"swiper/react";import{Autoplay as M}from"swiper/modules";const n=m.forwardRef(({data:e,className:t},a)=>r(w,{direction:"horizontal",className:s("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:a,id:"Marquee"+e?.key,modules:[M],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((l,u)=>r(x,{children:r(o,{data:l})},l?.id+"SwiperSlide"+u))}));n.displayName="Marquee";const o=({data:e,configuration:t})=>y(q,{children:[e.type==="image"&&r(i,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&r(p,{text:e?.text,textClassName:t?.textClassName})]});o.displayName="MarqueeItem";const i=({image:e,imageClassName:t})=>r("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:r(c,{source:e?.url,alt:e?.alt||"",imgClassName:s("object-cover",t)})});i.displayName="MarqueeImageContent";const p=m.forwardRef(({text:e,textClassName:t},a)=>r(f,{as:"div",ref:a,html:e,className:s("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));p.displayName="MarqueeTextContent";var h=d(n);export{i as MarqueeImageContent,o as MarqueeItem,p as MarqueeTextContent,h as default};
+"use client";import{Fragment as g,jsx as r,jsxs as v}from"react/jsx-runtime";import l,{useImperativeHandle as f,useRef as w}from"react";import{Picture as d,Text as x}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withStyles as M}from"../../shared/Styles.js";import{Swiper as y,SwiperSlide as q}from"swiper/react";import{Autoplay as N}from"swiper/modules";import{useExposure as S}from"../../hooks/useExposure.js";const C="image",R="marquee",u=l.forwardRef(({data:e,className:t},a)=>{const o=w(null);return f(a,()=>o.current),S(o,{componentType:C,componentName:R}),r(y,{direction:"horizontal",className:s("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:o,id:"Marquee"+e?.key,modules:[N],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((m,c)=>r(q,{children:r(p,{data:m})},m?.id+"SwiperSlide"+c))})});u.displayName="Marquee";const p=({data:e,configuration:t})=>v(g,{children:[e.type==="image"&&r(i,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&r(n,{text:e?.text,textClassName:t?.textClassName})]});p.displayName="MarqueeItem";const i=({image:e,imageClassName:t})=>r("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:r(d,{source:e?.url,alt:e?.alt||"",imgClassName:s("object-cover",t)})});i.displayName="MarqueeImageContent";const n=l.forwardRef(({text:e,textClassName:t},a)=>r(x,{as:"div",ref:a,html:e,className:s("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));n.displayName="MarqueeTextContent";var D=M(u);export{i as MarqueeImageContent,p as MarqueeItem,n as MarqueeTextContent,D as default};
 //# sourceMappingURL=Marquee.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={ref}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
-  "mappings": "aA0CU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBAzCV,OAAOC,MAAW,QAClB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,YAAAC,MAAgB,iBAEzB,MAAMC,EAAUR,EAAM,WAAoC,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAE5Eb,EAACO,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAO,CACF,EACA,IAAKC,EACL,GAAI,UAAYF,GAAM,IACtB,QAAS,CAACF,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBE,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACG,EAAMC,IACvBf,EAACQ,EAAA,CACC,SAAAR,EAACgB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEH,EACDL,EAAQ,YAAc,UAEtB,MAAMM,EAAc,CAAC,CAAE,KAAAL,EAAM,cAAAM,CAAc,IAEvChB,EAAAF,EAAA,CACG,UAAAY,EAAK,OAAS,SACbX,EAACkB,EAAA,CAAoB,MAAOP,GAAM,MAAO,eAAgBM,GAAe,eAAgB,EAEzFN,EAAK,OAAS,QAAUX,EAACmB,EAAA,CAAmB,KAAMR,GAAM,KAAM,cAAeM,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjDrB,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACG,EAAA,CAAQ,OAAQiB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcf,EAAG,eAAgBgB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBjB,EAAM,WAAoD,CAAC,CAAE,KAAAoB,EAAM,cAAAC,CAAc,EAAGV,IAE3Gb,EAACI,EAAA,CACC,GAAG,MACH,IAAKS,EACL,KAAMS,EACN,UAAWjB,EAAG,oFAAqFkB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQlB,EAAWI,CAAO",
-  "names": ["Fragment", "jsx", "jsxs", "React", "Picture", "Text", "cn", "withStyles", "Swiper", "SwiperSlide", "Autoplay", "Marquee", "data", "className", "ref", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  const innerRef = useRef<SwiperRef>(null)\n  useImperativeHandle(ref, () => innerRef.current as SwiperRef)\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n  })\n\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={innerRef}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
+  "mappings": "aAsDU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBArDV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAA8B,QACnE,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,YAAAC,MAAgB,iBACzB,OAAS,eAAAC,MAAmB,6BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAUb,EAAM,WAAoC,CAAC,CAAE,KAAAc,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,EAAWf,EAAkB,IAAI,EACvC,OAAAD,EAAoBe,EAAK,IAAMC,EAAS,OAAoB,EAE5DP,EAAYO,EAAkD,CAC5D,cAAeN,EACf,cAAeC,CACjB,CAAC,EAGCd,EAACS,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAU,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAACL,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBK,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACI,EAAMC,IACvBrB,EAACU,EAAA,CACC,SAAAV,EAACsB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDN,EAAQ,YAAc,UAEtB,MAAMO,EAAc,CAAC,CAAE,KAAAN,EAAM,cAAAO,CAAc,IAEvCtB,EAAAF,EAAA,CACG,UAAAiB,EAAK,OAAS,SACbhB,EAACwB,EAAA,CAAoB,MAAOR,GAAM,MAAO,eAAgBO,GAAe,eAAgB,EAEzFP,EAAK,OAAS,QAAUhB,EAACyB,EAAA,CAAmB,KAAMT,GAAM,KAAM,cAAeO,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjD3B,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACK,EAAA,CAAQ,OAAQqB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcnB,EAAG,eAAgBoB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBvB,EAAM,WAAoD,CAAC,CAAE,KAAA0B,EAAM,cAAAC,CAAc,EAAGX,IAE3GlB,EAACM,EAAA,CACC,GAAG,MACH,IAAKY,EACL,KAAMU,EACN,UAAWrB,EAAG,oFAAqFsB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQtB,EAAWO,CAAO",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withStyles", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
 }

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

@@ -1,9 +1,7 @@
+import React from 'react';
 import type { MediaPlayerBaseProps } from './types.js';
-declare const _default: {
-    (props: Omit<MediaPlayerBaseProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as R,useRef as f,useEffect as z}from"react";import{useGSAP as S}from"@gsap/react";import{gsap as _}from"gsap";import{ScrollTrigger as h}from"gsap/dist/ScrollTrigger";import{cn as y}from"../../helpers/utils.js";import{withStyles as B}from"../../shared/Styles.js";import E from"../../components/picture.js";import I from"../../components/button.js";import{convertLexicalToHTML as x}from"@payloadcms/richtext-lexical/html";import{Right as T}from"./right.js";import{useInView as j}from"react-intersection-observer";const C=({className:b="",data:{title:s,videoTitle:o,btnText:n,img:i,video:w,theme:k,shape:N}})=>{const[r,l]=R(!1),t=f(null),p=f(null),a=f(null),{ref:H,inView:m}=j(),d=typeof s=="string"?s:s&&x({data:s}),g=typeof o=="string"?o:o&&x({data:o});return z(()=>{m&&!n?(t.current?.play(),l(!0)):(t.current?.pause(),l(!1))},[m]),S(()=>{if(!a.current)return;const M=p.current?.clientHeight||100,v=a.current?.clientHeight||100,P=v+M;return h.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:u=>{const L=u.progress*P-v;_.set(a.current,{y:L})}}),()=>{h.getAll().forEach(u=>u.kill())}},[]),c("div",{ref:p,className:y(" relative w-full overflow-hidden"," lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",b,{"aiui-dark":k==="dark","rounded-box":N==="rounded"}),children:[e("div",{children:c("div",{ref:H,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[d&&!r&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:d}}),g&&r&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),!r&&n&&c(I,{variant:"link",className:y("member-equity-button-secondary"),onClick:()=>{r?(t.current&&t.current.pause(),l(!1)):(t.current&&t.current.play(),l(!0))},children:[n,e(T,{})]})]})}),e("div",{children:c("div",{ref:a,className:"media-cover sticky left-0 top-0 h-screen w-screen",children:[e("video",{ref:t,className:"size-full object-cover",src:w?.url,muted:!0,loop:!0}),!r&&i?.url&&e(E,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:i?.url,alt:i?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})};var X=B(C);export{X as default};
+"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as x,useRef as h,useEffect as L,forwardRef as D,useImperativeHandle as F}from"react";import{debounce as Y}from"lodash";import{cn as d}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import"../../components/picture.js";import q from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as O}from"react-intersection-observer";const T=({defaultConverters:m})=>({...m,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),A=D(({className:m="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:u,img:J,video:N,theme:P,shape:E,...R}},z)=>{const{sticky:r}=R,[a,l]=x(!1),[y,B]=x(0),[$,I]=x(0),n=h(null),_=h(null),o=h(null),{ref:C,inView:w}=O();F(z,()=>o.current);const H=typeof t=="string"?t:t&&M({data:t,converters:T}),b=typeof i=="string"?i:i&&M({data:i,converters:T});L(()=>{w&&!u?(n.current?.play(),l(!0)):(n.current?.pause(),l(!1))},[w]);const f=Y(()=>{if(o.current){const v=o.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=v.bottom+S,k=document.documentElement.scrollHeight-V;B(k>c?c:k)}if(o.current){const v=o.current.clientHeight,c=window.innerHeight;I(v+c)}},600);L(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[]);const g="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(G,{children:[r&&e("div",{ref:o,className:d("relative z-10 ",g),children:e("div",{children:p("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!a&&u&&e(q,{variant:"link",className:d("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(n.current&&n.current.pause(),l(!1)):(n.current&&n.current.play(),l(!0)),s&&s?.()},children:u})]})})}),p("div",{style:r?{marginBottom:`-${y}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:d("relative overflow-hidden",r?"h-screen w-full":g,m,{"aiui-dark":P==="dark","rounded-box":E==="rounded"}),children:e("div",{children:p("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:n,className:"size-full object-cover",src:N?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),e("div",{className:d(r&&"relative box-content block",g),style:r?{height:`${y}px`}:{}})]})]})});var se=j(A);export{se as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n  const bgRef = useRef<HTMLImageElement>(null)\n\n  const { ref, inView } = useInView()\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  const videoTitle_html =\n    typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  useEffect(() => {\n    if (inView && !btnText) {\n      videoRef.current?.play()\n      setIsPlaying(true)\n    } else {\n      videoRef.current?.pause()\n      setIsPlaying(false)\n    }\n  }, [inView])\n\n  useGSAP(() => {\n    if (!bgRef.current) return\n    const height = boxRef.current?.clientHeight || 100\n    const screenHeight = bgRef.current?.clientHeight || 100\n    const base = screenHeight + height\n\n    ScrollTrigger.create({\n      trigger: boxRef.current,\n      start: 'top bottom',\n      end: 'bottom top',\n      scrub: true,\n      onUpdate: (self: any) => {\n        const value = self.progress * base - screenHeight\n        gsap.set(bgRef.current, { y: value })\n      },\n    })\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      className={cn(\n        ' relative w-full overflow-hidden',\n        ' lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n        className,\n        {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        }\n      )}\n    >\n      <div>\n        <div\n          ref={ref}\n          className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n        >\n          {title_html && !isPlaying && (\n            <div\n              className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n              dangerouslySetInnerHTML={{ __html: title_html }}\n            />\n          )}\n          {videoTitle_html && isPlaying && (\n            <div\n              className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n              dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n            />\n          )}\n          {!isPlaying && btnText && (\n            <Button\n              variant=\"link\"\n              className={cn('member-equity-button-secondary')}\n              onClick={() => {\n                if (isPlaying) {\n                  if (videoRef.current) {\n                    videoRef.current.pause()\n                  }\n                  setIsPlaying(false)\n                } else {\n                  if (videoRef.current) {\n                    videoRef.current.play()\n                  }\n                  setIsPlaying(true)\n                }\n              }}\n            >\n              {btnText}\n              <Right />\n            </Button>\n          )}\n        </div>\n      </div>\n      <div>\n        <div ref={bgRef} className=\"media-cover sticky left-0 top-0 h-screen w-screen\">\n          <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} muted loop />\n          {!isPlaying && img?.url && (\n            <Picture\n              className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n              source={img?.url}\n              alt={img?.alt}\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          )}\n          <div className=\"absolute left-0 top-0 z-10 size-full\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "aAgFY,cAAAA,EAYA,QAAAC,MAZA,oBA/EZ,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,MAAiB,QACnD,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,SAAAC,MAAa,aACtB,OAAS,aAAAC,MAAiB,8BAE1B,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIvB,EAAS,EAAK,EAE1CwB,EAAWvB,EAAyB,IAAI,EACxCwB,EAASxB,EAAuB,IAAI,EACpCyB,EAAQzB,EAAyB,IAAI,EAErC,CAAE,IAAA0B,EAAK,OAAAC,CAAO,EAAIhB,EAAU,EAE5BiB,EAAa,OAAOd,GAAU,SAAWA,EAAQA,GAASL,EAAqB,CAAE,KAAMK,CAAM,CAAC,EAC9Fe,EACJ,OAAOd,GAAe,SAAWA,EAAaA,GAAcN,EAAqB,CAAE,KAAMM,CAAW,CAAC,EAEvG,OAAAd,EAAU,IAAM,CACV0B,GAAU,CAACX,GACbO,EAAS,SAAS,KAAK,EACvBD,EAAa,EAAI,IAEjBC,EAAS,SAAS,MAAM,EACxBD,EAAa,EAAK,EAEtB,EAAG,CAACK,CAAM,CAAC,EAEXzB,EAAQ,IAAM,CACZ,GAAI,CAACuB,EAAM,QAAS,OACpB,MAAMK,EAASN,EAAO,SAAS,cAAgB,IACzCO,EAAeN,EAAM,SAAS,cAAgB,IAC9CO,EAAOD,EAAeD,EAE5B,OAAA1B,EAAc,OAAO,CACnB,QAASoB,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWS,GAAc,CACvB,MAAMC,EAAQD,EAAK,SAAWD,EAAOD,EACrC5B,EAAK,IAAIsB,EAAM,QAAS,CAAE,EAAGS,CAAM,CAAC,CACtC,CACF,CAAC,EACM,IAAM,CACX9B,EAAc,OAAO,EAAE,QAAS+B,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,EAGHrC,EAAC,OACC,IAAK0B,EACL,UAAWnB,EACT,mCACA,sNACAQ,EACA,CACE,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,UAAAvB,EAAC,OACC,SAAAC,EAAC,OACC,IAAK4B,EACL,UAAU,kHAET,UAAAE,GAAc,CAACP,GACdxB,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ+B,CAAW,EAChD,EAEDC,GAAmBR,GAClBxB,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQgC,CAAgB,EACrD,EAED,CAACR,GAAaL,GACblB,EAACU,EAAA,CACC,QAAQ,OACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTgB,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,EACDnB,EAACa,EAAA,EAAM,GACT,GAEJ,EACF,EACAb,EAAC,OACC,SAAAC,EAAC,OAAI,IAAK2B,EAAO,UAAU,oDACzB,UAAA5B,EAAC,SAAM,IAAK0B,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,MAAK,GAAC,KAAI,GAAC,EACpF,CAACG,GAAaJ,GAAK,KAClBpB,EAACU,EAAA,CACC,UAAU,mDACV,OAAQU,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFpB,EAAC,OAAI,UAAU,uCAAuC,GACxD,EACF,GACF,CAEJ,EAEA,IAAOuC,EAAQ9B,EAAWM,CAAe",
-  "names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "useGSAP", "gsap", "ScrollTrigger", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "Right", "useInView", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "boxRef", "bgRef", "ref", "inView", "title_html", "videoTitle_html", "height", "screenHeight", "base", "self", "value", "t", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView && !btnText) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n            <div>\n              <div\n                ref={inViewRef}\n                className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\n                      if (isPlaying) {\n                        if (videoRef.current) {\n                          videoRef.current.pause()\n                        }\n                        setIsPlaying(false)\n                      } else {\n                        if (videoRef.current) {\n                          videoRef.current.play()\n                        }\n                        setIsPlaying(true)\n                      }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div>\n                <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                  <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  />\n                  <div className=\"absolute left-0 top-0 z-10 size-full\" />\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
 }