@anker-in/headless-ui 0.0.27-alpha.84 → 0.0.27-alpha.86

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n  }\n  GSAP: any\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div className=\"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]\">\n      <div\n        className={cn('relative h-full', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, GSAP, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n      <SwiperBox\n        className={cn('!overflow-visible', className)}\n        id={'Graphic'}\n        data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n        Slide={Item}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 2.3 : 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 3.1 : 2,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 4 : 2,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n  }\n  GSAP?: any\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div className=\"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]\">\n      <div\n        className={cn('relative h-full', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, GSAP, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n      <SwiperBox\n        className={cn('!overflow-visible', className)}\n        id={'Graphic'}\n        data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n        Slide={Item}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 2.3 : 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 3.1 : 2,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 4 : 2,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
   "mappings": "aAkCQ,cAAAA,EAKA,QAAAC,MALA,oBAjCR,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCZ,EAAC,OAAI,UAAU,oFACb,SAAAC,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDS,GAAe,YAAc,OAClF,CAAC,EAED,UAAAZ,EAACO,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQI,GAAM,QAAQ,IACxB,EACAV,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACQ,EAAA,CACC,MAAO,CACL,MAAOG,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,0EACZ,EACCA,GAAM,aACLX,EAACM,EAAA,CACC,KAAMK,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAUX,EAAM,WAAyC,CAAC,CAAE,KAAAS,EAAM,UAAAG,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CAC3G,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,OACEV,EAAC,OACE,UAAAU,GAAM,OAASX,EAACS,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,KAAMI,EAAM,EACjEf,EAACK,EAAA,CACC,UAAWF,EAAG,oBAAqBW,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMH,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOM,EAAQf,EAAWS,CAAO",
   "names": ["jsx", "jsxs", "React", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Title", "Item", "data", "configuration", "Graphic", "className", "GSAP", "props", "ref", "isShow", "Graphic_default"]
 }

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

@@ -16,7 +16,7 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
         imageDescription?: string;
         attractionItems?: AttractionItem[];
     };
-    GSAP: any;
+    GSAP?: any;
 }
 declare const _default: {
     (props: Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicAttractionBlock/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n  GSAP: any\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  const { GSAP } = props\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 }} GSAP={GSAP} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
+  "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  GSAP?: any\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  const { GSAP } = props\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 }} GSAP={GSAP} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
   "mappings": "AAwCuB,cAAAA,EAWf,QAAAC,MAXe,oBAxCvB,OAAOC,MAAW,QAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAW,oBAElB,OAAS,MAAAC,MAAU,yBAsBnB,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,KAExG,CAAE,KAAAS,CAAK,EAAIT,EAEjB,OACET,EAAC,WACC,IAAKU,EACL,uBAAqB,yBACrB,UAAWH,EAAG,6BAA8BE,EAAM,SAAS,EAE1D,UAAAK,GAAgBf,EAACO,EAAA,CAAM,KAAM,CAAE,MAAOQ,CAAa,EAAG,KAAMI,EAAM,EACnElB,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,CAACE,EAAMC,IAC3BpB,EAAC,OAEC,UAAWO,EACT,8FACA,CAAE,cAAeI,IAAU,SAAU,CACvC,EAEA,UAAAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMc,EAAK,MAAO,EACrGpB,EAACI,EAAA,CACC,UAAU,kDACV,OAAQgB,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,EACApB,EAACM,EAAA,CACC,GAAG,IACH,UAAU,4DACV,KAAMc,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CAAC,EACD,IAAOC,EAAQnB,EAAWM,CAAsB",
   "names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Heading", "Text", "Title", "cn", "GraphicAttractionBlock", "props", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "GSAP", "item", "index", "GraphicAttractionBlock_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as k,Picture as y,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as N}from"../../shared/Styles.js";const x=i.forwardRef(({data:c,className:d},g)=>{const{title:l,subtitle:u,pcImage:f,mobileImage:b,primaryButton:o,secondaryButton:r,theme:h="light",caption:p=[]}=c;return a("div",{"data-ui-component-id":"HeroBanner",ref:g,className:e(h==="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",d),children:[t(y,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${f.url} , ${b.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[l&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(k,{as:"h1",size:5,className:e("hero-banner-title"),html:l}),t(m,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[r&&t(n,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:r.text}),o&&t(n,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:o.text})]})]}),p.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:p.map((v,s)=>a(i.Fragment,{children:[t(m,{className:e("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:v.title}),s<p.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});x.displayName="HeroBanner";var P=N(x);export{P as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import m,{useRef as y}from"react";import{useGSAP as N}from"@gsap/react";import w from"gsap";import{ScrollTrigger as B}from"gsap/ScrollTrigger";import{Button as c,Heading as H,Picture as R,Text as x}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as z}from"../../shared/Styles.js";const g=m.forwardRef(({data:d,className:u},f)=>{const{title:n,subtitle:b,pcImage:h,mobileImage:v,primaryButton:r,secondaryButton:l,theme:k="light",caption:s=[]}=d,p=y(null);return N(()=>{const i=p.current?.clientHeight||0;return console.log("bgImageRef height",i),w.to(p.current,{scrollTrigger:{trigger:p.current,start:"40% top",end:"bottom top",scrub:!0},y:"50%",ease:"linear"}),()=>{B.getAll().forEach(o=>o.kill())}}),a("div",{"data-ui-component-id":"HeroBanner",ref:f,className:e(k==="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",u),children:[t(R,{ref:p,className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:`${h.url} , ${v.url} 767`}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[n&&a("div",{className:"laptop:text-left max-w-[686px]",children:[t(H,{as:"h1",size:5,className:e("hero-banner-title"),html:n}),t(x,{as:"p",className:e("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:b})]}),a("div",{className:"laptop:justify-start laptop:gap-4 flex items-center gap-3",children:[l&&l.text&&t(c,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:l.text}),r&&r.text&&t(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:r.text})]})]}),s.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:s.map((i,o)=>a(m.Fragment,{children:[t(x,{className:e("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:i.title}),o<s.length-1&&t("div",{className:e("bg-info-primary w-px")})]},o))})]})});g.displayName="HeroBanner";var F=z(g);export{F as default};
 //# sourceMappingURL=HeroBanner.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\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      <Picture\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "aAoBM,cAAAA,EASI,QAAAC,MATJ,oBAnBN,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaP,EAAM,WAA4C,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAEjH,OACET,EAAC,OACC,uBAAqB,aACrB,IAAKW,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAX,EAACK,EAAA,CACC,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGU,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAf,EAAC,OAAI,UAAU,6LACZ,UAAAY,GACCZ,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,4DACZ,UAAAiB,GACClB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GACCjB,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAQ,IAAI,CAACC,EAAGC,IACfrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMc,EAAE,MACV,EACCC,EAAQF,EAAQ,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPxDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
