@anker-in/headless-ui 0.0.27-alpha.13 → 0.0.27-alpha.131

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as k}from"react/jsx-runtime";import p,{useMemo as d}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as f}from"../../shared/Styles.js";import{Carousel as u,CarouselContent as g,CarouselItem as h}from"../../components/index.js";import{Picture as b,Text as C}from"../../components/index.js";const r=p.forwardRef(({items:o,shape:i,className:n,...m},x)=>{const l=o?.length||0,c=d(()=>{const s="basis-[296px]";let t="";return l===1&&(t="basis-[100%]"),l===2&&(t="tablet:basis-1/2"),l===3&&(t="laptop:basis-1/3"),l>3&&(t="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${s} ${t}`},[l]);return e(u,{ref:x,opts:{align:"start"},className:a("px-4 tablet:px-8 laptop:px-16",n),...m,children:e(p.Fragment,{children:e(g,{children:o.map((s,t)=>e(h,{className:a("pl-3 laptop:pl-4 flex-shrink-0 h-[360px]",c),children:k("div",{className:a("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":i==="round"}),children:[e(b,{className:"h-full ",imgClassName:"h-full object-cover",source:s?.imgUrl}),e("div",{className:"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]",children:e(C,{html:s?.title,style:{color:s?.textColor},className:"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2"})})]})},t+s?.title))})},".0")})});r.displayName="Graphic";var S=f(r);export{S as default};
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import f,{useImperativeHandle as h,useRef as x}from"react";import{cn as l}from"../../helpers/utils.js";import{withStyles as u}from"../../shared/Styles.js";import g from"../SwiperBox/index.js";import{Heading as v}from"../../components/index.js";import{Picture as w,Text as N}from"../../components/index.js";import{Container as P}from"../../components/container.js";import y from"../Title/index.js";import{useExposure as C}from"../../hooks/useEXposure.js";import{useAiuiContext as b}from"../AiuiProvider/index.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",T=({data:e,configuration:i})=>t("div",{className:l("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:s("a",{href:k(e?.link,`$${n}_$${p}`),className:"relative cursor-pointer",children:[t(w,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),s("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(N,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(v,{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]"})]})]})}),a=f.forwardRef(({data:e,className:i,...G},m)=>{const o=e?.items?.length>2,r=x(null);h(m,()=>r.current);const{trackingData:c}=b(),{profileActivated:d}=c;return C(r,{componentType:n,componentName:p,memberActiveStatus:d?"active":"not active",componentTitle:e?.title}),t("div",{className:i,ref:r,children:t("div",{className:"graphic-box",children:s(P,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(y,{data:{title:e?.title}}),t(g,{className:l("!overflow-visible"),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:T,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});a.displayName="Graphic";var L=u(a);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": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport interface GraphicProps {\n  className?: string\n  items: {\n    imgUrl: string\n    title: string\n    textColor?: string\n  }[]\n  shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n  const itemsLength = items?.length || 0\n\n  const itemStyle = useMemo(() => {\n    const basisStyle = 'basis-[296px]'\n    let breakPointStyle = ''\n    if (itemsLength === 1) {\n      breakPointStyle = 'basis-[100%]'\n    }\n    if (itemsLength === 2) {\n      breakPointStyle = 'tablet:basis-1/2'\n    }\n    if (itemsLength === 3) {\n      breakPointStyle = 'laptop:basis-1/3'\n    }\n    if (itemsLength > 3) {\n      breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n    }\n    return `${basisStyle} ${breakPointStyle}`\n  }, [itemsLength])\n\n  return (\n    <Carousel\n      ref={ref}\n      opts={{\n        align: 'start',\n      }}\n      className={cn('px-4 tablet:px-8 laptop:px-16', className)}\n      {...props}\n    >\n      <React.Fragment key=\".0\">\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem\n              key={index + item?.title}\n              className={cn('pl-3 laptop:pl-4 flex-shrink-0 h-[360px]', itemStyle)}\n            >\n              <div className={cn(\"relative h-full\", {\n                ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round'\n              })}>\n                <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n                <div className=\"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]\">\n                  <Text\n                    html={item?.title}\n                    style={{\n                      color: item?.textColor,\n                    }}\n                    className=\"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2\"\n                  />\n                </div>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </React.Fragment>\n    </Carousel>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "AAqDc,OAGE,OAAAA,EAHF,QAAAC,MAAA,oBArDd,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAY9B,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,MAAAU,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,EAAYf,EAAQ,IAAM,CAC9B,MAAMgB,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,OACEjB,EAACM,EAAA,CACC,IAAKU,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWZ,EAAG,gCAAiCU,CAAS,EACvD,GAAGC,EAEJ,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACO,EAAA,CACE,SAAAK,EAAM,IAAI,CAACS,EAAMC,IAChBtB,EAACQ,EAAA,CAEC,UAAWJ,EAAG,2CAA4Cc,CAAS,EAEnE,SAAAjB,EAAC,OAAI,UAAWG,EAAG,kBAAmB,CACnC,gDAAkDS,IAAU,OAC/D,CAAC,EACC,UAAAb,EAACS,EAAA,CAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQY,GAAM,OAAQ,EACtFrB,EAAC,OAAI,UAAU,kEACb,SAAAA,EAACU,EAAA,CACC,KAAMW,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBKC,EAAQD,GAAM,KAiBrB,CACD,EACH,GAvBkB,IAwBpB,EACF,CAEJ,CAAC,EAEDV,EAAQ,YAAc,UAEtB,IAAOY,EAAQlB,EAAWM,CAAO",
-  "names": ["jsx", "jsxs", "React", "useMemo", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Graphic", "items", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index", "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 type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useEXposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.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  return (\n    <div\n      className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n        ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n      })}\n    >\n      <a href={trackUrlRef(data?.link, `$${componentType}_$${componentName}`)} className=\"relative cursor-pointer\">\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  )\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  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    memberActiveStatus: profileActivated ? 'active' : 'not active',\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            className={cn('!overflow-visible')}\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        </Container>\n      </div>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "aA0CQ,cAAAA,EAKA,QAAAC,MALA,oBAzCR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAW,oBAElB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCpB,EAAC,OACC,UAAWK,EAAG,oFAAqF,CAChG,gDAAkDe,GAAe,YAAc,OAClF,CAAC,EAED,SAAAnB,EAAC,KAAE,KAAMc,EAAYI,GAAM,KAAM,IAAIH,CAAa,KAAKC,CAAa,EAAE,EAAG,UAAU,0BACjF,UAAAjB,EAACS,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACxB,EACAlB,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACU,EAAA,CACC,MAAO,CACL,MAAOS,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,aACLnB,EAACQ,EAAA,CACC,KAAMW,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAUnB,EAAM,WAAyC,CAAC,CAAE,KAAAiB,EAAM,UAAAG,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUN,GAAM,OAAyB,OAAS,EAClDO,EAAWtB,EAAuB,IAAI,EAC5CD,EAAoBqB,EAAK,IAAME,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,EAAIb,EAAe,EAClC,CAAE,iBAAAc,CAAiB,EAAID,EAE7B,OAAAd,EAAYa,EAAU,CACpB,cAAAV,EACA,cAAAC,EACA,mBAAoBW,EAAmB,SAAW,aAClD,eAAgBT,GAAM,KACxB,CAAC,EAGCnB,EAAC,OAAI,UAAWsB,EAAW,IAAKI,EAC9B,SAAA1B,EAAC,OAAI,UAAU,cACb,SAAAC,EAACU,EAAA,CAAW,GAAIQ,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,OAASnB,EAACY,EAAA,CAAM,KAAM,CAAE,MAAOO,GAAM,KAAM,EAAG,EACrDnB,EAACO,EAAA,CACC,UAAWF,EAAG,mBAAmB,EACjC,GAAI,UACJ,KAAM,CAAE,KAAMc,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,EACF,EACF,CAEJ,CAAC,EAEDJ,EAAQ,YAAc,UAEtB,IAAOQ,EAAQvB,EAAWe,CAAO",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "Graphic", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Graphic_default"]
 }

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Shape } from '../../types/props';
+import type { ComponentCommonProps, Media, Img } from '../../types/props';
+export interface AttractionItem {
+    icon?: Img;
+    title: string;
+    description: string;
+}
+interface GraphicAttractionBlockProps extends ComponentCommonProps {
+    data: {
+        shape?: Shape;
+        sectionTitle?: string;
+        imageUrlPc?: Media;
+        imageUrlMob?: Media;
+        imageTitle?: string;
+        imageDescription?: string;
+        attractionItems?: AttractionItem[];
+    };
+}
+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

@@ -0,0 +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 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

@@ -0,0 +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] 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,9 +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;
-    }): 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 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import m from"react";import{Button as c,Text as N}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as k}from"../../shared/Styles.js";const p=m.forwardRef(({title:x,subtitle:d,background:g,primaryButton:n,secondaryButton:l,theme:t="light",className:b,products:i=[]},f)=>{const o=t==="dark"?"text-white":"text-[#1D1D1F]",v=t==="dark"?"bg-white":"bg-[#1D1D1F]";return r("div",{ref:f,className:a("relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat",b),style:{backgroundImage:`url(${g})`},children:[r("div",{className:"relative z-10 flex flex-col gap-8 px-32 pt-[307px]",children:[r("div",{className:"max-w-[686px] space-y-4",children:[e("h1",{className:a("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",o),children:x}),e("p",{className:a("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",o),children:d})]}),r("div",{className:"flex items-center gap-4",children:[l&&e(c,{size:"lg",variant:"primary",theme:t,className:"hero-banner-primary-button",...l,children:l.text}),n&&e(c,{size:"lg",variant:"secondary",theme:t,...n,className:"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white",children:n.text})]})]}),i.length>0&&e("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:i.map((h,s)=>r(m.Fragment,{children:[e(N,{className:a("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",t==="dark"?"text-white":"text-[#1D1D1F]"),children:h.title}),s<i.length-1&&e("div",{className:a("h-4 w-px",v)})]},s))})]})});p.displayName="HeroBanner";var F=k(p);export{F as default};
+"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import h,{useImperativeHandle as D,useRef as y}from"react";import{useGSAP as I}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as L,Picture as M,Text as H}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as S}from"../../shared/Styles.js";import{useAiuiContext as U}from"../AiuiProvider/index.js";import{useExposure as _}from"../../hooks/useEXposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=h.forwardRef(({data:B,className:$},z)=>{const{title:m,subtitle:u,pcImage:P,mobileImage:T,primaryButton:l,secondaryButton:i,theme:R="light",caption:g=[]}=B,o=y(null),e=y(null),{trackingData:E}=U(),{profileActivated:A}=E;return _(e,{componentType:b,componentName:f,componentTitle:m,componentDescription:u,memberActiveStatus:A?"active":"not active"}),D(z,()=>e.current),I(()=>{if(c.registerPlugin(s),!o.current)return;const x=e.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:e.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:e.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:e.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:e,"data-ui-component-id":"HeroBanner",className:r(R==="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",$),children:[t("div",{ref:o,className:r("absolute left-0 top-0 size-full"),children:t(M,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${P?.url||""} , ${T?.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&&t(L,{as:"h1",size:5,className:r("hero-banner-title"),html:m}),u&&t(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&&t("a",{href:N(i.link,`$${b}_$${f}`),children:t(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&t("a",{href:N(l.link,`$${b}_$${f}`),children:t(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.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:g.map((x,d)=>n(h.Fragment,{children:[t(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&&t("div",{className:r("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var W=S(w);export{W 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": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n  ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n    const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n    const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative flex min-h-[720px] w-full flex-col justify-between overflow-hidden bg-cover bg-center bg-no-repeat',\n          className\n        )}\n        style={{ backgroundImage: `url(${background})` }}\n      >\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"relative z-10 flex flex-col gap-8 px-32 pt-[307px]\">\n          <div className=\"max-w-[686px] space-y-4\">\n            <h1\n              className={cn(\n                'hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]',\n                textColorClass\n              )}\n            >\n              {title}\n            </h1>\n            <p\n              className={cn(\n                'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n                textColorClass\n              )}\n            >\n              {subtitle}\n            </p>\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"flex items-center gap-4\">\n            {secondaryButton && (\n              <Button\n                size=\"lg\"\n                variant=\"primary\"\n                theme={theme}\n                className=\"hero-banner-primary-button\"\n                {...secondaryButton}\n              >\n                {secondaryButton.text}\n              </Button>\n            )}\n            {primaryButton && (\n              <Button\n                size=\"lg\"\n                variant=\"secondary\"\n                theme={theme}\n                {...primaryButton}\n                className=\"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white\"\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {products.length > 0 && (\n          <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n            {products.map((product, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  className={cn(\n                    'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n                    theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n                  )}\n                >\n                  {product.title}\n                </Text>\n                {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "AAsBU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAtBV,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,QAAAC,MAAY,4BAC7B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaL,EAAM,WACvB,CAAC,CAAE,MAAAM,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,UAAAC,EAAW,SAAAC,EAAW,CAAC,CAAE,EAAGC,IAAQ,CACnH,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,OACEZ,EAAC,OACC,IAAKe,EACL,UAAWX,EACT,8GACAS,CACF,EACA,MAAO,CAAE,gBAAiB,OAAOJ,CAAU,GAAI,EAG/C,UAAAT,EAAC,OAAI,UAAU,qDACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MACC,UAAWK,EACT,oFACAY,CACF,EAEC,SAAAT,EACH,EACAR,EAAC,KACC,UAAWK,EACT,4EACAY,CACF,EAEC,SAAAR,EACH,GACF,EAGAR,EAAC,OAAI,UAAU,0BACZ,UAAAW,GACCZ,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,UACR,MAAOU,EACP,UAAU,6BACT,GAAGD,EAEH,SAAAA,EAAgB,KACnB,EAEDD,GACCX,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,YACR,MAAOU,EACN,GAAGF,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,GACjBf,EAAC,OAAI,UAAU,mDACZ,SAAAe,EAAS,IAAI,CAACI,EAASC,IACtBnB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACI,EAAA,CACC,UAAWC,EACT,gFACAQ,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,GAAKf,EAAC,OAAI,UAAWK,EAAG,WAAYa,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
-  "names": ["jsx", "jsxs", "React", "Button", "Text", "cn", "withStyles", "HeroBanner", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "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 { useAiuiContext } from '../AiuiProvider/index.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  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n    memberActiveStatus: profileActivated ? 'active' : 'not active',\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", "useAiuiContext", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "trackingData", "profileActivated", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/index.tsx"],
-  "sourcesContent": ["export { default } from './HeroBanner.js'"],
+  "sourcesContent": ["export { default } from './HeroBanner.js'\n"],
   "mappings": "AAAA,OAAS,WAAAA,MAAe",
   "names": ["default"]
 }

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

@@ -1,26 +1,30 @@
 import type { ButtonProps } from '../../components/button.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface HeroBannerProps {
-    /** 主标题 */
-    title: string;
-    /** 副标题/描述文本 */
-    subtitle: string;
-    /** 背景图片URL */
-    background: string;
-    /** 主按钮文本和配置 */
-    primaryButton?: {
-        text: string;
-    } & Omit<ButtonProps, 'children'>;
-    /** 次要按钮文本和配置 */
-    secondaryButton?: {
-        text: string;
-    } & Omit<ButtonProps, 'children'>;
+    data: {
+        /** 主标题 */
+        title: string;
+        /** 副标题/描述文本 */
+        subtitle: string;
+        pcImage: Media;
+        mobileImage: Media;
+        /** 主按钮文本和配置 */
+        primaryButton?: {
+            text: string;
+            link?: string;
+        } & Omit<ButtonProps, 'children'>;
+        /** 次要按钮文本和配置 */
+        secondaryButton?: {
+            text: string;
+            link?: string;
+        } & Omit<ButtonProps, 'children'>;
+        /** 主题 */
+        theme?: Theme;
+        /** 底部产品列表 */
+        caption?: Array<{
+            title: string;
+        }>;
+    };
     /** 自定义类名 */
     className?: string;
-    /** 主题 */
-    theme?: 'light' | 'dark';
-    /** 底部产品列表 */
-    products?: Array<{
-        title: string;
-        active?: boolean;
-    }>;
 }

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js';
+import { type SwiperRef } from 'swiper/react';
+declare const MarqueeItem: {
+    ({ data, configuration }: MarqueeItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const MarqueeImageContent: {
+    ({ image, imageClassName }: MarqueeImageContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
+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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as P,jsx as r,jsxs as T}from"react/jsx-runtime";import l,{useImperativeHandle as w,useRef as x}from"react";import{Picture as M,Text as y}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";import{Swiper as S,SwiperSlide as v}from"swiper/react";import{Autoplay as C}from"swiper/modules";import{useExposure as N}from"../../hooks/useEXposure.js";import{useAiuiContext as g}from"../AiuiProvider/index.js";const R="image",I="marquee",u=l.forwardRef(({data:e,className:t},a)=>{const o=x(null);w(a,()=>o.current);const{trackingData:c}=g(),{profileActivated:f}=c;return N(o,{componentType:R,componentName:I,memberActiveStatus:f?"active":"not active"}),r(S,{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:[C],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,d)=>r(v,{children:r(i,{data:m})},m?.id+"SwiperSlide"+d))})});u.displayName="Marquee";const i=({data:e,configuration:t})=>T(P,{children:[e.type==="image"&&r(p,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&r(n,{text:e?.text,textClassName:t?.textClassName})]});i.displayName="MarqueeItem";const p=({image:e,imageClassName:t})=>r("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:r(M,{source:e?.url,alt:e?.alt||"",imgClassName:s("object-cover",t)})});p.displayName="MarqueeImageContent";const n=l.forwardRef(({text:e,textClassName:t},a)=>r(y,{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 O=q(u);export{p as MarqueeImageContent,i as MarqueeItem,n as MarqueeTextContent,O as default};
+//# sourceMappingURL=Marquee.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
+  "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'\nimport { useAiuiContext } from '../AiuiProvider/index.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  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n    memberActiveStatus: profileActivated ? 'active' : 'not active',\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": "aA0DU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBAzDV,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,6BAC5B,OAAS,kBAAAC,MAAsB,2BAE/B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAUd,EAAM,WAAoC,CAAC,CAAE,KAAAe,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,EAAWhB,EAAkB,IAAI,EACvCD,EAAoBgB,EAAK,IAAMC,EAAS,OAAoB,EAC5D,KAAM,CAAE,aAAAC,CAAa,EAAIR,EAAe,EAClC,CAAE,iBAAAS,CAAiB,EAAID,EAE7B,OAAAT,EAAYQ,EAAkD,CAC5D,cAAeN,EACf,cAAeC,EACf,mBAAoBO,EAAmB,SAAW,YACpD,CAAC,EAGCtB,EAACS,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAW,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAACN,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBM,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,CAACM,EAAMC,IACvBxB,EAACU,EAAA,CACC,SAAAV,EAACyB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDR,EAAQ,YAAc,UAEtB,MAAMS,EAAc,CAAC,CAAE,KAAAR,EAAM,cAAAS,CAAc,IAEvCzB,EAAAF,EAAA,CACG,UAAAkB,EAAK,OAAS,SACbjB,EAAC2B,EAAA,CAAoB,MAAOV,GAAM,MAAO,eAAgBS,GAAe,eAAgB,EAEzFT,EAAK,OAAS,QAAUjB,EAAC4B,EAAA,CAAmB,KAAMX,GAAM,KAAM,cAAeS,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjD9B,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACK,EAAA,CAAQ,OAAQwB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAActB,EAAG,eAAgBuB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqB1B,EAAM,WAAoD,CAAC,CAAE,KAAA6B,EAAM,cAAAC,CAAc,EAAGb,IAE3GnB,EAACM,EAAA,CACC,GAAG,MACH,IAAKa,EACL,KAAMY,EACN,UAAWxB,EAAG,oFAAqFyB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQzB,EAAWQ,CAAO",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withStyles", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "useAiuiContext", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "trackingData", "profileActivated", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
+}

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

@@ -1,23 +1,2 @@
-import React from 'react';
-import { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';
-declare const Marquee: React.ForwardRefExoticComponent<Omit<FastMarqueeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-interface MarqueeListProps {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const MarqueeList: React.ForwardRefExoticComponent<MarqueeListProps & React.RefAttributes<HTMLDivElement>>;
-interface MarqueeImageContentProps {
-    image: string;
-    className?: string;
-}
-declare const MarqueeImageContent: {
-    ({ image, className }: MarqueeImageContentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-interface MarqueeTextContentProps {
-    text: string;
-    className?: string;
-}
-declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-export { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent };
-export type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps };
+export { default } from './Marquee.js';
+export { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee.js';

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

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import s from"react";import{default as c}from"react-fast-marquee";import"react-fast-marquee";import{Picture as M,Text as l}from"../../components/index.js";import{cn as o}from"../../helpers/utils.js";const n=s.forwardRef(({children:e,...t},r)=>a(c,{ref:r,...t,children:e}));n.displayName="Marquee";const p=s.forwardRef(({className:e,children:t,...r},u)=>a("div",{className:o("flex gap-6 items-center laptop:gap-16",e),ref:u,children:t}));p.displayName="MarqueeList";const i=({image:e,className:t})=>a(M,{source:e,className:o("aspect-w-[120] w-[72px] aspect-h-[80] laptop:w-[120px]",t),imgClassName:"object-cover"});i.displayName="MarqueeImageContent";const m=s.forwardRef(({text:e,className:t},r)=>a(l,{as:"div",ref:r,html:e,className:o("size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium",t)}));m.displayName="MarqueeTextContent";export{n as Marquee,i as MarqueeImageContent,p as MarqueeList,m as MarqueeTextContent};
+import{default as r}from"./Marquee.js";import{MarqueeItem as a,MarqueeImageContent as m,MarqueeTextContent as n}from"./Marquee.js";export{m as MarqueeImageContent,a as MarqueeItem,n as MarqueeTextContent,r as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/biz-components/Marquee/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { default as FastMarquee } from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\nconst Marquee = React.forwardRef<HTMLDivElement, FastMarqueeProps>(\n  ({children, ...props}, ref) => {\n    return (\n      <FastMarquee\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </FastMarquee>\n    )\n  }\n)\n\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nconst MarqueeList = React.forwardRef<\nHTMLDivElement,\nMarqueeListProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div className={cn(\"flex gap-6 items-center laptop:gap-16\", className)} ref={ref}>\n      {children}\n    </div>\n  )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n  image: string\n  className?: string;\n}\n\nconst MarqueeImageContent = ({ image, className }: MarqueeImageContentProps) => {\n  return (\n    <Picture \n      source={image}\n      className={cn(\"aspect-w-[120] w-[72px] aspect-h-[80] laptop:w-[120px]\", className)}\n      imgClassName=\"object-cover\"\n    />\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n  text: string\n  className?: string;\n}\n\nconst MarqueeTextContent = React.forwardRef<\nHTMLDivElement,\nMarqueeTextContentProps\n>(({ text, className }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn(\"size-14 text-nowrap flex items-center justify-center leading-[1.2] text-lines-2 font-medium\", className)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }"],
-  "mappings": "AASM,cAAAA,MAAA,oBATN,OAAOC,MAAW,QAClB,OAAS,WAAWC,MAAmB,qBACvC,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAEnB,MAAMC,EAAUL,EAAM,WACpB,CAAC,CAAC,SAAAM,EAAU,GAAGC,CAAK,EAAGC,IAEnBT,EAACE,EAAA,CACC,IAAKO,EACJ,GAAGD,EAEH,SAAAD,EACH,CAGN,EAEAD,EAAQ,YAAc,UAOtB,MAAMI,EAAcT,EAAM,WAGxB,CAAC,CAAE,UAAAU,EAAW,SAAAJ,EAAU,GAAGC,CAAM,EAAGC,IAElCT,EAAC,OAAI,UAAWK,EAAG,wCAAyCM,CAAS,EAAG,IAAKF,EAC1E,SAAAF,EACH,CAEH,EAEDG,EAAY,YAAc,cAO1B,MAAME,EAAsB,CAAC,CAAE,MAAAC,EAAO,UAAAF,CAAU,IAE5CX,EAACG,EAAA,CACC,OAAQU,EACR,UAAWR,EAAG,yDAA0DM,CAAS,EACjF,aAAa,eACf,EAIJC,EAAoB,YAAc,sBAOlC,MAAME,EAAqBb,EAAM,WAG/B,CAAC,CAAE,KAAAc,EAAM,UAAAJ,CAAU,EAAGF,IAEpBT,EAACI,EAAA,CACC,GAAG,MACH,IAAKK,EACL,KAAMM,EACN,UAAWV,EAAG,8FAA+FM,CAAS,EACxH,CAEH,EAEDG,EAAmB,YAAc",
-  "names": ["jsx", "React", "FastMarquee", "Picture", "Text", "cn", "Marquee", "children", "props", "ref", "MarqueeList", "className", "MarqueeImageContent", "image", "MarqueeTextContent", "text"]
+  "sources": ["../../../../src/biz-components/Marquee/index.ts"],
+  "sourcesContent": ["export { default } from './Marquee.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,eACxB,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B",
+  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent"]
 }

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

@@ -0,0 +1,33 @@
+import type { Img } from '../../types/props.js';
+interface MarqueeProps {
+    data: {
+        key?: string;
+        /** 是否反向 */
+        reverseDirection?: boolean;
+        /** 速度 */
+        speed?: number;
+        /** 跑马灯内容 */
+        items: any[];
+    };
+    className?: string;
+}
+interface MarqueeItemProps {
+    data: {
+        type: 'image' | 'text';
+        image?: Img;
+        text?: string;
+    };
+    configuration?: {
+        imageClassName?: string;
+        textClassName?: string;
+    };
+}
+interface MarqueeImageContentProps {
+    image?: Img;
+    imageClassName?: string;
+}
+interface MarqueeTextContentProps {
+    text?: string;
+    textClassName?: string;
+}
+export type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps };

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

@@ -0,0 +1 @@
+//# sourceMappingURL=type.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MediaPlayerBaseProps } from './types.js';
+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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\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\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => boxRef.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    useEffect(() => {\n      if (boxRef.current && sticky) {\n        const rect = boxRef.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    }, [])\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        style={sticky ? { marginBottom: `-${btb}px` } : {}}\n        className={cn('relative', sticky && 'mt-[-100vh]')}\n      >\n        <div className=\"sticky top-0 \">\n          <div\n            className={cn(\n              'relative overflow-hidden',\n              sticky\n                ? 'h-screen w-screen'\n                : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] 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={inViewRef}\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-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              <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                  autoPlay\n                  playsInline\n                  webkit-playsinline\n                  x5-playsinline\n                />\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        </div>\n        <div\n          className={cn(\n            sticky && 'relative box-content block',\n            sticky &&\n              'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n          style={sticky ? { height: `${btb}px` } : {}}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "MediaPlayerBase_default"]
+}

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

@@ -0,0 +1 @@
+export declare const Right: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import{jsx as o}from"react/jsx-runtime";const t=()=>o("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:o("path",{d:"M6.75 4.5L11.25 9L6.75 13.5",stroke:"white",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});export{t as Right};
+//# sourceMappingURL=right.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerBase/right.tsx"],
+  "sourcesContent": ["export const Right = () => (\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M6.75 4.5L11.25 9L6.75 13.5\"\n      stroke=\"white\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n)\n"],
+  "mappings": "AAEI,cAAAA,MAAA,oBAFG,MAAMC,EAAQ,IACnBD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,8BACF,OAAO,QACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACF",
+  "names": ["jsx", "Right"]
+}

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

@@ -0,0 +1,14 @@
+import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js';
+export interface MediaPlayerBaseProps extends ComponentCommonProps {
+    data: {
+        sticky?: boolean;
+        shape?: Shape;
+        theme?: Theme;
+        title?: string;
+        videoTitle?: string;
+        btnText?: string;
+        img?: Img;
+        video?: Video;
+    };
+    onBtnClick?: () => void;
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import type { MediaPlayerMultiProps } from './types.js';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & import("react").RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as p,forwardRef as w}from"react";import{cn as x}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import{Picture as b}from"../../components/index.js";import{Dialog as y,DialogContent as M}from"../../components/dialog.js";import k from"../Title/index.js";import N from"../SwiperBox/index.js";import{Container as P}from"../../components/container.js";import{convertLexicalToHTML as C}from"@payloadcms/richtext-lexical/html";const B=({data:t,configuration:l})=>o("div",{className:x("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(b,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t.video&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),V=w(({data:{items:t=[],shape:l="square",title:i,containerProps:d},className:r="",key:m,onVideoPlayBtnClick:f},c)=>{const[n,a]=p(!1),[v,s]=p(""),h=typeof i=="string"?i:i&&C({data:i});return o("div",{className:r,children:[e("div",{className:"mediaplayermulti-box",children:e(P,{...d||{},className:"overflow-hidden",children:o("div",{className:r,ref:c,children:[i&&e(k,{data:{title:h||""}}),e(N,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+m,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:f,setVisible:a,setVideoUrl:s}},Slide:B,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:1.55},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(y,{open:n,onOpenChange:u=>{a(u),s("")},children:o(M,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:v,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=g(V);export{U as default};
+//# sourceMappingURL=index.js.map