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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  // const [isPlaying, setIsPlaying] = useState<boolean>(false)\n  // const videoRef = useRef<HTMLVideoElement>(null)\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data.video && (\n            <button\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                configuration?.setVisible?.(true)\n                configuration?.setVideoUrl?.(data?.video?.url)\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <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\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <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]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    return (\n      <div className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n                Slide={MediaPlayerItem}\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: 1.55,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            setVideoUrl('')\n          }}\n        >\n          <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                setVideoUrl('')\n              }}\n              className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "aAwBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvBN,OAAS,YAAAC,EAAkB,cAAAC,MAAkB,QAC7C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAI3Cd,EAAC,OACC,UAAWG,EACT,2CACA,yCACA,iEACAW,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAd,EAAC,OAAI,UAAU,uFACb,UAAAD,EAACM,EAAA,CACC,OAAQQ,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,gFACf,EACAd,EAAC,OAAI,UAAU,2DACZ,SAAAc,EAAK,OACJd,EAAC,UACC,QAAS,IAAM,CAYbe,GAAe,aAAa,EAAI,EAChCA,GAAe,cAAcD,GAAM,OAAO,GAAG,EAC7CC,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CAChE,EACA,UAAU,gHAEV,SAAAf,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oJACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,4FACX,SAAAc,EAAK,MACR,EACCA,EAAK,OACJd,EAAC,KAAE,UAAU,uFACV,SAAAc,EAAK,MACR,GAEJ,EAEAd,EAAC,KAAE,UAAU,0JACV,SAAAc,EAAK,YACR,GACF,GACF,EAIEE,EAAmBb,EACvB,CACE,CAAE,KAAM,CAAE,MAAAc,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,KAAM,CAACC,EAASC,CAAU,EAAIxB,EAAkB,EAAK,EAC/C,CAACyB,EAAUC,CAAW,EAAI1B,EAAiB,EAAE,EAC7C2B,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASP,EAAqB,CAAE,KAAMO,CAAM,CAAC,EACpG,OACElB,EAAC,OAAI,UAAWoB,EACd,UAAArB,EAAC,OAAI,UAAU,uBACb,SAAAA,EAACW,EAAA,CAAW,GAAIS,GAAkB,CAAC,EAAI,UAAU,kBAC/C,SAAAnB,EAAC,OAAI,UAAWoB,EAAW,IAAKG,EAC7B,UAAAL,GAASnB,EAACS,EAAA,CAAM,KAAM,CAAE,MAAOoB,GAAc,EAAG,EAAG,EACpD7B,EAACU,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BY,EAC/B,KAAM,CAAE,KAAML,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAK,EAAqB,WAAAG,EAAY,YAAAE,CAAY,CAAE,EACnG,MAAOf,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,IACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACAb,EAACO,EAAA,CACC,KAAMkB,EACN,aAAeK,GAAkB,CAC/BJ,EAAWI,CAAI,EACfF,EAAY,EAAE,CAChB,EAEA,SAAA3B,EAACO,EAAA,CAAc,UAAU,wEACtB,UAAAiB,EAAUzB,EAAC,SAAM,UAAU,yBAAyB,IAAK2B,EAAU,MAAK,GAAC,KAAI,GAAC,SAAQ,GAAC,SAAQ,GAAC,EAAK,KACtG3B,EAAC,OACC,QAAS,IAAM,CACb0B,EAAW,EAAK,EAChBE,EAAY,EAAE,CAChB,EACA,UAAU,0HAEV,SAAA5B,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,eAAa,MACb,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,iBAAe,QAAQ,kBAAgB,QAAQ,EAAE,uBAAuB,EAChF,EACF,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAO+B,EAAQ1B,EAAWW,CAAgB",
+  "names": ["jsx", "jsxs", "useState", "forwardRef", "cn", "withStyles", "Picture", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "flag", "MediaPlayerMulti_default"]
+}

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