-  "names": ["jsx", "jsxs", "React", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "c", "index", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgImageRef = useRef<HTMLPictureElement>(null)\n\n  useGSAP(() => {\n    const h = bgImageRef.current?.clientHeight || 0\n    console.log('bgImageRef height', h)\n    gsap.to(bgImageRef.current!, {\n      scrollTrigger: {\n        trigger: bgImageRef.current,\n        start: `40% top`,\n        end: 'bottom top',\n        scrub: true,\n      },\n      y: '50%',\n      ease: 'linear',\n    })\n\n    return () => {\n      ScrollTrigger.getAll().forEach(trigger => trigger.kill())\n    }\n  })\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\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      <Picture\n        ref={bgImageRef}\n        className=\"laptop:w-full absolute h-full\"\n        imgClassName=\"h-full object-cover\"\n        source={`${pcImage.url} , ${mobileImage.url} 767`}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] relative top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n        {title && (\n          <div className=\"laptop:text-left max-w-[686px]\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              as=\"p\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-4 flex items-center gap-3\">\n          {secondaryButton && secondaryButton.text && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "aA2CM,cAAAA,EAUI,QAAAC,MAVJ,oBA1CN,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,qBAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaX,EAAM,WAA4C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAatB,EAA2B,IAAI,EAElD,OAAAC,EAAQ,IAAM,CACZ,MAAMsB,EAAID,EAAW,SAAS,cAAgB,EAC9C,eAAQ,IAAI,oBAAqBC,CAAC,EAClCrB,EAAK,GAAGoB,EAAW,QAAU,CAC3B,cAAe,CACb,QAASA,EAAW,QACpB,MAAO,UACP,IAAK,aACL,MAAO,EACT,EACA,EAAG,MACH,KAAM,QACR,CAAC,EAEM,IAAM,CACXnB,EAAc,OAAO,EAAE,QAAQqB,GAAWA,EAAQ,KAAK,CAAC,CAC1D,CACF,CAAC,EAEC1B,EAAC,OACC,uBAAqB,aACrB,IAAKe,EACL,UAAWL,EACTY,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAAf,EAACS,EAAA,CACC,IAAKgB,EACL,UAAU,gCACV,aAAa,sBACb,OAAQ,GAAGN,EAAQ,GAAG,MAAMC,EAAY,GAAG,OAC7C,EAGAnB,EAAC,OAAI,UAAU,6LACZ,UAAAgB,GACChB,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACQ,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3EjB,EAACU,EAAA,CACC,GAAG,IACH,UAAWC,EACT,oHACF,EACA,KAAMO,EACR,GACF,EAGFjB,EAAC,OAAI,UAAU,4DACZ,UAAAqB,GAAmBA,EAAgB,MAClCtB,EAACO,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAe,EAAgB,KACnB,EAEDD,GAAiBA,EAAc,MAC9BrB,EAACO,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAc,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChBxB,EAAC,OAAI,UAAU,uKACZ,SAAAwB,EAAQ,IAAI,CAACI,EAAGC,IACf5B,EAACC,EAAM,SAAN,CACC,UAAAF,EAACU,EAAA,CACC,UAAWC,EACT,8KACF,EACA,KAAMiB,EAAE,MACV,EACCC,EAAQL,EAAQ,OAAS,GAAKxB,EAAC,OAAI,UAAWW,EAAG,sBAAsB,EAAG,IAPxDkB,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDhB,EAAW,YAAc,aAEzB,IAAOiB,EAAQlB,EAAWC,CAAU",
+  "names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgImageRef", "h", "trigger", "c", "index", "HeroBanner_default"]
 }

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

