npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.68 → 0.0.27-alpha.72 - Mend

@anker-in/headless-ui 0.0.27-alpha.68 → 0.0.27-alpha.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: {\n      imgUrl: Img\n      title: string\n      textColor?: string\n    }[]\n  }\n  shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, ...props }, ref) => {\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <Carousel\n        ref={ref}\n        opts={{\n          align: 'start',\n        }}\n        className={className}\n      >\n        <React.Fragment key=\".0\">\n          <CarouselContent>\n            {data?.items?.map((item, index) => (\n              <CarouselItem\n                key={index + item?.title}\n                className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n              >\n                <div\n                  className={cn('relative h-full', {\n                    ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n                  })}\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n                    source={item?.imgUrl?.url}\n                  />\n                  <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n                    <Text\n                      html={item?.title}\n                      style={{\n                        color: item?.textColor,\n                      }}\n                      className=\"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium\"\n                    />\n                  </div>\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </React.Fragment>\n      </Carousel>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "aAyBsB,cAAAA,EAeN,QAAAC,MAfM,oBAxBtB,OAAOC,MAAwB,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAgBlB,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,KAAAU,EAAM,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAElGf,EAAC,OACE,UAAAW,GAAM,OAASZ,EAACU,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,EACrDZ,EAACK,EAAA,CACC,IAAKW,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWF,EAEX,SAAAd,EAACE,EAAM,SAAN,CACC,SAAAF,EAACM,EAAA,CACE,SAAAM,GAAM,OAAO,IAAI,CAACK,EAAMC,IACvBlB,EAACO,EAAA,CAEC,UAAU,iGAEV,SAAAN,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDU,IAAU,OAC/D,CAAC,EAED,UAAAb,EAACQ,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQS,GAAM,QAAQ,IACxB,EACAjB,EAAC,OAAI,UAAU,8DACb,SAAAA,EAACS,EAAA,CACC,KAAMQ,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAtBKC,EAAQD,GAAM,KAuBrB,CACD,EACH,GA7BkB,IA8BpB,EACF,GACF,CAEH,EAEDN,EAAQ,YAAc,UAEtB,IAAOQ,EAAQf,EAAWO,CAAO",
-  "names": ["jsx", "jsxs", "React", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Title", "Graphic", "data", "shape", "className", "props", "ref", "item", "index", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem, 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\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: {\n      imgUrl: Img\n      title: string\n      description?: string\n      textColor?: string\n    }[]\n  }\n  shape?: 'round' | 'square'\n  GSAP: any\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, shape, className, GSAP, ...props }, ref) => {\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} GSAP={GSAP} />}\n      <Carousel\n        ref={ref}\n        opts={{\n          align: 'start',\n        }}\n        className={className}\n      >\n        <React.Fragment key=\".0\">\n          <CarouselContent>\n            {data?.items?.map((item, index) => (\n              <CarouselItem\n                key={index + item?.title}\n                className=\"laptop:h-[384px] desktop:h-[480px] laptop:pl-4 h-[360px] flex-1 shrink-0 pl-3 md:basis-[296px]\"\n              >\n                <div\n                  className={cn('relative h-full', {\n                    ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n                  })}\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n                    source={item?.imgUrl?.url}\n                  />\n                  <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n                    <Heading\n                      html={item?.title}\n                      style={{\n                        color: item?.textColor,\n                      }}\n                      as=\"h3\"\n                      className=\"lg-desktop:text-[32px] desktop:text-[24px] text-lines-2 text-[24px] font-bold leading-[1.2]\"\n                    />\n                    {item?.description && (\n                      <Text\n                        html={item?.description}\n                        // eslint-disable-next-line tailwindcss/classnames-order\n                        className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-medium\"\n                      />\n                    )}\n                  </div>\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </React.Fragment>\n      </Carousel>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "aA2BsB,cAAAA,EAyBJ,QAAAC,MAzBI,oBA1BtB,OAAOC,MAAwB,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,EAAc,WAAAC,MAAe,4BACjE,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAkBlB,MAAMC,EAAUV,EAAM,WAAyC,CAAC,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAExGjB,EAAC,OACE,UAAAY,GAAM,OAASb,EAACW,EAAA,CAAM,KAAM,CAAE,MAAOE,GAAM,KAAM,EAAG,KAAMG,EAAM,EACjEhB,EAACK,EAAA,CACC,IAAKa,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWH,EAEX,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACM,EAAA,CACE,SAAAO,GAAM,OAAO,IAAI,CAACM,EAAMC,IACvBpB,EAACO,EAAA,CAEC,UAAU,iGAEV,SAAAN,EAAC,OACC,UAAWE,EAAG,kBAAmB,CAC9B,gDAAkDW,IAAU,OAC/D,CAAC,EAED,UAAAd,EAACS,EAAA,CACC,UAAU,SACV,aAAa,kEACb,OAAQU,GAAM,QAAQ,IACxB,EACAlB,EAAC,OAAI,UAAU,8DACb,UAAAD,EAACQ,EAAA,CACC,KAAMW,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,8FACZ,EACCA,GAAM,aACLnB,EAACU,EAAA,CACC,KAAMS,GAAM,YAEZ,UAAU,2DACZ,GAEJ,GACF,GA9BKC,EAAQD,GAAM,KA+BrB,CACD,EACH,GArCkB,IAsCpB,EACF,GACF,CAEH,EAEDP,EAAQ,YAAc,UAEtB,IAAOS,EAAQjB,EAAWQ,CAAO",
+  "names": ["jsx", "jsxs", "React", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Heading", "Picture", "Text", "Title", "Graphic", "data", "shape", "className", "GSAP", "props", "ref", "item", "index", "Graphic_default"]
 }

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

@@ -16,6 +16,7 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
         imageDescription?: string;
         attractionItems?: AttractionItem[];
     };
+    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 CHANGED Viewed

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

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

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

@@ -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 y,Picture as N,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as k}from"../../shared/Styles.js";const c=i.forwardRef(({data:x,className:d},u)=>{const{title:l,subtitle:g,pcImage:f,mobileImage:b,primaryButton:o,secondaryButton:r,theme:h="light",products:p=[]}=x;return a("div",{"data-ui-component-id":"HeroBanner",ref:u,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(N,{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] space-y-4 text-center",children:[t(y,{as:"h1",size:5,className:e("hero-banner-title"),html:l}),t(m,{className:e("hero-banner-subtitle laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px]"),html:g})]}),a("div",{className:"laptop:justify-start flex items-center justify-center gap-4",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] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]"),html:v.title}),s<p.length-1&&t("div",{className:e("bg-info-primary w-px")})]},s))})]})});c.displayName="HeroBanner";var j=k(c);export{j as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import i from"react";import{Button as n,Heading as y,Picture as N,Text as m}from"../../components/index.js";import{cn as e}from"../../helpers/index.js";import{withStyles as k}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",products: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(N,{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(y,{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] font-semibold"),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] text-[12px] font-medium 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=k(x);export{P as default};
 //# sourceMappingURL=HeroBanner.js.map

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