@@ -0,0 +1,18 @@
+import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js';
+export interface MediaPlayerItemProps {
+    title: string;
+    name: string;
+    description: string;
+    img: Img;
+    video?: Video;
+    quote?: string;
+}
+export interface MediaPlayerMultiProps extends ComponentCommonProps {
+    data: {
+        title?: string;
+        shape?: 'round' | 'square';
+        items: MediaPlayerItemProps[];
+        containerProps?: ContainerProps;
+    };
+    onVideoPlayBtnClick?: (jIndex: number) => void;
+}

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

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

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MediaPlayerBaseProps } from './types.js';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & React.RefAttributes<{
+    mediaPlayerStickyRef: HTMLDivElement;
+    brandEquityRef: HTMLDivElement;
+    memberEquityRef: 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/MediaPlayerSticky/index.js

@@ -0,0 +1,2 @@
+"use client";import{Fragment as v,jsx as e,jsxs as c}from"react/jsx-runtime";import h,{useRef as n,useEffect as k,forwardRef as w,useImperativeHandle as x}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as H}from"../../shared/Styles.js";import L from"../Slogan/index.js";import{Grid as T,GridItem as p}from"../../components/gird.js";import{Container as N}from"../../components/container.js";import S from"../BrandEquity/index.js";import q from"../MemberEquity/index.js";import P from"../Spacer/index.js";import C from"gsap";import{convertLexicalToHTML as f}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as z}from"react-responsive";import $ from"../../components/picture.js";const y=({defaultConverters:s})=>({...s,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),u=({children:s,spaceY:a})=>{const t=z({query:"(max-width: 768px)"});return e(N,{spaceY:a,children:c(T,{children:[!t&&e(p,{span:1}),e(p,{span:t?12:10,children:s}),!t&&e(p,{span:1})]})})},D=h.forwardRef(({children:s,id:a,components:t},i)=>{const m=n(null),l=n(null),o=n(null);return x(i,()=>({mediaPlayerStickyRef:m.current,brandEquityRef:l.current,memberEquityRef:o.current}),[]),k(()=>{const r=window.screen.height;C.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${r*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),c("div",{id:a,ref:m,className:"relative z-10 pb-10",children:[e(v,{children:s}),e(v,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(u,{spaceY:"none",children:e(S,{ref:l,data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(u,{spaceY:"none",children:e(q,{ref:o,data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(P,{data:r,style:r?.style});default:return null}})})]})}),B=w(({className:s="",id:a,data:{title:t,videoTitle:i,btnText:m,img:l,video:o,theme:r,shape:b,components:E}},M)=>{const g=n(null),R=typeof t=="string"?t:t&&f({data:t,converters:y});return typeof i=="string"||i&&f({data:i,converters:y}),c(D,{ref:M,id:a,components:E,children:[e("div",{className:d("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":r==="dark","rounded-box":b==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(u,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(L,{className:"sticky-title",data:{title:R||"",theme:r}})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:c("div",{className:d("media-cover","relative h-screen w-full","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]"),children:[o?.url&&e("video",{ref:g,className:"size-full object-cover",src:o?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),l?.url&&e($,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:l?.url,alt:l?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})});var X=H(B);export{X as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerSticky/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 Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\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 SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n    brandEquityRef: HTMLDivElement\n    memberEquityRef: HTMLDivElement\n  },\n  {\n    children: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n  const brandEquityRef = useRef<HTMLDivElement>(null)\n  const memberEquityRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => {\n    return {\n      mediaPlayerStickyRef: mediaPlayerStickyRef.current as HTMLDivElement,\n      brandEquityRef: brandEquityRef.current as HTMLDivElement,\n      memberEquityRef: memberEquityRef.current as HTMLDivElement,\n    }\n  }, [])\n\n  useEffect(() => {\n    const height = window.screen.height\n\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      .to(`#${id} .sticky-cover`, {\n        opacity: 1,\n        duration: 0.3,\n      })\n      .to(\n        `#${id} .media-content`,\n        {\n          top: '100%',\n          transform: 'translate(-50%, -100%)',\n          duration: 1,\n        },\n        '<'\n      )\n  }, [])\n  return (\n    <div id={id} ref={mediaPlayerStickyRef} className=\"relative z-10 pb-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity ref={brandEquityRef} data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity\n                      ref={memberEquityRef}\n                      data={componentData}\n                      className=\"w-full\"\n                      style={componentData?.style}\n                    />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n    brandEquityRef: HTMLDivElement\n    memberEquityRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html =\n    typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n  typeof videoTitle === 'string'\n    ? videoTitle\n    : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n  return (\n    <StickyBox ref={ref} id={id} components={components}>\n      <div\n        className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\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          )}\n        >\n          {video?.url && (\n            <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop playsInline />\n          )}\n          {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\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
+  "mappings": "aAqCM,OA6DA,YAAAA,EA5DgB,OAAAC,EADhB,QAAAC,MAAA,oBApCN,OAAOC,GAAmB,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,EAAY,uBAAAC,MAA2B,QACpF,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAOC,MAAY,qBACnB,OAAOC,MAAU,OAEjB,OAAS,wBAAAC,MAA4B,oCAIrC,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,MAAa,8BAEpB,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CAAE,SAAAC,EAAU,OAAAC,CAAO,IAAsD,CAC7F,MAAMC,EAAWT,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACElB,EAACY,EAAA,CAAU,OAAQc,EACjB,SAAAzB,EAACS,EAAA,CACE,WAACiB,GAAY3B,EAACW,EAAA,CAAS,KAAM,EAAG,EACjCX,EAACW,EAAA,CAAS,KAAMgB,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAY3B,EAACW,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMiB,EAAY1B,EAAM,WAWtB,CAAC,CAAE,SAAAuB,EAAU,GAAAI,EAAI,WAAAC,CAAW,EAAGC,IAAQ,CACvC,MAAMC,EAAuB7B,EAAuB,IAAI,EAClD8B,EAAiB9B,EAAuB,IAAI,EAC5C+B,EAAkB/B,EAAuB,IAAI,EAEnD,OAAAG,EAAoByB,EAAK,KAChB,CACL,qBAAsBC,EAAqB,QAC3C,eAAgBC,EAAe,QAC/B,gBAAiBC,EAAgB,OACnC,GACC,CAAC,CAAC,EAEL9B,EAAU,IAAM,CACd,MAAM+B,EAAS,OAAO,OAAO,OAE7BnB,EACG,SAAS,CACR,cAAe,CACb,QAAS,IAAIa,CAAE,GACf,MAAO,UACP,IAAK,QAAQM,EAAS,GAAG,YACzB,MAAO,CACT,CACF,CAAC,EACA,GAAG,IAAIN,CAAE,iBAAkB,CAC1B,QAAS,EACT,SAAU,EACZ,CAAC,EACA,GACC,IAAIA,CAAE,kBACN,CACE,IAAK,OACL,UAAW,yBACX,SAAU,CACZ,EACA,GACF,CACJ,EAAG,CAAC,CAAC,EAEH5B,EAAC,OAAI,GAAI4B,EAAI,IAAKG,EAAsB,UAAU,sBAChD,UAAAhC,EAAAD,EAAA,CAAG,SAAA0B,EAAS,EACZzB,EAAAD,EAAA,CACG,SAAA+B,GAAY,IAAKM,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACEpC,EAAC,OAAI,UAAU,+BACb,SAAAA,EAACwB,EAAA,CAAa,OAAO,OACnB,SAAAxB,EAACa,EAAA,CAAY,IAAKoB,EAAgB,KAAMG,EAAe,MAAOA,GAAe,MAAO,EACtF,EACF,EAGJ,IAAK,oBACH,OACEpC,EAAC,OAAI,UAAU,sCACb,SAAAA,EAACwB,EAAA,CAAa,OAAO,OACnB,SAAAxB,EAACc,EAAA,CACC,IAAKoB,EACL,KAAME,EACN,UAAU,SACV,MAAOA,GAAe,MACxB,EACF,EACF,EAGJ,IAAK,aACH,OAAOpC,EAACe,EAAA,CAAO,KAAMqB,EAAe,MAAOA,GAAe,MAAO,EAEnE,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEKC,EAAoBhC,EAOxB,CAAC,CAAE,UAAAiC,EAAY,GAAI,GAAAT,EAAI,KAAM,CAAE,MAAAU,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,WAAAf,CAAW,CAAE,EAAGC,IAAQ,CAC7G,MAAMe,EAAW3C,EAAyB,IAAI,EAExC4C,EACJ,OAAOR,GAAU,SAAWA,EAAQA,GAAStB,EAAqB,CAAE,KAAMsB,EAAO,WAAYnB,CAAe,CAAC,EAC/G,cAAOoB,GAAe,UAElBA,GAAcvB,EAAqB,CAAE,KAAMuB,EAAY,WAAYpB,CAAe,CAAC,EAGrFnB,EAAC2B,EAAA,CAAU,IAAKG,EAAK,GAAIF,EAAI,WAAYC,EACvC,UAAA9B,EAAC,OACC,UAAWO,EAAG,mDAAoD+B,EAAW,CAC3E,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAA7C,EAAC,OAAI,UAAU,wFACb,SAAAA,EAACwB,EAAA,CAAa,OAAO,uCACnB,SAAAxB,EAACS,EAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAOsC,GAAc,GAAI,MAAAH,CAAM,EAAG,EAC7E,EACF,EACF,EACA5C,EAAC,OAAI,UAAU,6BACb,SAAAC,EAAC,OACC,UAAWM,EACT,cACA,2BACA,oNACF,EAEC,UAAAoC,GAAO,KACN3C,EAAC,SAAM,IAAK8C,EAAU,UAAU,yBAAyB,IAAKH,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,YAAW,GAAC,EAE3GD,GAAK,KACJ1C,EAACmB,EAAA,CACC,UAAU,mDACV,OAAQuB,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEF1C,EAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,EACF,GACF,CAEJ,CAAC,EAED,IAAOgD,EAAQxC,EAAW6B,CAAiB",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "ref", "mediaPlayerStickyRef", "brandEquityRef", "memberEquityRef", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
+}

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

@@ -0,0 +1,16 @@
+import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js';
+import type { BrandEquityProps } from '../BrandEquity/types.js';
+import type { MemberEquityProps } from '../MemberEquity/types.js';
+export type MediaPlayerComponent = BrandEquityProps | MemberEquityProps;
+export interface MediaPlayerBaseProps extends ComponentCommonProps {
+    data: {
+        shape?: Shape;
+        theme?: Theme;
+        title?: string;
+        videoTitle?: string;
+        btnText?: string;
+        img?: Img;
+        video?: Video;
+        components?: MediaPlayerComponent[];
+    };
+}

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

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

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

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

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

@@ -1,8 +1,7 @@
+import React from 'react';
 import type { MemberEquityProps } from './types.js';
-declare const _default: {
-    (props: Omit<MemberEquityProps, 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<MemberEquityProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,40 +1,5 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import"react";import{Button as o}from"../../components/index.js";import{withStyles as g}from"../../shared/Styles.js";const b=({title:l,description:x,backgroundImage:d,primaryButton:s,secondaryButton:r,shape:p="square",theme:a="light",className:n=""})=>{const i=()=>{},m=()=>{};return e("section",{"data-ui-component-id":"MemberEquity",className:`
-        relative w-full overflow-hidden bg-[#242426]
-        ${p==="round"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
-        ${n}
-      `,children:[t("div",{className:"absolute inset-0 size-full",style:{backgroundImage:`
-            radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
-            url(${d})
-          `,backgroundSize:"cover",backgroundPosition:"center"}}),t("div",{className:`
-        xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
-        desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
-        relative 
-        mx-auto
-        flex
-        aspect-[343/200]
-        w-full items-center
-      `,children:e("div",{className:`
-          tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
-          desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
-        `,children:[e("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[t("h2",{className:`
-              member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl
-              lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]
-              max-w-[280px]
-              text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white
-            `,children:l}),t("p",{className:`
-              member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg
-              lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
-              max-w-[260px]
-              text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
-            `,children:x})]}),e("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[t(o,{theme:a,variant:"primary",onClick:i,className:`
-                member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
-                laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
-                py-2 text-xs text-white hover:bg-white hover:text-black
-                ${p==="round"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
-              `,children:s.text}),t(o,{theme:a,variant:"secondary",onClick:m,className:`
-                member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
-                laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
-                desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
-                ${p==="round"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
-              `,children:r.text})]})]})})]})};var f=g(b);export{f as default};
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import T,{useImperativeHandle as $,useRef as z}from"react";import{Button as u,Heading as H,Picture as x,Text as P}from"../../components/index.js";import{withStyles as _}from"../../shared/Styles.js";import{cn as s}from"../../helpers/utils.js";import{isVideo as f}from"../../shared/mimeType.js";import{useExposure as j}from"../../hooks/useEXposure.js";import{useAiuiContext as C}from"../AiuiProvider/index.js";import{trackUrlRef as b}from"../../shared/trackUrlRef.js";const r="image",m="member_area",R=T.forwardRef(({data:g,className:y=""},v)=>{const{title:n,description:c,backgroundImage:t,mobileBackgroundImage:o,primaryButton:a,secondaryButton:p,theme:k,shape:h,primaryButtonHandler:N,secondaryButtonHandler:B}=g,i=z(null);$(v,()=>i.current);const{trackingData:q}=C(),{profileActivated:E}=q;j(i,{componentType:r,componentName:m,componentTitle:n,componentDescription:c,memberActiveStatus:E?"active":"not active"});const w=()=>{N?.()},M=()=>{B?.()},d="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",className:s("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative h-[480px] overflow-hidden",y,{"aiui-dark":k==="dark","rounded-box":h==="rounded"}),ref:i,children:[f(t?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:t?.url,type:"video/mp4"})}):e(x,{source:t?.url,alt:t?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),f(o?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:o?.url,type:"video/mp4"})}):e(x,{source:o?.url,alt:o?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
+              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 
+              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
+            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(H,{as:"h2",size:3,className:"member-equity-title ",html:n}),e(P,{size:2,className:"member-equity-description",html:c})]}),l("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[p&&p.text&&e("a",{href:b(p.link,`$${r}_$${m}`),children:e(u,{variant:"secondary",onClick:M,className:s("member-equity-button-secondary ",d),children:p.text})}),a&&a.text&&e("a",{href:b(a.link,`$${r}_$${m}`),children:e(u,{variant:"primary",onClick:w,className:s("member-equity-button-primary ",d),children:a.text})})]})]})})]})});var G=_(R);export{G as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({\n  title,\n  description,\n  backgroundImage,\n  primaryButton,\n  secondaryButton,\n  shape = 'square',\n  theme = 'light',\n  className = '',\n}) => {\n  const handleButtonPrimaryClick = () => {\n    // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n  }\n\n  const handleButtonSecondaryClick = () => {\n    // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"MemberEquity\"\n      className={`\n        relative w-full overflow-hidden bg-[#242426]\n        ${shape === 'round' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n        ${className}\n      `}\n    >\n      <div\n        className=\"absolute inset-0 size-full\"\n        style={{\n          backgroundImage: `\n            radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),\n            url(${backgroundImage})\n          `,\n          backgroundSize: 'cover',\n          backgroundPosition: 'center',\n        }}\n      />\n      <div\n        className={`\n        xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n        desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n        relative \n        mx-auto\n        flex\n        aspect-[343/200]\n        w-full items-center\n      `}\n      >\n        <div\n          className={`\n          tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n          desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n        `}\n        >\n          <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n            <h2\n              className={`\n              member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl\n              lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]\n              max-w-[280px]\n              text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white\n            `}\n            >\n              {title}\n            </h2>\n            <p\n              className={`\n              member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg\n              lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]\n              max-w-[260px]\n              text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white\n            `}\n            >\n              {description}\n            </p>\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n            <Button\n              theme={theme}\n              variant=\"primary\"\n              onClick={handleButtonPrimaryClick}\n              className={`\n                member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]\n                laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4\n                py-2 text-xs text-white hover:bg-white hover:text-black\n                ${shape === 'round' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n              `}\n            >\n              {primaryButton.text}\n            </Button>\n            <Button\n              theme={theme}\n              variant=\"secondary\"\n              onClick={handleButtonSecondaryClick}\n              className={`\n                member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5\n                laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]\n                desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs\n                ${shape === 'round' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n              `}\n            >\n              {secondaryButton.text}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default withStyles(MemberEquity)\n"],
-  "mappings": "AAgCM,cAAAA,EA4BI,QAAAC,MA5BJ,oBAhCN,MAAkB,QAClB,OAAS,UAAAC,MAAc,4BACvB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAA4C,CAAC,CACjD,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,SACR,MAAAC,EAAQ,QACR,UAAAC,EAAY,EACd,IAAM,CACJ,MAAMC,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,OACEb,EAAC,WACC,uBAAqB,eACrB,UAAW;AAAA;AAAA,UAEPS,IAAU,QAAU,uEAAyE,EAAE;AAAA,UAC/FE,CAAS;AAAA,QAGb,UAAAZ,EAAC,OACC,UAAU,6BACV,MAAO,CACL,gBAAiB;AAAA;AAAA,kBAETO,CAAe;AAAA,YAEvB,eAAgB,QAChB,mBAAoB,QACtB,EACF,EACAP,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAAC,MACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAK,EACH,EACAL,EAAC,KACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAM,EACH,GACF,EAGAL,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,MAAOS,EACP,QAAQ,UACR,QAASE,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPH,IAAU,QAAU,8GAAgH,EAAE;AAAA,gBAGzI,SAAAF,EAAc,KACjB,EACAR,EAACE,EAAA,CACC,MAAOS,EACP,QAAQ,YACR,QAASG,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPJ,IAAU,QAAU,8GAAgH,EAAE;AAAA,gBAGzI,SAAAD,EAAgB,KACnB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOM,EAAQZ,EAAWC,CAAY",
-  "names": ["jsx", "jsxs", "Button", "withStyles", "MemberEquity", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "shape", "theme", "className", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.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 = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const { trackingData } = useAiuiContext()\n    const { profileActivated } = trackingData\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n      memberActiveStatus: profileActivated ? 'active' : 'not active',\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative h-[480px] overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text size={2} className={`member-equity-description`} html={description} />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n              {secondaryButton && secondaryButton.text && (\n                <a href={trackUrlRef(secondaryButton.link, `$${componentType}_$${componentName}`)}>\n                  <Button\n                    variant=\"secondary\"\n                    onClick={handleButtonSecondaryClick}\n                    className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  >\n                    {secondaryButton.text}\n                  </Button>\n                </a>\n              )}\n              {primaryButton && primaryButton.text && (\n                <a href={trackUrlRef(primaryButton.link, `$${componentType}_$${componentName}`)}>\n                  <Button\n                    variant=\"primary\"\n                    onClick={handleButtonPrimaryClick}\n                    className={cn('member-equity-button-primary ', lgButtonSize)}\n                  >\n                    {primaryButton.text}\n                  </Button>\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withStyles(MemberEquity)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Button", "Heading", "Picture", "Text", "withStyles", "cn", "isVideo", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "MemberEquity", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "innerRef", "trackingData", "profileActivated", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
 }

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

@@ -1,25 +1,30 @@
-import type { ComponentCommonProps } from '../../types/props.js';
+import type { ComponentCommonProps, Media, Shape, Theme } from '../../types/props.js';
 export interface MemberEquityProps extends ComponentCommonProps {
-    /** 标题 */
-    title: string;
-    /** 描述文本 */
-    description: string;
-    /** 背景图片 URL */
-    backgroundImage: string;
-    /** 主按钮配置 */
-    primaryButton: {
-        text: string;
-        href: string;
+    data: {
+        /** 标题 */
+        title: string;
+        /** 描述文本 */
+        description: string;
+        /** 背景图片/视频 URL */
+        backgroundImage?: Media;
+        mobileBackgroundImage?: Media;
+        /** 主按钮配置 */
+        primaryButton: {
+            text: string;
+            link?: string;
+        };
+        primaryButtonHandler?: () => void;
+        /** 副按钮配置 */
+        secondaryButton: {
+            text: string;
+            link?: string;
+        };
+        secondaryButtonHandler?: () => void;
+        /** 形状 */
+        shape?: Shape;
+        /** 主题 */
+        theme?: Theme;
     };
-    /** 副按钮配置 */
-    secondaryButton: {
-        text: string;
-        href: string;
-    };
-    /** 形状 */
-    shape?: 'round' | 'square';
-    /** 主题 */
-    theme?: 'light' | 'dark';
     /** 自定义类名 */
     className?: string;
 }

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MultiLayoutGraphicBlockProps } from './types';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MultiLayoutGraphicBlockProps & 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 { MultiLayoutGraphicBlockProps };

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

@@ -0,0 +1,2 @@
+import{Fragment as T,jsx as a,jsxs as s}from"react/jsx-runtime";import P,{useState as N,useEffect as V,useRef as G}from"react";import{useMediaQuery as _}from"react-responsive";import{withStyles as I}from"../../shared/Styles.js";import L from"../../components/picture.js";import y from"../../components/button.js";import{Heading as $}from"../../components/heading.js";import{Text as S}from"../../components/text.js";import{Grid as R,GridItem as B}from"../../components/gird.js";import A from"../Title/index.js";import{cn as C}from"../../helpers/utils.js";import g from"../SwiperBox/index.js";import{Tabs as D,TabsList as E,TabsTrigger as H,TabsContent as j}from"../../components/tabs.js";import{useExposure as z}from"../../hooks/useEXposure.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{trackUrlRef as Q}from"../../shared/trackUrlRef.js";import{gaTrack as U}from"../../shared/track";const k="image",b="p1_banner",f=({data:m,configuration:r,jIndex:i})=>{const[p,d]=N(!1),l=_({query:"(max-width: 1024px)"}),{trackingData:o}=M(),{profileActivated:w}=o,u=G(null);z(u,{componentType:k,componentName:b,position:i,componentTitle:m.title,componentDescription:m.description,memberActiveStatus:w?"active":"not active",navigation:r?.activeTab}),V(()=>{d(l)},[l]);const{theme:h="light",title:n,description:v,imageUrl:e,primaryButton:t,secondaryButton:c}=m,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:C("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",r?.isTab?"laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]":"laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":r?.shape==="rounded","aiui-dark":h==="dark","h-[480px]":p&&!r?.isTab,"h-[400px]":p&&r?.isTab},"text-info-primary"),ref:u,children:[a(L,{source:e?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),s("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[s("div",{children:[a($,{size:3,className:"item-title",html:n}),a(S,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:v})]}),s("div",{className:"flex gap-[16px]",children:[c&&c.text&&a("a",{href:Q(c.link,`$${k}_$${b}`),children:a(y,{className:x,variant:"secondary",children:c.text})}),t&&t.text&&a("a",{href:t.link,children:a(y,{className:x,variant:"primary",children:t.text})})]})]})]})},q=P.forwardRef((m,r)=>{const{shape:i,sectionTitle:p,groupByTab:d=!1,items:l=[],carousel:o}=m.data,{trackingData:w}=M(),{profileActivated:u}=w,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=l.map(e=>e.tabName).filter(Boolean).filter((e,t,c)=>c.indexOf(e)===t),v=n.map(e=>({tabName:e,items:l.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:r,className:"text-info-primary",children:[p&&a(A,{data:{title:p},className:"section-title"}),d?s(D,{shape:i,align:"left",defaultValue:n[0],children:[a(E,{children:n.map((e,t)=>a(H,{value:e,onClick:()=>{U({event:"ga4Event",event_name:"component_click",member_active_status:u?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:k,component_name:b,component_title:p,component_position:1,navigation:e}})},children:e},t))}),n.map((e,t)=>a(j,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(T,{children:[a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:v?.[e]||[],configuration:{shape:i,isTab:d,activeTab:e}},Slide:f,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}}}),o&&o?.items.length>0?a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:o?.items||[],configuration:{shape:i,isTab:d}},Slide:f,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}}}):null]})},t))]}):s(T,{children:[s(R,{className:"w-full",children:[l.map((e,t)=>a(B,{span:h(e.width??"full"),className:"laptop:block hidden",children:a(f,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),l.map((e,t)=>a(B,{span:h("full"),className:"laptop:hidden block",children:a(f,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),o&&o?.items.length>0?a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:o?.items||[],configuration:{shape:i}},Slide:f,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}}}):null]})]})});var pe=I(q);export{pe as default};
+//# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useEXposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    memberActiveStatus: profileActivated ? 'active' : 'not active',\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        configuration?.isTab\n          ? 'laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n          : 'laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      <Picture\n        source={imageUrl?.url}\n        className=\"inset-0 h-full overflow-hidden\"\n        imgClassName=\"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover\"\n        style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n      />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading size={3} className=\"item-title\" html={title} />\n          <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n        </div>\n        <div className=\"flex gap-[16px]\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `$${componentType}_$${componentName}`)}>\n              <Button className={lgButtonSize} variant=\"secondary\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={primaryButton.link}>\n              <Button className={lgButtonSize} variant=\"primary\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={tabName!}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    member_active_status: profileActivated ? 'active' : 'not active',\n                    event_parameters: {\n                      page_group: 'Activity Page_Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: { shape: shape, isTab: groupByTab, activeTab: tabName },\n                  }}\n                  Slide={ItemBlock}\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                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n                    Slide={ItemBlock}\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                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n              Slide={ItemBlock}\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          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Grid", "GridItem", "Title", "cn", "SwiperBox", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "useAiuiContext", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "profileActivated", "ref", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
+}

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

@@ -0,0 +1,2 @@
+export { default } from './MultiLayoutGraphicBlock.js';
+export type { MultiLayoutGraphicBlockProps } from './types.js';

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

@@ -0,0 +1,2 @@
+import{default as p}from"./MultiLayoutGraphicBlock.js";export{p as default};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,30 @@
+import type { Media, Shape, Theme } from '../../types/props';
+export type Item = {
+    theme?: Theme;
+    title: string;
+    description: string;
+    imageUrl: Media;
+    tabName?: string;
+    primaryButton: {
+        text: string;
+        link: string;
+    };
+    secondaryButton: {
+        text: string;
+        link: string;
+    };
+};
+export type MultiLayoutGraphicBlockProps = {
+    data: {
+        shape?: Shape;
+        sectionTitle?: string;
+        groupByTab?: boolean;
+        items: ({
+            width?: 'full' | 'half' | 'one-third';
+        } & Item)[];
+        carousel?: {
+            items: Item[];
+        };
+    };
+    className?: string;
+};

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

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

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

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

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

@@ -1,38 +1,58 @@
 import React from 'react';
 export interface ShelfDisplayItem {
+    id?: string;
     /** 产品图片*/
-    img: string;
+    img?: {
+        url: string;
+    };
+    handle?: string;
+    sku?: string;
     /** 折扣后价格*/
-    price: string;
-    title: string;
+    price?: string;
+    title?: string;
     /** 折扣前价格*/
-    basePrice: string;
-    subTitle: string;
+    basePrice?: string;
+    subTitle?: string;
     /** 标签*/
-    tagItems: string[];
+    tagItems?: string[];
+    tab?: string;
+    data?: ShelfDisplayItem[];
 }
+type EventType = {
+    primaryButton?: (v: any, index: number) => void;
+    secondaryButton?: (v: any, index: number) => void;
+};
 export interface ShelfDisplayProps {
-    products: ShelfDisplayItem[];
-    /** 卡片形状 */
-    itemShape?: 'round' | 'square';
-    className?: string;
-    /** 主题色*/
-    theme?: 'light' | 'dark';
-    /** 按钮形状 */
-    shape?: 'round' | 'square';
-    /** 主按钮配置 */
-    primaryButton?: string;
-    /** 副按钮配置 */
-    secondaryButton?: string;
-    /** 按钮事件*/
-    event?: {
-        primaryButton?: {
-            onClick: (v: any) => void;
-        };
-        secondaryButton?: {
-            onClick: (v: any) => void;
-        };
+    data: {
+        title?: string;
+        isShowTab?: boolean;
+        direction?: 'horizontal' | 'vertical';
+        align?: 'left' | 'center' | 'right';
+        productsTab?: any;
+        productsCard?: any;
+        /** 卡片形状 */
+        itemShape?: 'round' | 'square';
+        /** 按钮形状 */
+        shape?: 'round' | 'square';
+        /** 标签页形状*/
+        tabShape?: 'rounded' | 'square';
+        /** 主按钮配置 */
+        primaryButton?: string;
+        /** 副按钮配置 */
+        secondaryButton?: string;
+        theme?: 'light' | 'dark';
+    };
+    buildData?: {
+        categories: any[];
+        products: any[];
     };
+    /** 按钮事件*/
+    event?: EventType;
+    className?: string;
+    key?: string;
 }
-declare const ShelfDisplay: React.FC<ShelfDisplayProps>;
-export default ShelfDisplay;
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & 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;