@@ -8,7 +8,7 @@ export interface MediaPlayerItemProps {
     quote?: string;
 }
 export interface MediaPlayerMultiProps extends ComponentCommonProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         title?: string;
         shape?: 'round' | 'square';

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } 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'\n// import gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\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 = ({\n  children,\n  id,\n  components,\n  GSAP,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n  GSAP: any\n}) => {\n  const { gsap, ScrollTrigger } = GSAP\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\n  return (\n    <div id={id} 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=\"!my-0\">\n                    <BrandEquity 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=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\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: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  id,\n  data: { title, videoTitle, btnText, img, video, theme, shape, components },\n  GSAP,\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <StickyBox id={id} components={components} GSAP={GSAP}>\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 }} GSAP={GSAP} />\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 ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\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": "aAoBM,OAkDA,YAAAA,EAjDgB,OAAAC,EADhB,QAAAC,MAAA,oBAnBN,OAA0B,UAAAC,EAAQ,aAAAC,MAAiB,QACnD,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,qBAGnB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,iBAAAC,MAAqB,mBAG9B,MAAMC,EAAe,CAAC,CAAE,SAAAC,EAAU,OAAAC,CAAO,IAAsD,CAC7F,MAAMC,EAAWJ,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACEd,EAACS,EAAA,CAAU,OAAQQ,EACjB,SAAAhB,EAACM,EAAA,CACE,WAACW,GAAYlB,EAACQ,EAAA,CAAS,KAAM,EAAG,EACjCR,EAACQ,EAAA,CAAS,KAAMU,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAYlB,EAACQ,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMW,EAAY,CAAC,CACjB,SAAAH,EACA,GAAAI,EACA,WAAAC,EACA,KAAAC,CACF,IAKM,CACJ,KAAM,CAAE,KAAAC,EAAM,cAAAC,CAAc,EAAIF,EAChC,OAAAnB,EAAU,IAAM,CACd,MAAMsB,EAAS,OAAO,OAAO,OAE7BF,EACG,SAAS,CACR,cAAe,CACb,QAAS,IAAIH,CAAE,GACf,MAAO,UACP,IAAK,QAAQK,EAAS,GAAG,YACzB,MAAO,CACT,CACF,CAAC,EACA,GAAG,IAAIL,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,EAGHnB,EAAC,OAAI,GAAImB,EAAI,UAAU,sBACrB,UAAApB,EAAAD,EAAA,CAAG,SAAAiB,EAAS,EACZhB,EAAAD,EAAA,CACG,SAAAsB,GAAY,IAAKK,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACE1B,EAAC,OAAI,UAAU,+BACb,SAAAA,EAACe,EAAA,CAAa,OAAO,QACnB,SAAAf,EAACU,EAAA,CAAY,KAAMgB,EAAe,MAAOA,GAAe,MAAO,EACjE,EACF,EAGJ,IAAK,oBACH,OACE1B,EAAC,OAAI,UAAU,sCACb,SAAAA,EAACe,EAAA,CAAa,OAAO,QACnB,SAAAf,EAACW,EAAA,CAAa,KAAMe,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,EACF,EAGJ,IAAK,aACH,OAAO1B,EAACY,EAAA,CAAO,KAAMc,EAAe,MAAOA,GAAe,MAAO,EAEnE,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,EAEMC,EAAoD,CAAC,CACzD,UAAAC,EAAY,GACZ,GAAAR,EACA,KAAM,CAAE,MAAAS,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,WAAAd,CAAW,EACzE,KAAAC,CACF,IAAM,CACJ,MAAMc,EAAWlC,EAAyB,IAAI,EAExCmC,EAAa,OAAOR,GAAU,SAAWA,EAAQA,GAAShB,EAAqB,CAAE,KAAMgB,CAAM,CAAC,EACpG,cAAOC,GAAe,UAAwBA,GAAcjB,EAAqB,CAAE,KAAMiB,CAAW,CAAC,EAGnG7B,EAACkB,EAAA,CAAU,GAAIC,EAAI,WAAYC,EAAY,KAAMC,EAC/C,UAAAtB,EAAC,OACC,UAAWI,EAAG,mDAAoDwB,EAAW,CAC3E,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAAnC,EAAC,OAAI,UAAU,wFACb,SAAAA,EAACe,EAAA,CAAa,OAAO,uCACnB,SAAAf,EAACM,EAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAO+B,GAAc,GAAI,MAAAH,CAAM,EAAG,KAAMZ,EAAM,EACzF,EACF,EACF,EACAtB,EAAC,OAAI,UAAU,6BACb,SAAAC,EAAC,OACC,UAAWG,EACT,cACA,2BACA,oNACF,EAEA,UAAAJ,EAAC,SAAM,IAAKoC,EAAU,UAAU,yBAAyB,IAAKH,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC9FjC,EAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOsC,EAAQjC,EAAWsB,CAAiB",
-  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "convertLexicalToHTML", "useMediaQuery", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "GSAP", "gsap", "ScrollTrigger", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } 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'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\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 = ({\n  children,\n  id,\n  components,\n  GSAP,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n  GSAP?: any\n}) => {\n  // const { gsap, ScrollTrigger } = GSAP\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\n  return (\n    <div id={id} 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=\"!my-0\">\n                    <BrandEquity 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=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\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: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  id,\n  data: { title, videoTitle, btnText, img, video, theme, shape, components },\n  GSAP,\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <StickyBox id={id} components={components} GSAP={GSAP}>\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 }} GSAP={GSAP} />\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 ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\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": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "GSAP", "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