@@ -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', products = [] } = 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] space-y-4 text-center\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />\n            <Text\n              className={cn('hero-banner-subtitle laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px]')}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start flex items-center justify-center gap-4\">\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      {products.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          {products.map((product, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={product.title}\n              />\n              {index < products.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,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAElH,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,uDACb,UAAAD,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMM,EAAO,EAC3Eb,EAACM,EAAA,CACC,UAAWC,EAAG,oEAAoE,EAClF,KAAMO,EACR,GACF,EAGFb,EAAC,OAAI,UAAU,8DACZ,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,EAAS,OAAS,GACjBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAS,IAAI,CAACC,EAASC,IACtBrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,0GACF,EACA,KAAMc,EAAQ,MAChB,EACCC,EAAQF,EAAS,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPzDe,CAQrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
+  "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', products = [] } = 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] font-semibold'\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      {products.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          {products.map((product, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] text-[12px] font-medium leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={product.title}\n              />\n              {index < products.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,SAAAC,EAAW,CAAC,CAAE,EAAIV,EAElH,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,kIACF,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,EAAS,OAAS,GACjBpB,EAAC,OAAI,UAAU,uKACZ,SAAAoB,EAAS,IAAI,CAACC,EAASC,IACtBrB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACM,EAAA,CACC,UAAWC,EACT,0GACF,EACA,KAAMc,EAAQ,MAChB,EACCC,EAAQF,EAAS,OAAS,GAAKpB,EAAC,OAAI,UAAWO,EAAG,sBAAsB,EAAG,IAPzDe,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", "products", "product", "index", "HeroBanner_default"]
 }

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';
+import type { Img } from '../../types/props.js';
+interface MarqueeListProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const MarqueeList: React.ForwardRefExoticComponent<MarqueeListProps & React.RefAttributes<HTMLDivElement>>;
+interface MarqueeImageContentProps {
+    data: {
+        image: Img;
+    };
+    className?: string;
+}
+declare const MarqueeImageContent: {
+    ({ data: { image }, className }: MarqueeImageContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface MarqueeTextContentProps {
+    data: {
+        text: string;
+    };
+    className?: string;
+}
+declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: {
+    (props: Omit<Omit<FastMarqueeProps, "ref"> & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { MarqueeList, MarqueeImageContent, MarqueeTextContent };
+export type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps };

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport FastMarquee from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { Img } from '../../types/props.js'\n\nconst Marquee = React.forwardRef<HTMLDivElement, FastMarqueeProps>(({ children, ...props }, ref) => {\n  return (\n    <FastMarquee {...props} ref={ref}>\n      {children}\n    </FastMarquee>\n  )\n})\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst MarqueeList = React.forwardRef<HTMLDivElement, MarqueeListProps>(({ className, children, ...props }, ref) => {\n  return (\n    <div className={cn('laptop:gap-16 flex items-center gap-6', className)} ref={ref}>\n      {children}\n    </div>\n  )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n  data: {\n    image: Img\n  }\n  className?: string\n}\n\nconst MarqueeImageContent = ({ data: { image }, className }: MarqueeImageContentProps) => {\n  return (\n    <Picture\n      source={image.url}\n      alt={image.alt}\n      className={cn('laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]', className)}\n      imgClassName=\"object-cover\"\n    />\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n  data: {\n    text: string\n  }\n  className?: string\n}\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(\n  ({ data: { text }, className }, ref) => {\n    return (\n      <Text\n        as=\"div\"\n        ref={ref}\n        html={text}\n        className={cn(\n          'text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]',\n          className\n        )}\n      />\n    )\n  }\n)\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }\n"],
+  "mappings": "aAWI,cAAAA,MAAA,oBAVJ,OAAOC,MAAW,QAClB,OAAOC,MAAiB,qBACxB,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAUN,EAAM,WAA6C,CAAC,CAAE,SAAAO,EAAU,GAAGC,CAAM,EAAGC,IAExFV,EAACE,EAAA,CAAa,GAAGO,EAAO,IAAKC,EAC1B,SAAAF,EACH,CAEH,EACDD,EAAQ,YAAc,UAOtB,MAAMI,EAAcV,EAAM,WAA6C,CAAC,CAAE,UAAAW,EAAW,SAAAJ,EAAU,GAAGC,CAAM,EAAGC,IAEvGV,EAAC,OAAI,UAAWK,EAAG,wCAAyCO,CAAS,EAAG,IAAKF,EAC1E,SAAAF,EACH,CAEH,EAEDG,EAAY,YAAc,cAS1B,MAAME,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAC,CAAM,EAAG,UAAAF,CAAU,IAEtDZ,EAACG,EAAA,CACC,OAAQW,EAAM,IACd,IAAKA,EAAM,IACX,UAAWT,EAAG,qDAAsDO,CAAS,EAC7E,aAAa,eACf,EAIJC,EAAoB,YAAc,sBASlC,MAAME,EAAqBd,EAAM,WAC/B,CAAC,CAAE,KAAM,CAAE,KAAAe,CAAK,EAAG,UAAAJ,CAAU,EAAGF,IAE5BV,EAACI,EAAA,CACC,GAAG,MACH,IAAKM,EACL,KAAMM,EACN,UAAWX,EACT,8FACAO,CACF,EACF,CAGN,EAEAG,EAAmB,YAAc,qBAEjC,IAAOE,EAAQX,EAAWC,CAAO",
+  "names": ["jsx", "React", "FastMarquee", "Picture", "Text", "cn", "withStyles", "Marquee", "children", "props", "ref", "MarqueeList", "className", "MarqueeImageContent", "image", "MarqueeTextContent", "text", "Marquee_default"]
+}

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

@@ -1,35 +1,3 @@
-import React from 'react';
-import { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';
-import type { Img } from '../../types/props.js';
-interface MarqueeListProps {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const MarqueeList: React.ForwardRefExoticComponent<MarqueeListProps & React.RefAttributes<HTMLDivElement>>;
-interface MarqueeImageContentProps {
-    data: {
-        image: Img;
-    };
-    className?: string;
-}
-declare const MarqueeImageContent: {
-    ({ data: { image }, className }: MarqueeImageContentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-interface MarqueeTextContentProps {
-    data: {
-        text: string;
-    };
-    className?: string;
-}
-declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: {
-    (props: Omit<FastMarqueeProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default _default;
-export { MarqueeList, MarqueeImageContent, MarqueeTextContent };
-export type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps };
+export { default } from './Marquee.js';
+export { MarqueeList, MarqueeImageContent, MarqueeTextContent } from './Marquee.js';
+export type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps, } from './Marquee.js';

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/biz-components/Marquee/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport FastMarquee from 'react-fast-marquee'\nimport { type MarqueeProps as FastMarqueeProps } from 'react-fast-marquee'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { Img } from '../../types/props.js'\n\nconst Marquee = ({ children, ...props }: FastMarqueeProps) => {\n  return <FastMarquee {...props}>{children}</FastMarquee>\n}\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeListProps {\n  children?: React.ReactNode\n  className?: string\n}\n\nconst MarqueeList = React.forwardRef<HTMLDivElement, MarqueeListProps>(({ className, children, ...props }, ref) => {\n  return (\n    <div className={cn('laptop:gap-16 flex items-center gap-6', className)} ref={ref}>\n      {children}\n    </div>\n  )\n})\n\nMarqueeList.displayName = 'MarqueeList'\n\ninterface MarqueeImageContentProps {\n  data: {\n    image: Img\n  }\n  className?: string\n}\n\nconst MarqueeImageContent = ({ data: { image }, className }: MarqueeImageContentProps) => {\n  return (\n    <Picture\n      source={image?.url}\n      alt={image?.alt}\n      className={cn('laptop:h-[80px] laptop:w-[120px] h-[48px] w-[72px]', className)}\n      imgClassName=\"object-cover\"\n    />\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\ninterface MarqueeTextContentProps {\n  data: {\n    text: string\n  }\n  className?: string\n}\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(\n  ({ data: { text }, className }, ref) => {\n    return (\n      <Text\n        as=\"div\"\n        ref={ref}\n        html={text}\n        className={cn(\n          'text-lines-2 flex size-14 items-center justify-center text-nowrap font-medium leading-[1.2]',\n          className\n        )}\n      />\n    )\n  }\n)\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeList, MarqueeImageContent, MarqueeTextContent }\nexport type { FastMarqueeProps, MarqueeListProps, MarqueeImageContentProps, MarqueeTextContentProps }\n"],
-  "mappings": "aAUS,cAAAA,MAAA,oBATT,OAAOC,MAAW,QAClB,OAAOC,MAAiB,qBACxB,MAAsD,qBACtD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAU,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAC7BT,EAACE,EAAA,CAAa,GAAGO,EAAQ,SAAAD,EAAS,EAE3CD,EAAQ,YAAc,UAOtB,MAAMG,EAAcT,EAAM,WAA6C,CAAC,CAAE,UAAAU,EAAW,SAAAH,EAAU,GAAGC,CAAM,EAAGG,IAEvGZ,EAAC,OAAI,UAAWK,EAAG,wCAAyCM,CAAS,EAAG,IAAKC,EAC1E,SAAAJ,EACH,CAEH,EAEDE,EAAY,YAAc,cAS1B,MAAMG,EAAsB,CAAC,CAAE,KAAM,CAAE,MAAAC,CAAM,EAAG,UAAAH,CAAU,IAEtDX,EAACG,EAAA,CACC,OAAQW,GAAO,IACf,IAAKA,GAAO,IACZ,UAAWT,EAAG,qDAAsDM,CAAS,EAC7E,aAAa,eACf,EAIJE,EAAoB,YAAc,sBASlC,MAAME,EAAqBd,EAAM,WAC/B,CAAC,CAAE,KAAM,CAAE,KAAAe,CAAK,EAAG,UAAAL,CAAU,EAAGC,IAE5BZ,EAACI,EAAA,CACC,GAAG,MACH,IAAKQ,EACL,KAAMI,EACN,UAAWX,EACT,8FACAM,CACF,EACF,CAGN,EAEAI,EAAmB,YAAc,qBAEjC,IAAOE,EAAQX,EAAWC,CAAO",
-  "names": ["jsx", "React", "FastMarquee", "Picture", "Text", "cn", "withStyles", "Marquee", "children", "props", "MarqueeList", "className", "ref", "MarqueeImageContent", "image", "MarqueeTextContent", "text", "Marquee_default"]
+  "sources": ["../../../../src/biz-components/Marquee/index.ts"],
+  "sourcesContent": ["export { default } from './Marquee.js'\nexport { MarqueeList, MarqueeImageContent, MarqueeTextContent } from './Marquee.js'\nexport type {\n  FastMarqueeProps,\n  MarqueeListProps,\n  MarqueeImageContentProps,\n  MarqueeTextContentProps,\n} from './Marquee.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,eACxB,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B",
+  "names": ["default", "MarqueeList", "MarqueeImageContent", "MarqueeTextContent"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as g,useRef as b}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import x from"../../components/picture.js";import w from"../../components/button.js";import{convertLexicalToHTML as p}from"@payloadcms/richtext-lexical/html";const k=({className:u="",data:{title:a,videoTitle:s,btnText:r,img:c,video:m,theme:f,shape:y}})=>{const[l,i]=g(!1),e=b(null),n=typeof a=="string"?a:a&&p({data:a}),v=typeof s=="string"?s:s&&p({data:s});return o("div",{className:d(" relative w-full",u,{"aiui-dark":f==="dark","rounded-box":y==="rounded"}),children:[o("div",{className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!l&&n?n:v||""}}),!l&&r&&t(w,{variant:"secondary",className:d("member-equity-button-secondary"),onClick:()=>{l?(e.current&&e.current.pause(),i(!1)):(e.current&&e.current.play(),i(!0))},children:r})]}),o("div",{className:"media-cover 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] relative overflow-hidden",children:[t("video",{ref:e,className:"size-full object-cover",src:m?.url,autoPlay:!0,muted:!0,loop:!0}),!l&&t(x,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c?.url,alt:c?.alt,imgClassName:"w-full h-full object-cover"}),t("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})};var _=h(k);export{_ as default};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as y,useRef as h}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as b}from"../../shared/Styles.js";import x from"../../components/picture.js";import k from"../../components/button.js";import{convertLexicalToHTML as p}from"@payloadcms/richtext-lexical/html";import{ChevronRightIcon as w}from"@storybook/icons";const N=({className:m="",data:{title:a,videoTitle:s,btnText:r,img:c,video:u,theme:f,shape:v}})=>{const[l,i]=y(!1),t=h(null),n=typeof a=="string"?a:a&&p({data:a}),g=typeof s=="string"?s:s&&p({data:s});return o("div",{className:d(" relative w-full",m,{"aiui-dark":f==="dark","rounded-box":v==="rounded"}),children:[o("div",{className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!l&&n?n:g||""}}),!l&&r&&o(k,{variant:"link",className:d("member-equity-button-secondary"),onClick:()=>{l?(t.current&&t.current.pause(),i(!1)):(t.current&&t.current.play(),i(!0))},children:[r,e("div",{className:"ml-0.5 size-3.5",children:e(w,{})})]})]}),o("div",{className:"media-cover 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] relative overflow-hidden",children:[e("video",{ref:t,className:"size-full object-cover",src:u?.url,autoPlay:!0,muted:!0,loop:!0}),!l&&e(x,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c?.url,alt:c?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})};var j=b(N);export{j as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  const videoTitle_html =\n    typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <div\n      className={cn(' relative 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 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n        <div\n          className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n          dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n        />\n        {!isPlaying && btnText && (\n          <Button\n            variant=\"secondary\"\n            className={cn('member-equity-button-secondary')}\n            onClick={() => {\n              if (isPlaying) {\n                if (videoRef.current) {\n                  videoRef.current.pause()\n                }\n                setIsPlaying(false)\n              } else {\n                if (videoRef.current) {\n                  videoRef.current.play()\n                }\n                setIsPlaying(true)\n              }\n            }}\n          >\n            {btnText}\n          </Button>\n        )}\n      </div>\n      <div className=\"media-cover 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] relative overflow-hidden\">\n        <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n        {!isPlaying && (\n          <Picture\n            className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n            source={img?.url}\n            alt={img?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n        <div\n          className=\"absolute left-0 top-0 z-10 size-full\"\n          style={{\n            background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "aA2BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA1BN,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIjB,EAAS,EAAK,EAC1CkB,EAAWjB,EAAyB,IAAI,EAExCkB,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASH,EAAqB,CAAE,KAAMG,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,GAAcJ,EAAqB,CAAE,KAAMI,CAAW,CAAC,EAEvG,OACEX,EAAC,OACC,UAAWG,EAAG,mBAAoBM,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAhB,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACkB,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,GACbb,EAACO,EAAA,CACC,QAAQ,YACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTc,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,SAAAN,EACH,GAEJ,EACAZ,EAAC,OAAI,UAAU,0PACb,UAAAD,EAAC,SAAM,IAAKoB,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC7F,CAACG,GACAlB,EAACM,EAAA,CACC,UAAU,mDACV,OAAQQ,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFd,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,CAEJ,EAEA,IAAOuB,EAAQlB,EAAWI,CAAe",
-  "names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "videoTitle_html", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { ChevronRightIcon } from '@storybook/icons'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  const videoTitle_html =\n    typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <div\n      className={cn(' relative 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 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n        <div\n          className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n          dangerouslySetInnerHTML={{ __html: !isPlaying && title_html ? title_html : videoTitle_html || '' }}\n        />\n        {!isPlaying && btnText && (\n          <Button\n            variant=\"link\"\n            className={cn('member-equity-button-secondary')}\n            onClick={() => {\n              if (isPlaying) {\n                if (videoRef.current) {\n                  videoRef.current.pause()\n                }\n                setIsPlaying(false)\n              } else {\n                if (videoRef.current) {\n                  videoRef.current.play()\n                }\n                setIsPlaying(true)\n              }\n            }}\n          >\n            {btnText}\n            <div className=\"ml-0.5 size-3.5\">\n              <ChevronRightIcon />\n            </div>\n          </Button>\n        )}\n      </div>\n      <div className=\"media-cover 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] relative overflow-hidden\">\n        <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n        {!isPlaying && (\n          <Picture\n            className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n            source={img?.url}\n            alt={img?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n        <div\n          className=\"absolute left-0 top-0 z-10 size-full\"\n          style={{\n            background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "aA6BQ,cAAAA,EAKE,QAAAC,MALF,oBA5BR,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,oBAAAC,MAAwB,mBAEjC,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIlB,EAAS,EAAK,EAC1CmB,EAAWlB,EAAyB,IAAI,EAExCmB,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASJ,EAAqB,CAAE,KAAMI,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,GAAcL,EAAqB,CAAE,KAAMK,CAAW,CAAC,EAEvG,OACEZ,EAAC,OACC,UAAWG,EAAG,mBAAoBO,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAjB,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACmB,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,GACbb,EAACM,EAAA,CACC,QAAQ,OACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTe,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,UAAAN,EACDd,EAAC,OAAI,UAAU,kBACb,SAAAA,EAACS,EAAA,EAAiB,EACpB,GACF,GAEJ,EACAR,EAAC,OAAI,UAAU,0PACb,UAAAD,EAAC,SAAM,IAAKqB,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC7F,CAACG,GACAnB,EAACM,EAAA,CACC,UAAU,mDACV,OAAQS,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFf,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,CAEJ,EAEA,IAAOwB,EAAQnB,EAAWK,CAAe",
+  "names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "ChevronRightIcon", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "videoTitle_html", "MediaPlayerBase_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import"react";import{cn as r}from"../../helpers/utils.js";import{withStyles as m}from"../../shared/Styles.js";import{Picture as d}from"../../components/index.js";import n from"../Title/index.js";import f from"../SwiperBox/index.js";import{convertLexicalToHTML as c}from"@payloadcms/richtext-lexical/html";const x=({data:t,configuration:i})=>o("div",{className:r("laptop:max-w-full w-full max-w-[296px] overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[e(d,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t.video&&e("button",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 flex min-h-[200px] flex-1 flex-col justify-between gap-4 bg-white p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"lg-desktop:text-lg mb-2 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.quote&&e("p",{className:"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]})]}),g=({data:{items:t=[],shape:i="square",title:l},className:a="",key:s})=>{const p=typeof l=="string"?l:l&&c({data:l});return o("div",{className:a,children:[l&&e(n,{data:{title:p||""}}),e(f,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+s,data:{list:t,configuration:{shape:i}},Slide:x})]})};var P=m(g);export{P as default};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import"react";import{cn as m}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Picture as n}from"../../components/index.js";import f from"../Title/index.js";import c from"../SwiperBox/index.js";import{convertLexicalToHTML as x}from"@payloadcms/richtext-lexical/html";const u=({data:t,configuration:i,GSAP:l})=>o("div",{className:m("laptop:max-w-full w-full max-w-[296px] overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",i.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[e(n,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t.video&&e("button",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 flex min-h-[200px] flex-1 flex-col justify-between gap-4 bg-white p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-sm font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]})]}),g=({data:{items:t=[],shape:i="square",title:l},className:a="",key:s,GSAP:p})=>{const r=typeof l=="string"?l:l&&x({data:l});return o("div",{className:a,children:[l&&e(f,{data:{title:r||""},GSAP:p}),e(c,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+s,data:{list:t,configuration:{shape:i}},Slide:u})]})};var k=d(g);export{k as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full max-w-[296px] overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data.video && (\n            <button className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20\">\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 flex min-h-[200px] flex-1 flex-col justify-between gap-4 bg-white p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-lg mb-2 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti: React.FC<MediaPlayerMultiProps> = ({\n  data: { items = [], shape = 'square', title },\n  className = '',\n  key,\n}) => {\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  return (\n    <div className={className}>\n      {title && <Title data={{ title: title_html || '' }} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'MediaPlayerMultiSwiper' + key}\n        data={{ list: items, configuration: { shape: shape } }}\n        Slide={MediaPlayerItem}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
-  "mappings": "aAoBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAnBN,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAE3CT,EAAC,OACC,UAAWC,EACT,yDACA,yCACA,iEACAQ,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAT,EAAC,OAAI,UAAU,+DACb,UAAAD,EAACI,EAAA,CACC,OAAQK,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,6BACf,EACAT,EAAC,OAAI,UAAU,2DACZ,SAAAS,EAAK,OACJT,EAAC,UAAO,UAAU,8FAChB,SAAAA,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oHACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,gGACX,SAAAS,EAAK,MACR,EACCA,EAAK,OACJT,EAAC,KAAE,UAAU,2FACV,SAAAS,EAAK,MACR,GAEJ,EAEAT,EAAC,KAAE,UAAU,qHACV,SAAAS,EAAK,YACR,GACF,GACF,EAIEE,EAAoD,CAAC,CACzD,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAC5C,UAAAC,EAAY,GACZ,IAAAC,CACF,IAAM,CACJ,MAAMC,EAAa,OAAOH,GAAU,SAAWA,EAAQA,GAASP,EAAqB,CAAE,KAAMO,CAAM,CAAC,EACpG,OACEb,EAAC,OAAI,UAAWc,EACb,UAAAD,GAASd,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOY,GAAc,EAAG,EAAG,EACpDjB,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BU,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,CAAM,CAAE,EACrD,MAAOL,EACT,GACF,CAEJ,EAEA,IAAOU,EAAQf,EAAWQ,CAAgB",
-  "names": ["jsx", "jsxs", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "MediaPlayerMulti_default"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({\n  data,\n  configuration,\n  GSAP,\n}: {\n  data: MediaPlayerItemProps\n  configuration?: any\n  GSAP?: any\n}) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full max-w-[296px] overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data.video && (\n            <button className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20\">\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 flex min-h-[200px] flex-1 flex-col justify-between gap-4 bg-white p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"desktop:text-lg mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"desktop:text-lg text-sm font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti: React.FC<MediaPlayerMultiProps> = ({\n  data: { items = [], shape = 'square', title },\n  className = '',\n  key,\n  GSAP,\n}) => {\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  return (\n    <div className={className}>\n      {title && <Title data={{ title: title_html || '' }} GSAP={GSAP} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'MediaPlayerMultiSwiper' + key}\n        data={{ list: items, configuration: { shape: shape } }}\n        Slide={MediaPlayerItem}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "aA4BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA3BN,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAAe,4BACxB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkB,CAAC,CACvB,KAAAC,EACA,cAAAC,EACA,KAAAC,CACF,IAMIV,EAAC,OACC,UAAWC,EACT,yDACA,yCACA,iEACAQ,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAT,EAAC,OAAI,UAAU,+DACb,UAAAD,EAACI,EAAA,CACC,OAAQK,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,6BACf,EACAT,EAAC,OAAI,UAAU,2DACZ,SAAAS,EAAK,OACJT,EAAC,UAAO,UAAU,8FAChB,SAAAA,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oHACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,yFACX,SAAAS,EAAK,MACR,EACCA,EAAK,OACJT,EAAC,KAAE,UAAU,oFACV,SAAAS,EAAK,MACR,GAEJ,EAEAT,EAAC,KAAE,UAAU,qHACV,SAAAS,EAAK,YACR,GACF,GACF,EAIEG,EAAoD,CAAC,CACzD,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAC5C,UAAAC,EAAY,GACZ,IAAAC,EACA,KAAAN,CACF,IAAM,CACJ,MAAMO,EAAa,OAAOH,GAAU,SAAWA,EAAQA,GAASR,EAAqB,CAAE,KAAMQ,CAAM,CAAC,EACpG,OACEd,EAAC,OAAI,UAAWe,EACb,UAAAD,GAASf,EAACK,EAAA,CAAM,KAAM,CAAE,MAAOa,GAAc,EAAG,EAAG,KAAMP,EAAM,EAChEX,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BW,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,CAAM,CAAE,EACrD,MAAON,EACT,GACF,CAEJ,EAEA,IAAOW,EAAQhB,EAAWS,CAAgB",
+  "names": ["jsx", "jsxs", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "GSAP", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "MediaPlayerMulti_default"]
 }

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

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

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

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

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

@@ -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'\n// import gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst StickyBox = ({\n  children,\n  id,\n  components,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n}) => {\n  // useEffect(() => {\n  //   const height = window.screen.height\n\n  //   gsap.registerPlugin(ScrollTrigger)\n  //   gsap\n  //     .timeline({\n  //       scrollTrigger: {\n  //         trigger: `#${id}`,\n  //         start: 'top top',\n  //         end: `top+=${height * 1.8}px bottom`,\n  //         markers: true,\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\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"bg-[#1D1D1F]\">\n                  <Container className=\"!my-0\">\n                    <Grid>\n                      <GridItem span={1} />\n                      <GridItem span={10}>\n                        <BrandEquity data={componentData} />\n                      </GridItem>\n                      <GridItem span={1} />\n                    </Grid>\n                  </Container>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"w-full bg-[#1D1D1F] py-10\">\n                  <Container className=\"!my-0\">\n                    <Grid>\n                      <GridItem span={1} />\n                      <GridItem span={10}>\n                        <MemberEquity data={componentData} className=\"w-full\" />\n                      </GridItem>\n                      <GridItem span={1} />\n                    </Grid>\n                  </Container>\n                </div>\n              )\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}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\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}>\n      <div\n        className={cn('relative 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          <Container spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Grid>\n              <GridItem span={1} />\n              <GridItem span={10}>\n                <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n              </GridItem>\n              <GridItem span={1} />\n            </Grid>\n          </Container>\n        </div>\n        <div className=\"media-cover relative h-screen w-full overflow-hidden\">\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", "useState", "useRef", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "convertLexicalToHTML", "StickyBox", "children", "id", "components", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "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'\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\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"bg-transparent relative z-20\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <BrandEquity data={componentData} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"w-full bg-transparent py-10 relative z-20\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" />\n                  </SubContainer>\n                </div>\n              )\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 w-full h-screen absolute top-0 left-0', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute w-full left-1/2 top-1/2 z-20 -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=\"w-full sticky top-0 left-0\">\n        <div\n          className={cn(\n            'media-cover',\n            'w-full h-screen relative',\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": "aAmBM,OAkDA,YAAAA,EAjDgB,OAAAC,EADhB,QAAAC,MAAA,oBAlBN,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,2BAGzB,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,OACEb,EAACS,EAAA,CAAU,OAAQO,EACjB,SAAAf,EAACM,EAAA,CACE,WAACU,GAAYjB,EAACQ,EAAA,CAAS,KAAM,EAAG,EACjCR,EAACQ,EAAA,CAAS,KAAMS,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAYjB,EAACQ,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMU,EAAY,CAAC,CACjB,SAAAH,EACA,GAAAI,EACA,WAAAC,EACA,KAAAC,CACF,IAKM,CACJ,KAAM,CAAE,KAAAC,EAAM,cAAAC,CAAc,EAAIF,EAChC,OAAAlB,EAAU,IAAM,CACd,MAAMqB,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,EAGHlB,EAAC,OAAI,GAAIkB,EAAI,UAAU,gBACrB,UAAAnB,EAAAD,EAAA,CAAG,SAAAgB,EAAS,EACZf,EAAAD,EAAA,CACG,SAAAqB,GAAY,IAAKK,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACEzB,EAAC,OAAI,UAAU,+BACb,SAAAA,EAACc,EAAA,CAAa,OAAO,QACnB,SAAAd,EAACU,EAAA,CAAY,KAAMe,EAAe,EACpC,EACF,EAGJ,IAAK,oBACH,OACEzB,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACc,EAAA,CAAa,OAAO,QACnB,SAAAd,EAACW,EAAA,CAAa,KAAMc,EAAe,UAAU,SAAS,EACxD,EACF,EAGJ,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,EAAWjC,EAAyB,IAAI,EAExCkC,EAAa,OAAOR,GAAU,SAAWA,EAAQA,GAAShB,EAAqB,CAAE,KAAMgB,CAAM,CAAC,EACpG,cAAOC,GAAe,UAAwBA,GAAcjB,EAAqB,CAAE,KAAMiB,CAAW,CAAC,EAGnG5B,EAACiB,EAAA,CAAU,GAAIC,EAAI,WAAYC,EAAY,KAAMC,EAC/C,UAAArB,EAAC,OACC,UAAWI,EAAG,mDAAoDuB,EAAW,CAC3E,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAAlC,EAAC,OAAI,UAAU,wFACb,SAAAA,EAACc,EAAA,CAAa,OAAO,uCACnB,SAAAd,EAACM,EAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAO8B,GAAc,GAAI,MAAAH,CAAM,EAAG,KAAMZ,EAAM,EACzF,EACF,EACF,EACArB,EAAC,OAAI,UAAU,6BACb,SAAAC,EAAC,OACC,UAAWG,EACT,cACA,2BACA,oNACF,EAEA,UAAAJ,EAAC,SAAM,IAAKmC,EAAU,UAAU,yBAAyB,IAAKH,GAAO,IAAK,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EAC9FhC,EAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOqC,EAAQhC,EAAWqB,CAAiB",
+  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "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"]
 }

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

@@ -3,6 +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;
     data: {
         shape?: Shape;
         theme?: Theme;

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

@@ -1,2 +1,2 @@
-import{Fragment as v,jsx as e,jsxs as l}from"react/jsx-runtime";import T from"react";import{withStyles as w}from"../../shared/Styles.js";import I from"../../components/picture.js";import C from"../../components/button.js";import{Heading as B}from"../../components/heading.js";import{Text as G}from"../../components/text.js";import{Carousel as y,CarouselContent as N,CarouselItem as k}from"../../components/carousel.js";import{Grid as g,GridItem as d}from"../../components/gird.js";import L from"../Title/index.js";import{cn as M}from"../../helpers/utils.js";import{Tabs as P,TabsList as R,TabsTrigger as S,TabsContent as z}from"../../components/tabs.js";const p=({item:f,shape:h="square"})=>{const{theme:m="light",title:c,description:b,imageUrl:i,primaryButton:s,secondaryButton:r}=f;return l("div",{className:M("item-wrapper group relative w-full overflow-hidden",{"rounded-box":h==="rounded","aiui-dark":m==="dark"},"text-info-primary"),children:[e(I,{source:i?.url,className:"inset-0 overflow-hidden",imgClassName:"transition-all duration-300 group-hover:scale-105",style:{aspectRatio:`${i?.width}/${i?.height}`}}),l("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[l("div",{children:[e(B,{size:3,className:"item-title",html:c}),e(G,{size:2,className:"item-description",html:b})]}),l("div",{className:"flex gap-[16px]",children:[r&&e(C,{variant:"secondary",asChild:!0,children:e("a",{href:r.link,children:r.text})}),s&&e(C,{variant:"primary",asChild:!0,children:e("a",{href:s.link,children:s.text})})]})]})]})},H=T.forwardRef((f,h)=>{const{shape:m,sectionTitle:c,groupByTab:b=!1,items:i=[],carousel:s}=f.data,r=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},u=i.map(t=>t.tabName).filter(Boolean).filter((t,a,o)=>o.indexOf(t)===a),x=u.map(t=>({tabName:t,items:i.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:h,className:"text-info-primary",children:[c&&e(L,{data:{title:c},className:"section-title"}),b?l(P,{shape:m,align:"left",defaultValue:u[0],children:[e(R,{children:u.map((t,a)=>e(S,{value:t,children:t},a))}),u.map((t,a)=>e(z,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:l(v,{children:[l(g,{className:"w-full",children:[x[t].map((o,n)=>e(d,{span:r(o.width??"full"),className:"laptop:block hidden",children:e(p,{item:o})},n)),e(d,{className:"laptop:hidden block",span:12,children:e(y,{className:"",children:e(N,{className:"flex",children:x[t].map((o,n)=>e(k,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(p,{item:o,shape:m})},n))})})})]}),s&&s?.items.length>0?e(y,{className:"laptop:mt-4 mt-3",children:e(N,{className:"flex",children:s.items.map((o,n)=>e(k,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(p,{item:o,shape:m})},n))})}):null]})},a))]}):l(v,{children:[l(g,{className:"w-full",children:[i.map((t,a)=>e(d,{span:r(t.width??"full"),className:"laptop:block hidden",children:e(p,{item:t})},a)),i.map((t,a)=>e(d,{span:r("full"),className:"laptop:hidden block",children:e(p,{item:t})},a))]}),s&&s?.items.length>0?e(y,{className:"laptop:mt-4 mt-3",children:e(N,{className:"flex",children:s.items.map((t,a)=>e(k,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(p,{item:t,shape:m})},a))})}):null]})]})});var Q=w(H);export{Q as default};
+import{Fragment as G,jsx as e,jsxs as l}from"react/jsx-runtime";import T from"react";import{withStyles as w}from"../../shared/Styles.js";import B from"../../components/picture.js";import C from"../../components/button.js";import{Heading as I}from"../../components/heading.js";import{Text as L}from"../../components/text.js";import{Carousel as k,CarouselContent as y,CarouselItem as N}from"../../components/carousel.js";import{Grid as v,GridItem as h}from"../../components/gird.js";import M from"../Title/index.js";import{cn as S}from"../../helpers/utils.js";import{Tabs as P,TabsList as R,TabsTrigger as z,TabsContent as A}from"../../components/tabs.js";const m=({item:d,shape:x="square"})=>{const{theme:o="light",title:u,description:b,imageUrl:i,primaryButton:s,secondaryButton:n}=d,p="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:S("item-wrapper group relative w-full overflow-hidden",{"rounded-box":x==="rounded","aiui-dark":o==="dark"},"text-info-primary"),children:[e(B,{source:i?.url,className:"inset-0 overflow-hidden",imgClassName:"transition-all duration-300 group-hover:scale-105",style:{aspectRatio:`${i?.width}/${i?.height}`}}),l("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[l("div",{children:[e(I,{size:3,className:"item-title",html:u}),e(L,{className:"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3",html:b})]}),l("div",{className:"flex gap-[16px]",children:[n&&e(C,{className:p,variant:"secondary",asChild:!0,children:e("a",{href:n.link,children:n.text})}),s&&e(C,{className:p,variant:"primary",asChild:!0,children:e("a",{href:s.link,children:s.text})})]})]})]})},H=T.forwardRef((d,x)=>{const{shape:o,sectionTitle:u,groupByTab:b=!1,items:i=[],carousel:s}=d.data,{GSAP:n}=d,p=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},f=i.map(t=>t.tabName).filter(Boolean).filter((t,a,r)=>r.indexOf(t)===a),g=f.map(t=>({tabName:t,items:i.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:x,className:"text-info-primary",children:[u&&e(M,{data:{title:u},className:"section-title",GSAP:n}),b?l(P,{shape:o,align:"left",defaultValue:f[0],children:[e(R,{children:f.map((t,a)=>e(z,{value:t,children:t},a))}),f.map((t,a)=>e(A,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:l(G,{children:[l(v,{className:"w-full",children:[g[t].map((r,c)=>e(h,{span:p(r.width??"full"),className:"laptop:block hidden",children:e(m,{item:r,shape:o})},c)),e(h,{className:"laptop:hidden block",span:12,children:e(k,{className:"",children:e(y,{className:"flex",children:g[t].map((r,c)=>e(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(m,{item:r,shape:o})},c))})})})]}),s&&s?.items.length>0?e(k,{className:"laptop:mt-4 mt-3",children:e(y,{className:"flex",children:s.items.map((r,c)=>e(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(m,{item:r,shape:o})},c))})}):null]})},a))]}):l(G,{children:[l(v,{className:"w-full",children:[i.map((t,a)=>e(h,{span:p(t.width??"full"),className:"laptop:block hidden",children:e(m,{item:t,shape:o})},a)),i.map((t,a)=>e(h,{span:p("full"),className:"laptop:hidden block",children:e(m,{item:t,shape:o})},a))]}),s&&s?.items.length>0?e(k,{className:"laptop:mt-4 mt-3",children:e(y,{className:"flex",children:s.items.map((t,a)=>e(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(m,{item:t,shape:o})},a))})}):null]})]})});var W=w(H);export{W as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map