@@ -3,7 +3,7 @@ import type { BrandEquityProps } from '../BrandEquity/types.js';
 import type { MemberEquityProps } from '../MemberEquity/types.js';
 export type MediaPlayerComponent = BrandEquityProps | MemberEquityProps;
 export interface MediaPlayerBaseProps extends ComponentCommonProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         shape?: Shape;
         theme?: Theme;

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

@@ -15,7 +15,7 @@ export type Item = {
     };
 };
 export type MultiLayoutGraphicBlockProps = {
-    GSAP: any;
+    GSAP?: any;
     data: {
         shape?: Shape;
         sectionTitle?: string;

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

@@ -50,7 +50,7 @@ export interface ShelfDisplayProps {
     theme?: 'light' | 'dark';
     className?: string;
     key?: string;
-    GSAP: any;
+    GSAP?: any;
 }
 declare const _default: {
     (props: Omit<ShelfDisplayProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n  GSAP: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event, GSAP }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} GSAP={GSAP} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\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,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n  GSAP?: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event, GSAP }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} GSAP={GSAP} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\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,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "GSAP", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as $}from"react/jsx-runtime";import s,{useRef as S}from"react";import{cn as c}from"../../helpers/utils.js";import{Heading as Y,Text as q}from"../../components/index.js";import{withStyles as B}from"../../shared/Styles.js";function J(u=[],f=3){const m=[];for(let n=0;n<u.length;n+=f)m.push(u.slice(n,n+f));return m}const R=s.forwardRef(({data:u,className:f="",GSAP:m},n)=>{const{gsap:d,ScrollTrigger:h,SplitText:G,useGSAP:M}=m,{title:F,features:o=[],featureChunkSize:k=3,theme:D}=u,[v,H]=s.useState(0),[A,w]=s.useState(!0),g=J(o,k),y=g.length,a=o.length>k,C=a?[...g,g[0]]:g,b=40;s.useEffect(()=>{if(!a)return;const t=setInterval(()=>{H(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[y,a]),s.useEffect(()=>{if(a)if(v===y){const t=setTimeout(()=>{w(!1),H(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,y,a]);const i=S(null),N=S(null),p=S(null);return M(()=>{if(!i.current)return;p.current=new G(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100;console.log("splitTextInstance",p);const e=p.current.words;return d.set(e,{opacity:0}),h.create({trigger:i.current,start:"bottom bottom-=10%",end:`bottom+=${t*2+80}px bottom-=10%`,scrub:!0,onUpdate:r=>{const x=r.progress,E=e.length,L=1/E,I=.5;e.forEach((P,j)=>{const z=j/E*(1-I),U=L*(1+I);let T=(x-z)/U;T=Math.max(0,Math.min(T,1)),d.set(P,{opacity:T})})}}),o&&o.length>0&&h.create({trigger:N.current,start:`bottom+=${t*2}px bottom-=10%`,end:`bottom+=${t*2+100}px bottom-=10%`,onUpdate:r=>{d.set(N.current,{opacity:r.progress})}}),()=>{p.current&&p.current.revert(),h.getAll().forEach(r=>r.kill())}},[]),$("div",{ref:n,className:c("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",f),children:[l(Y,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:c("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":D!=="dark","text-[#fff]":D==="dark"}),children:F}),o&&o.length>0&&l("div",{className:c("relative h-12 w-full max-w-[500px] overflow-hidden",`tablet:h-[${b}px]`),children:l("div",{className:c(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*b}px)`},children:C.map((t,e)=>l("div",{className:c("flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${b}px]`),children:t.map((r,x)=>$(s.Fragment,{children:[x>0&&l("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),l(q,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]",html:r.title})]},x))},e))})})]})});R.displayName="Slogan";var W=B(R);export{W as default};
+"use client";import{jsx as l,jsxs as R}from"react/jsx-runtime";import s,{useRef as y}from"react";import{useGSAP as z}from"@gsap/react";import{gsap as S}from"gsap";import{SplitText as U}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{Heading as Y,Text as q}from"../../components/index.js";import{withStyles as B}from"../../shared/Styles.js";function J(u=[],f=3){const x=[];for(let o=0;o<u.length;o+=f)x.push(u.slice(o,o+f));return x}const G=s.forwardRef(({data:u,className:f="",GSAP:x},o)=>{const{title:$,features:n=[],featureChunkSize:k=3,theme:D}=u,[d,H]=s.useState(0),[M,h]=s.useState(!0),m=J(n,k),v=m.length,a=n.length>k,A=a?[...m,m[0]]:m,w=40;s.useEffect(()=>{if(!a)return;const t=setInterval(()=>{H(e=>e+1),h(!0)},3e3);return()=>clearInterval(t)},[v,a]),s.useEffect(()=>{if(a)if(d===v){const t=setTimeout(()=>{h(!1),H(0)},500);return()=>clearTimeout(t)}else h(!0)},[d,v,a]);const i=y(null),N=y(null),p=y(null);return z(()=>{if(!i.current)return;p.current=new U(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100;console.log("splitTextInstance",p);const e=p.current.words;return S.set(e,{opacity:0}),T.create({trigger:i.current,start:"bottom bottom-=10%",end:`bottom+=${t*2+80}px bottom-=10%`,scrub:!0,onUpdate:r=>{const g=r.progress,E=e.length,F=1/E,I=.5;e.forEach((P,C)=>{const L=C/E*(1-I),j=F*(1+I);let b=(g-L)/j;b=Math.max(0,Math.min(b,1)),S.set(P,{opacity:b})})}}),n&&n.length>0&&T.create({trigger:N.current,start:`bottom+=${t*2}px bottom-=10%`,end:`bottom+=${t*2+100}px bottom-=10%`,onUpdate:r=>{S.set(N.current,{opacity:r.progress})}}),()=>{p.current&&p.current.revert(),T.getAll().forEach(r=>r.kill())}},[]),R("div",{ref:o,className:c("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",f),children:[l(Y,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:c("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":D!=="dark","text-[#fff]":D==="dark"}),children:$}),n&&n.length>0&&l("div",{className:c("relative h-12 w-full max-w-[500px] overflow-hidden",`tablet:h-[${w}px]`),children:l("div",{className:c(["flex flex-col",M?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${d*w}px)`},children:A.map((t,e)=>l("div",{className:c("flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${w}px]`),children:t.map((r,g)=>R(s.Fragment,{children:[g>0&&l("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),l(q,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]",html:r.title})]},g))},e))})})]})});G.displayName="Slogan";var tt=B(G);export{tt as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\n// import { useGSAP } from '@gsap/react'\n// import { gsap } from 'gsap'\n// import { SplitText } from 'gsap/dist/SplitText'\n// import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', GSAP }, ref) => {\n  const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const { title, features = [], featureChunkSize = 3, theme } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<typeof SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    console.log('splitTextInstance', splitTextInstance)\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 80}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=10%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=10%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n          {\n            'text-[#1D1D1F]': theme !== 'dark',\n            'text-[#fff]': theme === 'dark',\n          }\n        )}\n      >\n        {title}\n      </Heading>\n      {features && features.length > 0 && (\n        <div className={cn('relative h-12 w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n                    <Text\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useRef", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "GSAP", "ref", "gsap", "ScrollTrigger", "SplitText", "useGSAP", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', GSAP }, ref) => {\n  // const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const { title, features = [], featureChunkSize = 3, theme } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    console.log('splitTextInstance', splitTextInstance)\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 80}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=10%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=10%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n          {\n            'text-[#1D1D1F]': theme !== 'dark',\n            'text-[#fff]': theme === 'dark',\n          }\n        )}\n      >\n        {title}\n      </Heading>\n      {features && features.length > 0 && (\n        <div className={cn('relative h-12 w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n                    <Text\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withStyles", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "GSAP", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index", "Slogan_default"]
 }

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

@@ -6,7 +6,7 @@ export interface Feature {
     title: string;
 }
 export interface SloganProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         /**
          * 主标题

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

@@ -2,7 +2,7 @@ import type { Align, Shape, Theme } from '../../types/props.js';
 import type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js';
 import type { ShelfDisplayProps } from '../ShelfDisplay/index.js';
 export type TabsProps = {
-    GSAP: any;
+    GSAP?: any;
     data: {
         sectionTitle?: string;
         theme: Theme;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as u}from"react/jsx-runtime";import E,{useRef as p}from"react";import{cn as M}from"../../helpers/utils.js";import{Heading as R}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const m=E.forwardRef(({data:d,className:f,GSAP:g})=>{const{title:s,theme:h}=d,{gsap:l,ScrollTrigger:i,SplitText:y,useGSAP:T}=g,t=p(null),e=p(null);return T(()=>{if(!t.current)return;const b=t.current?.clientHeight||80;e.current=new y(t.current,{type:"words",wordsClass:"word"});const r=e.current.words;return l.set(r,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=10%",end:`bottom+=${b*2+40}px bottom-=10%`,scrub:!0,onUpdate:o=>{const w=o.progress,a=r.length,x=1/a,c=.5;r.forEach((v,H)=>{const S=H/a*(1-c),k=x*(1+c);let n=(w-S)/k;n=Math.max(0,Math.min(n,1)),l.set(v,{opacity:n})})}}),()=>{e.current&&e.current.revert(),i.getAll().forEach(o=>o.kill())}},[]),s&&u("div",{className:M("tablet:mb-[32px] mb-[24px] space-y-4",f,{"aiui-dark":h==="dark"}),children:u(R,{ref:t,as:"h2",size:5,html:s})})});m.displayName="Title";var C=P(m);export{C as default};
+"use client";import{jsx as u}from"react/jsx-runtime";import S,{useRef as a}from"react";import{useGSAP as H}from"@gsap/react";import{gsap as c}from"gsap";import{SplitText as k}from"gsap/dist/SplitText";import{ScrollTrigger as m}from"gsap/dist/ScrollTrigger";import{cn as E}from"../../helpers/utils.js";import{Heading as M}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const p=S.forwardRef(({data:f,className:d,GSAP:R})=>{const{title:s,theme:g}=f,t=a(null),r=a(null);return H(()=>{if(!t.current)return;const h=t.current?.clientHeight||80;r.current=new k(t.current,{type:"words",wordsClass:"word"});const e=r.current.words;return c.set(e,{opacity:0}),m.create({trigger:t.current,start:"bottom bottom-=10%",end:`bottom+=${h*2+40}px bottom-=10%`,scrub:!0,onUpdate:o=>{const y=o.progress,i=e.length,T=1/i,l=.5;e.forEach((b,w)=>{const x=w/i*(1-l),v=T*(1+l);let n=(y-x)/v;n=Math.max(0,Math.min(n,1)),c.set(b,{opacity:n})})}}),()=>{r.current&&r.current.revert(),m.getAll().forEach(o=>o.kill())}},[]),s&&u("div",{className:E("tablet:mb-[32px] mb-[24px] space-y-4",d,{"aiui-dark":g==="dark"}),children:u(M,{ref:t,as:"h2",size:5,html:s})})});p.displayName="Title";var U=P(p);export{U as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, GSAP }) => {\n  const { title, theme } = data\n  const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<typeof SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    const height = titleRef.current?.clientHeight || 80\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 40}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
-  "mappings": "aAiDQ,cAAAA,MAAA,oBAhDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAQL,EAAM,WAAuC,CAAC,CAAE,KAAAM,EAAM,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACxF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EACnB,CAAE,KAAAK,EAAM,cAAAC,EAAe,UAAAC,EAAW,QAAAC,CAAQ,EAAIN,EAC9CO,EAAWd,EAA2B,IAAI,EAC1Ce,EAAoBf,EAAgC,IAAI,EAC9D,OAAAa,EAAQ,IAAM,CACZ,GAAI,CAACC,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIH,EAAUE,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAL,EAAK,IAAIO,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BN,EAAc,OAAO,CACnB,QAASG,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,iBAC/B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CjB,EAAK,IAAIa,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DJ,EAAc,OAAO,EAAE,QAASiB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHpB,GACEV,EAAC,OAAI,UAAWG,EAAG,uCAAwCK,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EACrG,SAAAX,EAACI,EAAA,CAAQ,IAAKY,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOyB,EAAQ1B,EAAWC,CAAK",
-  "names": ["jsx", "React", "useRef", "cn", "Heading", "withStyles", "Title", "data", "className", "GSAP", "title", "theme", "gsap", "ScrollTrigger", "SplitText", "useGSAP", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, GSAP }) => {\n  const { title, theme } = data\n  // const { gsap, ScrollTrigger, SplitText, useGSAP } = GSAP\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    const height = titleRef.current?.clientHeight || 80\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=10%',\n      end: `bottom+=${height * 2 + 40}px bottom-=10%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={5} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
+  "mappings": "aAqDQ,cAAAA,MAAA,oBApDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACxF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIJ,EAEnBK,EAAWd,EAA2B,IAAI,EAC1Ce,EAAoBf,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CACZ,GAAI,CAACa,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIZ,EAAUW,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,OAAAb,EAAK,IAAIe,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bb,EAAc,OAAO,CACnB,QAASU,EAAS,QAClB,MAAO,qBACP,IAAK,WAAWE,EAAS,EAAI,EAAE,iBAC/B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CzB,EAAK,IAAIqB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DX,EAAc,OAAO,EAAE,QAASwB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,GACEd,EAAC,OAAI,UAAWO,EAAG,uCAAwCK,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EACrG,SAAAf,EAACQ,EAAA,CAAQ,IAAKQ,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOqB,EAAQtB,EAAWC,CAAK",
+  "names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "GSAP", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
 }

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

@@ -6,7 +6,7 @@ export interface Feature {
     title: string;
 }
 export interface TitleProps {
-    GSAP: any;
+    GSAP?: any;
     data: {
         /**
          * 主标题

package/dist/esm/components/picture.d.ts

@@ -9,5 +9,5 @@ export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement>
     /** 响应式图片，对应picture 下source 的max-width */
     deviceSizes?: number[];
 }
-declare const Picture: ({ imgClassName, source, quality, deviceSizes, className, ...rest }: PictureProps) => import("react/jsx-runtime").JSX.Element;
+declare const Picture: React.ForwardRefExoticComponent<PictureProps & React.RefAttributes<HTMLPictureElement>>;
 export default Picture;

package/dist/esm/components/picture.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as d,jsxs as A}from"react/jsx-runtime";import{useCallback as f,useMemo as I}from"react";const M=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],_=3960,x=3980,E=n=>M.some(c=>n==c),S=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),$=({imgClassName:n="",source:c="",quality:p=2,deviceSizes:u=[375,767,1023,1279,1439,1539,1919],className:h,...m})=>{const i=f(({src:e,width:r})=>{const s=r;try{const t=new URL(e);if(!E(t.hostname))return e;const o=t.pathname.split("/").pop()||"";if(S(o)&&!/_[0-9]{2,4}x/.test(e)){const[g,a]=o.split(".");return`${t.origin}${t.pathname.replace(o,`${g}_${s<_?s:x}x.${a}`)}`}}catch{return e}},[]),l=f(({srcArr:e,width:r})=>{const s=r*p,t=i({src:e[0][0],width:s});let o;return e.forEach(a=>{var b=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:b,width:s}))}),d("source",{srcSet:o||t,media:`(max-width: ${r}px)`},r)},[i,p]),w=I(()=>{if(typeof c!="string"||!c)return[];let e;try{e=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(t=>t.split(" ").filter(Boolean))}catch(t){return console.log(t),[]}const r=u.map(t=>l({srcArr:e,width:t})),s=i({src:e[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,...m},"default")),r},[u,n,i,p,m,c,l]);return A("picture",{className:`block overflow-hidden ${h}`,children:[w,m.children]})};var k=$;export{k as default};
+"use client";import{jsx as d,jsxs as L}from"react/jsx-runtime";import b,{useCallback as f,useMemo as E}from"react";const I=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],_=3960,x=3980,S=n=>I.some(c=>n==c),$=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),A=b.forwardRef(({imgClassName:n="",source:c="",quality:p=2,deviceSizes:u=[375,767,1023,1279,1439,1539,1919],className:h,...m},w)=>{const i=f(({src:t,width:r})=>{const s=r;try{const e=new URL(t);if(!S(e.hostname))return t;const o=e.pathname.split("/").pop()||"";if($(o)&&!/_[0-9]{2,4}x/.test(t)){const[g,a]=o.split(".");return`${e.origin}${e.pathname.replace(o,`${g}_${s<_?s:x}x.${a}`)}`}}catch{return t}},[]),l=f(({srcArr:t,width:r})=>{const s=r*p,e=i({src:t[0][0],width:s});let o;return t.forEach(a=>{var P=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:P,width:s}))}),d("source",{srcSet:o||e,media:`(max-width: ${r}px)`},r)},[i,p]),M=E(()=>{if(typeof c!="string"||!c)return[];let t;try{t=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean))}catch(e){return console.log(e),[]}const r=u.map(e=>l({srcArr:t,width:e})),s=i({src:t[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,...m},"default")),r},[u,n,i,p,m,c,l]);return L("picture",{ref:w,className:`block overflow-hidden ${h}`,children:[M,m.children]})});var y=A;export{y as default};
 //# sourceMappingURL=picture.js.map

package/dist/esm/components/picture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = ({\n  imgClassName = '',\n  source = '',\n  quality = 2,\n  deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n  className,\n  ...rest\n}: PictureProps) => {\n  const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n    const size = width\n    try {\n      const parsedUrl = new URL(src)\n      if (!isMatchDomain(parsedUrl.hostname)) {\n        return src\n      }\n      const fileName = parsedUrl.pathname.split('/').pop() || ''\n      if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n        const [name, extension] = fileName.split('.')\n        return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n          fileName,\n          `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n        )}`\n      }\n    } catch (error) {\n      return src\n    }\n  }, [])\n\n  const sourceSrcSet = useCallback(\n    ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n      const computedWidth = width * quality\n      const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n      let result\n      srcArr.forEach(ele => {\n        var img = ele[0]\n        if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n          result = imgSrcSetsize({ src: img, width: computedWidth })\n        }\n      })\n      const srcset = result || def\n      return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n    },\n    [imgSrcSetsize, quality]\n  )\n\n  const sourceList = useMemo(() => {\n    if (typeof source !== 'string' || !source) return []\n    let srcArr\n    try {\n      srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n    } catch (error) {\n      console.log(error)\n      return []\n    }\n    const sourceList = deviceSizes.map(width => {\n      return sourceSrcSet({ srcArr, width })\n    })\n\n    const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n    sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n    return sourceList\n  }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n  return (\n    <picture className={`block overflow-hidden ${className}`}>\n      {sourceList}\n      {rest.children}\n    </picture>\n  )\n}\nexport default Picture\n"],
-  "mappings": "aAgEa,cAAAA,EA6BT,QAAAC,MA7BS,oBA/Db,OAAgB,eAAAC,EAAa,WAAAC,MAAe,QAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAiBC,GACdJ,EAAgC,KAAKK,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAEzGC,EAAU,CAAC,CACf,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,EACrD,UAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAgBjB,EAAY,CAAC,CAAE,IAAAkB,EAAK,MAAAC,CAAM,IAAsC,CACpF,MAAMC,EAAOD,EACb,GAAI,CACF,MAAME,EAAY,IAAI,IAAIH,CAAG,EAC7B,GAAI,CAACb,EAAcgB,EAAU,QAAQ,EACnC,OAAOH,EAET,MAAMT,EAAWY,EAAU,SAAS,MAAM,GAAG,EAAE,IAAI,GAAK,GACxD,GAAIb,EAAsBC,CAAQ,GAAK,CAAC,eAAe,KAAKS,CAAG,EAAG,CAChE,KAAM,CAACI,EAAMC,CAAS,EAAId,EAAS,MAAM,GAAG,EAC5C,MAAO,GAAGY,EAAU,MAAM,GAAGA,EAAU,SAAS,QAC9CZ,EACA,GAAGa,CAAI,IAAIF,EAAOjB,EAAWiB,EAAOhB,CAAc,KAAKmB,CAAS,EAClE,CAAC,EACH,CACF,MAAgB,CACd,OAAOL,CACT,CACF,EAAG,CAAC,CAAC,EAECM,EAAexB,EACnB,CAAC,CAAE,OAAAyB,EAAQ,MAAAN,CAAM,IAA6C,CAC5D,MAAMO,EAAgBP,EAAQN,EACxBc,EAAMV,EAAc,CAAE,IAAKQ,EAAO,CAAC,EAAE,CAAC,EAAG,MAAOC,CAAc,CAAC,EACrE,IAAIE,EACJ,OAAAH,EAAO,QAAQI,GAAO,CACpB,IAAIC,EAAMD,EAAI,CAAC,EACXA,EAAI,OAAS,GAAK,SAASA,EAAI,CAAC,EAAG,EAAE,GAAKV,IAC5CS,EAASX,EAAc,CAAE,IAAKa,EAAK,MAAOJ,CAAc,CAAC,EAE7D,CAAC,EAEM5B,EAAC,UAAmB,OADZ8B,GAAUD,EACkB,MAAO,eAAeR,CAAK,OAAlDA,CAAyD,CAC/E,EACA,CAACF,EAAeJ,CAAO,CACzB,EAEMkB,EAAa9B,EAAQ,IAAM,CAC/B,GAAI,OAAOW,GAAW,UAAY,CAACA,EAAQ,MAAO,CAAC,EACnD,IAAIa,EACJ,GAAI,CACFA,EAASb,EACN,QAAQ,UAAW,EAAE,EACrB,QAAQ,SAAU,GAAG,EACrB,MAAM,GAAG,EACT,IAAIoB,GAAQA,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC,CAChD,OAASC,EAAO,CACd,eAAQ,IAAIA,CAAK,EACV,CAAC,CACV,CACA,MAAMF,EAAajB,EAAY,IAAIK,GAC1BK,EAAa,CAAE,OAAAC,EAAQ,MAAAN,CAAM,CAAC,CACtC,EAEKW,EAAMb,EAAc,CAAE,IAAKQ,EAAO,CAAC,EAAE,CAAC,EAAG,MAAO,KAAOZ,CAAQ,CAAC,EAEtE,OAAAkB,EAAW,KAAKjC,EAAC,OAAkB,IAAKgC,EAAK,UAAW,UAAUnB,CAAY,GAAK,GAAGK,GAA7D,SAAmE,CAAE,EACvFe,CACT,EAAG,CAACjB,EAAaH,EAAcM,EAAeJ,EAASG,EAAMJ,EAAQY,CAAY,CAAC,EAElF,OACEzB,EAAC,WAAQ,UAAW,yBAAyBgB,CAAS,GACnD,UAAAgB,EACAf,EAAK,UACR,CAEJ,EACA,IAAOkB,EAAQxB",
-  "names": ["jsx", "jsxs", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n      className,\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      try {\n        const parsedUrl = new URL(src)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return src\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n          const [name, extension] = fileName.split('.')\n          return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n            fileName,\n            `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n          )}`\n        }\n      } catch (error) {\n        return src\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n        let result\n        srcArr.forEach(ele => {\n          var img = ele[0]\n          if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n            result = imgSrcSetsize({ src: img, width: computedWidth })\n          }\n        })\n        const srcset = result || def\n        return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n      let srcArr\n      try {\n        srcArr = source\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\s\\s+/g, ' ')\n          .split(',')\n          .map(item => item.split(' ').filter(Boolean))\n      } catch (error) {\n        console.log(error)\n        return []\n      }\n      const sourceList = deviceSizes.map(width => {\n        return sourceSrcSet({ srcArr, width })\n      })\n\n      const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n      return sourceList\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
 }

package/dist/esm/components/tabs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as s from"react";import{cn as p}from"../helpers/index.js";import*as i from"@radix-ui/react-tabs";import{cva as l}from"class-variance-authority";const f=s.createContext({align:"left",shape:"square"}),d=s.forwardRef(({children:e,align:t="left",shape:a="square",...o},n)=>r(i.Root,{ref:n,...o,children:r(f.Provider,{value:{align:t,shape:a},children:e})}));d.displayName="Tabs";const c=l("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),u=l("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),m=s.forwardRef(({className:e,...t},a)=>{const{align:o,shape:n}=s.useContext(f);return r(i.List,{ref:a,className:p("bg-tabs-list-bg flex w-fit overflow-x-auto p-1",c({align:o,shape:n}),e),...t})});m.displayName=i.List.displayName;const g=s.forwardRef(({className:e,...t},a)=>{const{shape:o}=s.useContext(f);return r(i.Trigger,{ref:a,className:p("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",e,u({shape:o})),...t})});g.displayName=i.Trigger.displayName;const b=s.forwardRef(({className:e,...t},a)=>r(i.Content,{ref:a,className:p(e),...t}));b.displayName=i.Content.displayName;export{d as Tabs,b as TabsContent,m as TabsList,g as TabsTrigger};
+"use client";import{jsx as n}from"react/jsx-runtime";import*as s from"react";import{cn as p}from"../helpers/index.js";import*as o from"@radix-ui/react-tabs";import{cva as d}from"class-variance-authority";const l=s.createContext({align:"left",shape:"square"}),m=s.forwardRef(({children:e,align:t="left",shape:a="square",...i},r)=>n(o.Root,{ref:r,...i,children:n(l.Provider,{value:{align:t,shape:a},children:e})}));m.displayName="Tabs";const h=d("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),R=d("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),c=s.forwardRef(({className:e,...t},a)=>{const{align:i,shape:r}=s.useContext(l);return n(o.List,{ref:a,className:p("bg-tabs-list-bg flex w-fit overflow-x-auto p-1",h({align:i,shape:r}),e),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...t})});c.displayName=o.List.displayName;const g=s.forwardRef(({className:e,onClick:t,...a},i)=>{const{shape:r}=s.useContext(l),u=f=>{t?.(f),f.currentTarget.scrollIntoView({behavior:"smooth",inline:"center"})};return n(o.Trigger,{ref:i,className:p("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",e,R({shape:r})),onClick:u,...a})});g.displayName=o.Trigger.displayName;const b=s.forwardRef(({className:e,...t},a)=>n(o.Content,{ref:a,className:p(e),...t}));b.displayName=o.Content.displayName;export{m as Tabs,b as TabsContent,c as TabsList,g as TabsTrigger};
 //# sourceMappingURL=tabs.js.map