npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.87 → 0.0.27-alpha.89 - Mend

@anker-in/headless-ui 0.0.27-alpha.87 → 0.0.27-alpha.89

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 (164) hide show

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

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

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

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

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

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

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 n}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import x from"../../components/picture.js";import k from"../../components/button.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";import{Right as w}from"./right.js";const N=({className:u="",data:{title:a,videoTitle:l,btnText:r,img:c,video:m,theme:f,shape:v}})=>{const[s,i]=g(!1),e=b(null),p=typeof a=="string"?a:a&&d({data:a}),y=typeof l=="string"?l:l&&d({data:l});return o("div",{className:n(" relative w-full",u,{"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:[t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!s&&p?p:y||""}}),!s&&r&&o(k,{variant:"link",className:n("member-equity-button-secondary"),onClick:()=>{s?(e.current&&e.current.pause(),i(!1)):(e.current&&e.current.play(),i(!0))},children:[r,t(w,{})]})]}),o("div",{className:"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1440] desktop:aspect-h-[700] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] 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}),!s&&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 C=h(N);export{C as default};
+"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as R,useRef as f,useEffect as z}from"react";import{useGSAP as S}from"@gsap/react";import{gsap as _}from"gsap";import{ScrollTrigger as h}from"gsap/dist/ScrollTrigger";import{cn as y}from"../../helpers/utils.js";import{withStyles as B}from"../../shared/Styles.js";import E from"../../components/picture.js";import I from"../../components/button.js";import{convertLexicalToHTML as x}from"@payloadcms/richtext-lexical/html";import{Right as T}from"./right.js";import{useInView as j}from"react-intersection-observer";const C=({className:b="",data:{title:s,videoTitle:o,btnText:n,img:i,video:w,theme:k,shape:N}})=>{const[r,l]=R(!1),t=f(null),p=f(null),a=f(null),{ref:H,inView:m}=j(),d=typeof s=="string"?s:s&&x({data:s}),g=typeof o=="string"?o:o&&x({data:o});return z(()=>{m&&!n?(t.current?.play(),l(!0)):(t.current?.pause(),l(!1))},[m]),S(()=>{if(!a.current)return;const M=p.current?.clientHeight||100,v=a.current?.clientHeight||100,P=v+M;return h.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:u=>{const L=u.progress*P-v;_.set(a.current,{y:L})}}),()=>{h.getAll().forEach(u=>u.kill())}},[]),c("div",{ref:p,className:y(" relative w-full overflow-hidden"," lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",b,{"aiui-dark":k==="dark","rounded-box":N==="rounded"}),children:[e("div",{children:c("div",{ref:H,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[d&&!r&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:d}}),g&&r&&e("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),!r&&n&&c(I,{variant:"link",className:y("member-equity-button-secondary"),onClick:()=>{r?(t.current&&t.current.pause(),l(!1)):(t.current&&t.current.play(),l(!0))},children:[n,e(T,{})]})]})}),e("div",{children:c("div",{ref:a,className:"media-cover sticky left-0 top-0 h-screen w-screen",children:[e("video",{ref:t,className:"size-full object-cover",src:w?.url,muted:!0,loop:!0}),!r&&i?.url&&e(E,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:i?.url,alt:i?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})};var X=B(C);export{X as default};
 //# 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'\nimport { Right } from './right.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=\"link\"\n            className={cn('member-equity-button-secondary')}\n            onClick={() => {\n              if (isPlaying) {\n                if (videoRef.current) {\n                  videoRef.current.pause()\n                }\n                setIsPlaying(false)\n              } else {\n                if (videoRef.current) {\n                  videoRef.current.play()\n                }\n                setIsPlaying(true)\n              }\n            }}\n          >\n            {btnText}\n            <Right />\n          </Button>\n        )}\n      </div>\n      <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1440] desktop:aspect-h-[700] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] 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,SAAAC,MAAa,aAEtB,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,EAACS,EAAA,EAAM,GACT,GAEJ,EACAR,EAAC,OAAI,UAAU,4OACb,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", "Right", "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, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\nimport { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n  const bgRef = useRef<HTMLImageElement>(null)\n\n  const { ref, inView } = useInView()\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  const videoTitle_html =\n    typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  useEffect(() => {\n    if (inView && !btnText) {\n      videoRef.current?.play()\n      setIsPlaying(true)\n    } else {\n      videoRef.current?.pause()\n      setIsPlaying(false)\n    }\n  }, [inView])\n\n  useGSAP(() => {\n    if (!bgRef.current) return\n    const height = boxRef.current?.clientHeight || 100\n    const screenHeight = bgRef.current?.clientHeight || 100\n    const base = screenHeight + height\n\n    ScrollTrigger.create({\n      trigger: boxRef.current,\n      start: 'top bottom',\n      end: 'bottom top',\n      scrub: true,\n      onUpdate: (self: any) => {\n        const value = self.progress * base - screenHeight\n        gsap.set(bgRef.current, { y: value })\n      },\n    })\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      className={cn(\n        ' relative w-full overflow-hidden',\n        ' lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n        className,\n        {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        }\n      )}\n    >\n      <div>\n        <div\n          ref={ref}\n          className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n        >\n          {title_html && !isPlaying && (\n            <div\n              className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n              dangerouslySetInnerHTML={{ __html: title_html }}\n            />\n          )}\n          {videoTitle_html && isPlaying && (\n            <div\n              className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n              dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n            />\n          )}\n          {!isPlaying && btnText && (\n            <Button\n              variant=\"link\"\n              className={cn('member-equity-button-secondary')}\n              onClick={() => {\n                if (isPlaying) {\n                  if (videoRef.current) {\n                    videoRef.current.pause()\n                  }\n                  setIsPlaying(false)\n                } else {\n                  if (videoRef.current) {\n                    videoRef.current.play()\n                  }\n                  setIsPlaying(true)\n                }\n              }}\n            >\n              {btnText}\n              <Right />\n            </Button>\n          )}\n        </div>\n      </div>\n      <div>\n        <div ref={bgRef} className=\"media-cover sticky left-0 top-0 h-screen w-screen\">\n          <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} muted loop />\n          {!isPlaying && img?.url && (\n            <Picture\n              className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n              source={img?.url}\n              alt={img?.alt}\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          )}\n          <div className=\"absolute left-0 top-0 z-10 size-full\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "useGSAP", "gsap", "ScrollTrigger", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "Right", "useInView", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "boxRef", "bgRef", "ref", "inView", "title_html", "videoTitle_html", "height", "screenHeight", "base", "self", "value", "t", "MediaPlayerBase_default"]
 }

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 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 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};
+"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 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:"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})]})]}),u=({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(u);export{P 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 = ({\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 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,2CACA,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"]
+  "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 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}) => {\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,2CACA,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,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"]
 }

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

@@ -8,7 +8,6 @@ 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 u,jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as h,useEffect as k}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import S from"../Slogan/index.js";import{Grid as N,GridItem as l}from"../../components/gird.js";import{Container as x}from"../../components/container.js";import P from"../BrandEquity/index.js";import M from"../MemberEquity/index.js";import C from"../Spacer/index.js";import R from"gsap";import{convertLexicalToHTML as m}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as z}from"react-responsive";const c=({children:s,spaceY:r})=>{const t=z({query:"(max-width: 768px)"});return e(x,{spaceY:r,children:o(N,{children:[!t&&e(l,{span:1}),e(l,{span:t?12:10,children:s}),!t&&e(l,{span:1})]})})},G=({children:s,id:r,components:t,GSAP:i})=>(k(()=>{const a=window.screen.height;R.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${a*1.8}px bottom`,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:r,className:"relative z-10 pb-10",children:[e(u,{children:s}),e(u,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(c,{spaceY:"!my-0",children:e(P,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(c,{spaceY:"!my-0",children:e(M,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(C,{data:a,style:a?.style});default:return null}})})]})),q=({className:s="",id:r,data:{title:t,videoTitle:i,btnText:a,img:B,video:y,theme:n,shape:f,components:b},GSAP:p})=>{const g=h(null),v=typeof t=="string"?t:t&&m({data:t});return typeof i=="string"||i&&m({data:i}),o(G,{id:r,components:b,GSAP:p,children:[e("div",{className:d("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":n==="dark","rounded-box":f==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(c,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(S,{className:"sticky-title",data:{title:v||"",theme:n},GSAP:p})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:o("div",{className:d("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[e("video",{ref:g,className:"size-full object-cover",src:y?.url,autoPlay:!0,muted:!0,loop:!0}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})};var K=w(q);export{K as default};
+"use client";import{Fragment as d,jsx as e,jsxs as i}from"react/jsx-runtime";import{useRef as g,useEffect as v}from"react";import{cn as p}from"../../helpers/utils.js";import{withStyles as h}from"../../shared/Styles.js";import k from"../Slogan/index.js";import{Grid as w,GridItem as o}from"../../components/gird.js";import{Container as N}from"../../components/container.js";import x from"../BrandEquity/index.js";import S from"../MemberEquity/index.js";import M from"../Spacer/index.js";import C from"gsap";import{convertLexicalToHTML as n}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as P}from"react-responsive";const l=({children:s,spaceY:r})=>{const a=P({query:"(max-width: 768px)"});return e(N,{spaceY:r,children:i(w,{children:[!a&&e(o,{span:1}),e(o,{span:a?12:10,children:s}),!a&&e(o,{span:1})]})})},R=({children:s,id:r,components:a})=>(v(()=>{const t=window.screen.height;C.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${t*1.8}px bottom`,scrub:0}}).to(`#${r} .sticky-cover`,{opacity:1,duration:.3}).to(`#${r} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),i("div",{id:r,className:"relative z-10 pb-10",children:[e(d,{children:s}),e(d,{children:a?.map(t=>{switch(t.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(l,{spaceY:"!my-0",children:e(x,{data:t,style:t?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(l,{spaceY:"!my-0",children:e(S,{data:t,className:"w-full",style:t?.style})})});case"ipc-spacer":return e(M,{data:t,style:t?.style});default:return null}})})]})),z=({className:s="",id:r,data:{title:a,videoTitle:t,btnText:q,img:B,video:m,theme:c,shape:u,components:y}})=>{const f=g(null),b=typeof a=="string"?a:a&&n({data:a});return typeof t=="string"||t&&n({data:t}),i(R,{id:r,components:y,children:[e("div",{className:p("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":c==="dark","rounded-box":u==="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(l,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(k,{className:"sticky-title",data:{title:b||"",theme:c}})})})}),e("div",{className:"sticky left-0 top-0 w-full",children:i("div",{className:p("media-cover","relative h-screen w-full","lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]"),children:[e("video",{ref:f,className:"size-full object-cover",src:m?.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 J=h(z);export{J 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'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = ({\n  children,\n  id,\n  components,\n  GSAP,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n  GSAP?: any\n}) => {\n  // const { gsap, ScrollTrigger } = GSAP\n  useEffect(() => {\n    const height = window.screen.height\n\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      .to(`#${id} .sticky-cover`, {\n        opacity: 1,\n        duration: 0.3,\n      })\n      .to(\n        `#${id} .media-content`,\n        {\n          top: '100%',\n          transform: 'translate(-50%, -100%)',\n          duration: 1,\n        },\n        '<'\n      )\n  }, [])\n\n  return (\n    <div id={id} className=\"relative z-10 pb-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  id,\n  data: { title, videoTitle, btnText, img, video, theme, shape, components },\n  GSAP,\n}) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n  typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <StickyBox id={id} components={components} GSAP={GSAP}>\n      <div\n        className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} GSAP={GSAP} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n        >\n          <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n          <div\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "GSAP", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = ({\n  children,\n  id,\n  components,\n}: {\n  children: React.ReactNode\n  id?: string\n  components?: MediaPlayerComponent[]\n}) => {\n  useEffect(() => {\n    const height = window.screen.height\n\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      .to(`#${id} .sticky-cover`, {\n        opacity: 1,\n        duration: 0.3,\n      })\n      .to(\n        `#${id} .media-content`,\n        {\n          top: '100%',\n          transform: 'translate(-50%, -100%)',\n          duration: 1,\n        },\n        '<'\n      )\n  }, [])\n\n  return (\n    <div id={id} className=\"relative z-10 pb-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"!my-0\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n}\n\nconst MediaPlayerSticky: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  id,\n  data: { title, videoTitle, btnText, img, video, theme, shape, components },\n}) => {\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('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n        >\n          <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop />\n          <div\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "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,7 +3,6 @@ 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 T,jsx as e,jsxs as o}from"react/jsx-runtime";import w from"react";import{useMediaQuery as G}from"react-responsive";import{withStyles as B}from"../../shared/Styles.js";import I from"../../components/picture.js";import C from"../../components/button.js";import{Heading as $}from"../../components/heading.js";import{Text as M}from"../../components/text.js";import{Carousel as y,CarouselContent as N,CarouselItem as g}from"../../components/carousel.js";import{Grid as v,GridItem as x}from"../../components/gird.js";import L from"../Title/index.js";import{cn as S}from"../../helpers/utils.js";import{Tabs as P,TabsList as R,TabsTrigger as q,TabsContent as z}from"../../components/tabs.js";const c=({item:b,shape:k="square",isTab:s=!1})=>{const d=G({query:"(max-width: 1024px)"}),{theme:m="light",title:n,description:i,imageUrl:u,primaryButton:p,secondaryButton:r}=b,f="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:S("item-wrapper group relative w-full overflow-hidden",{"rounded-box":k==="rounded","aiui-dark":m==="dark","h-[480px]":d&&!s,"h-[400px]":d&&s},"text-info-primary"),children:[e(I,{source:u?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${u?.width}/${u?.height}`}}),o("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[o("div",{children:[e($,{size:3,className:"item-title",html:n}),e(M,{className:"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3",html:i})]}),o("div",{className:"flex gap-[16px]",children:[r&&e(C,{className:f,variant:"secondary",asChild:!0,children:e("a",{href:r.link,children:r.text})}),p&&e(C,{className:f,variant:"primary",asChild:!0,children:e("a",{href:p.link,children:p.text})})]})]})]})},A=w.forwardRef((b,k)=>{const{shape:s,sectionTitle:d,groupByTab:m=!1,items:n=[],carousel:i}=b.data,{GSAP:u}=b,p=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=n.map(t=>t.tabName).filter(Boolean).filter((t,a,l)=>l.indexOf(t)===a),f=r.map(t=>({tabName:t,items:n.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:k,className:"text-info-primary",children:[d&&e(L,{data:{title:d},className:"section-title",GSAP:u}),m?o(P,{shape:s,align:"left",defaultValue:r[0],children:[e(R,{children:r.map((t,a)=>e(q,{value:t,children:t},a))}),r.map((t,a)=>e(z,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:o(T,{children:[o(v,{className:"w-full",children:[f[t].map((l,h)=>e(x,{span:p(l.width??"full"),className:"laptop:block hidden",children:e(c,{item:l,shape:s,isTab:m})},`${l?.title||""}${h}`)),e(x,{className:"laptop:hidden block",span:12,children:e(y,{className:"",children:e(N,{className:"flex",children:f[t].map((l,h)=>e(g,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(c,{item:l,shape:s,isTab:m})},`${l?.title||""}${h}`))})})})]}),i&&i?.items.length>0?e(y,{className:"laptop:mt-4 mt-3",children:e(N,{className:"flex",children:i.items.map((l,h)=>e(g,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(c,{item:l,shape:s,isTab:m})},h))})}):null]})},a))]}):o(T,{children:[o(v,{className:"w-full",children:[n.map((t,a)=>e(x,{span:p(t.width??"full"),className:"laptop:block hidden",children:e(c,{item:t,shape:s})},`${t?.title||""}${a}`)),n.map((t,a)=>e(x,{span:p("full"),className:"laptop:hidden block",children:e(c,{item:t,shape:s})},`${t?.title||""}${a}`))]}),i&&i?.items.length>0?e(y,{className:"laptop:mt-4 mt-3",children:e(N,{className:"flex",children:i.items.map((t,a)=>e(g,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:e(c,{item:t,shape:s})},`${t?.title||""}${a}`))})}):null]})]})});var X=B(A);export{X as default};
+import{Fragment as v,jsx as t,jsxs as o}from"react/jsx-runtime";import T from"react";import{useMediaQuery as w}from"react-responsive";import{withStyles as B}from"../../shared/Styles.js";import I from"../../components/picture.js";import g from"../../components/button.js";import{Heading as G}from"../../components/heading.js";import{Text as $}from"../../components/text.js";import{Carousel as k,CarouselContent as y,CarouselItem as N}from"../../components/carousel.js";import{Grid as C,GridItem as h}from"../../components/gird.js";import M from"../Title/index.js";import{cn as L}from"../../helpers/utils.js";import{Tabs as S,TabsList as P,TabsTrigger as R,TabsContent as q}from"../../components/tabs.js";const d=({item:b,shape:x="square",isTab:s=!1})=>{const u=w({query:"(max-width: 1024px)"}),{theme:m="light",title:n,description:i,imageUrl:p,primaryButton:r,secondaryButton:c}=b,e="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:L("item-wrapper group relative box-border w-full overflow-hidden",{"rounded-2xl":x==="rounded","aiui-dark":m==="dark","h-[480px]":u&&!s,"h-[400px]":u&&s},"text-info-primary"),children:[t(I,{source:p?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),o("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[o("div",{children:[t(G,{size:3,className:"item-title",html:n}),t($,{className:"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3",html:i})]}),o("div",{className:"flex gap-[16px]",children:[c&&t(g,{className:e,variant:"secondary",asChild:!0,children:t("a",{href:c.link,children:c.text})}),r&&t(g,{className:e,variant:"primary",asChild:!0,children:t("a",{href:r.link,children:r.text})})]})]})]})},z=T.forwardRef((b,x)=>{const{shape:s,sectionTitle:u,groupByTab:m=!1,items:n=[],carousel:i}=b.data,p=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=n.map(e=>e.tabName).filter(Boolean).filter((e,a,l)=>l.indexOf(e)===a),c=r.map(e=>({tabName:e,items:n.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:x,className:"text-info-primary",children:[u&&t(M,{data:{title:u},className:"section-title"}),m?o(S,{shape:s,align:"left",defaultValue:r[0],children:[t(P,{children:r.map((e,a)=>t(R,{value:e,children:e},a))}),r.map((e,a)=>t(q,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:o(v,{children:[o(C,{className:"w-full",children:[c[e].map((l,f)=>t(h,{span:p(l.width??"full"),className:"laptop:block hidden",children:t(d,{item:l,shape:s,isTab:m})},`${l?.title||""}${f}`)),t(h,{className:"laptop:hidden block",span:12,children:t(k,{className:"",children:t(y,{className:"flex",children:c[e].map((l,f)=>t(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(d,{item:l,shape:s,isTab:m})},`${l?.title||""}${f}`))})})})]}),i&&i?.items.length>0?t(k,{className:"laptop:mt-4 mt-3",children:t(y,{className:"flex",children:i.items.map((l,f)=>t(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(d,{item:l,shape:s,isTab:m})},f))})}):null]})},a))]}):o(v,{children:[o(C,{className:"w-full",children:[n.map((e,a)=>t(h,{span:p(e.width??"full"),className:"laptop:block hidden",children:t(d,{item:e,shape:s})},`${e?.title||""}${a}`)),n.map((e,a)=>t(h,{span:p("full"),className:"laptop:hidden block",children:t(d,{item:e,shape:s})},`${e?.title||""}${a}`))]}),i&&i?.items.length>0?t(k,{className:"laptop:mt-4 mt-3",children:t(y,{className:"flex",children:i.items.map((e,a)=>t(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(d,{item:e,shape:s})},`${e?.title||""}${a}`))})}):null]})]})});var W=B(z);export{W as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n  item,\n  shape = 'square',\n  isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 1024px)' })\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        `item-wrapper group relative w-full overflow-hidden`,\n        {\n          'rounded-box': shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !isTab,\n          'h-[400px]': isMobile && isTab,\n        },\n        `text-info-primary`\n      )}\n    >\n      <Picture\n        source={imageUrl?.url}\n        className=\"inset-0 h-full overflow-hidden\"\n        imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n        style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n      />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading size={3} className=\"item-title\" html={title} />\n          <Text className=\"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3\" html={description} />\n        </div>\n        <div className=\"flex gap-[16px]\">\n          {secondaryButton && (\n            <Button className={lgButtonSize} variant=\"secondary\" asChild>\n              <a href={secondaryButton.link}>{secondaryButton.text}</a>\n            </Button>\n          )}\n          {primaryButton && (\n            <Button className={lgButtonSize} variant=\"primary\" asChild>\n              <a href={primaryButton.link}>{primaryButton.text}</a>\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const { GSAP } = props\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" GSAP={GSAP} />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger key={index} value={tabName!}>\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <Grid className=\"w-full\">\n                  {tabItemsMaps[tabName].map((item, index) => (\n                    <GridItem\n                      key={`${item?.title || ''}${index}`}\n                      span={getSpan(item.width ?? 'full')}\n                      className=\"laptop:block hidden\"\n                    >\n                      <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                    </GridItem>\n                  ))}\n                  {\n                    <GridItem className=\"laptop:hidden block\" span={12}>\n                      <Carousel className=\"\">\n                        <CarouselContent className=\"flex\">\n                          {tabItemsMaps[tabName].map((item, index) => (\n                            <CarouselItem\n                              key={`${item?.title || ''}${index}`}\n                              className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n                            >\n                              <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                            </CarouselItem>\n                          ))}\n                        </CarouselContent>\n                      </Carousel>\n                    </GridItem>\n                  }\n                </Grid>\n                {carousel && carousel?.items.length > 0 ? (\n                  <Carousel className=\"laptop:mt-4 mt-3\">\n                    <CarouselContent className=\"flex\">\n                      {carousel.items.map((item, index) => (\n                        <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                          <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                        </CarouselItem>\n                      ))}\n                    </CarouselContent>\n                  </Carousel>\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock item={item} shape={shape} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock item={item} shape={shape} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <Carousel className=\"laptop:mt-4 mt-3\">\n              <CarouselContent className=\"flex\">\n                {carousel.items.map((item, index) => (\n                  <CarouselItem\n                    key={`${item?.title || ''}${index}`}\n                    className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n                  >\n                    <ItemBlock item={item} shape={shape} />\n                  </CarouselItem>\n                ))}\n              </CarouselContent>\n            </Carousel>\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "ItemBlock", "item", "shape", "isTab", "isMobile", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "GSAP", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
+  "sourcesContent": ["import React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n  item,\n  shape = 'square',\n  isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 1024px)' })\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper group relative box-border w-full overflow-hidden',\n        {\n          'rounded-2xl': shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !isTab,\n          'h-[400px]': isMobile && isTab,\n        },\n        `text-info-primary`\n      )}\n    >\n      <Picture\n        source={imageUrl?.url}\n        className=\"inset-0 h-full overflow-hidden\"\n        imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n        style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n      />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading size={3} className=\"item-title\" html={title} />\n          <Text className=\"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3\" html={description} />\n        </div>\n        <div className=\"flex gap-[16px]\">\n          {secondaryButton && (\n            <Button className={lgButtonSize} variant=\"secondary\" asChild>\n              <a href={secondaryButton.link}>{secondaryButton.text}</a>\n            </Button>\n          )}\n          {primaryButton && (\n            <Button className={lgButtonSize} variant=\"primary\" asChild>\n              <a href={primaryButton.link}>{primaryButton.text}</a>\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger key={index} value={tabName!}>\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <Grid className=\"w-full\">\n                  {tabItemsMaps[tabName].map((item, index) => (\n                    <GridItem\n                      key={`${item?.title || ''}${index}`}\n                      span={getSpan(item.width ?? 'full')}\n                      className=\"laptop:block hidden\"\n                    >\n                      <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                    </GridItem>\n                  ))}\n                  {\n                    <GridItem className=\"laptop:hidden block\" span={12}>\n                      <Carousel className=\"\">\n                        <CarouselContent className=\"flex\">\n                          {tabItemsMaps[tabName].map((item, index) => (\n                            <CarouselItem\n                              key={`${item?.title || ''}${index}`}\n                              className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n                            >\n                              <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                            </CarouselItem>\n                          ))}\n                        </CarouselContent>\n                      </Carousel>\n                    </GridItem>\n                  }\n                </Grid>\n                {carousel && carousel?.items.length > 0 ? (\n                  <Carousel className=\"laptop:mt-4 mt-3\">\n                    <CarouselContent className=\"flex\">\n                      {carousel.items.map((item, index) => (\n                        <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                          <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                        </CarouselItem>\n                      ))}\n                    </CarouselContent>\n                  </Carousel>\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock item={item} shape={shape} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock item={item} shape={shape} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <Carousel className=\"laptop:mt-4 mt-3\">\n              <CarouselContent className=\"flex\">\n                {carousel.items.map((item, index) => (\n                  <CarouselItem\n                    key={`${item?.title || ''}${index}`}\n                    className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n                  >\n                    <ItemBlock item={item} shape={shape} />\n                  </CarouselItem>\n                ))}\n              </CarouselContent>\n            </Carousel>\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "ItemBlock", "item", "shape", "isTab", "isMobile", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

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

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

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

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

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

@@ -1,12 +1,12 @@
-"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useState as D,useEffect as P}from"react";import{cn as d}from"../../helpers/utils.js";import C from"../../components/picture.js";import{Tabs as I,TabsList as A,TabsTrigger as M}from"../../components/tabs.js";import w from"../../components/button.js";import V from"../Title/index.js";import E from"../SwiperBox/index.js";import{withStyles as q}from"../../shared/Styles.js";import{formatVariantPrice as $}from"./shelfDisplay.js";import{useMediaQuery as j}from"react-responsive";const z=({data:e,configuration:r})=>{const c=s=>r?.event?.primaryButton?.(s),m=s=>r?.event?.secondaryButton?.(s),{price:u,basePrice:b}=$({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),f=()=>{const s=e?.sku,o=e?.variants;return o?.find(x=>x?.sku===s)?.image?.url||o?.[0]?.image?.url||""};return p("div",{className:d("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(C,{source:f(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((s,o)=>t("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:s},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),p("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:u||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:b||""})]}),p("div",{className:d("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(w,{variant:"primary",onClick:()=>c(e),className:`
+"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{useState as k,useEffect as F}from"react";import{cn as p}from"../../helpers/utils.js";import C from"../../components/picture.js";import{Tabs as P,TabsList as I,TabsTrigger as M}from"../../components/tabs.js";import D from"../../components/button.js";import V from"../Title/index.js";import E from"../SwiperBox/index.js";import{withStyles as q}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as $}from"react-responsive";const j=({data:e,configuration:r})=>{const m=s=>r?.event?.primaryButton?.(s),u=s=>r?.event?.secondaryButton?.(s),{price:b,basePrice:f}=A({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),d=()=>{const s=e?.sku,o=e?.variants;return o?.find(l=>l?.sku===s)?.image?.url||o?.[0]?.image?.url||""};return c("div",{className:p("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:p("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(C,{source:d(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((s,o)=>t("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:s},o))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),c("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:b||""}),t("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:f||""})]}),c("div",{className:p("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(D,{variant:"primary",onClick:()=>m(e),className:`
             laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
             border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
             ${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
             ${r.direction==="vertical"?"w-full":""}
-          `,children:r?.primaryButton||""}),t(w,{variant:"secondary",onClick:()=>m(e),className:`
+          `,children:r?.primaryButton||""}),t(D,{variant:"secondary",onClick:()=>u(e),className:`
             laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
             border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
             ${r?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
             ${r.direction==="vertical"?"w-full":""}
-          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},G=({data:e,buildData:r,className:c="",key:m,event:u,GSAP:b})=>{const[f,s]=D(""),[o,h]=D([]),x=j({query:"(max-width: 768px)"}),{productsTab:n=[],productsCard:S=[],title:v,align:B="left",isShowTab:g=!0,tabShape:N="square",...T}=e,y=a=>{const i=a?.map(l=>{const k=r?.products?.find(F=>F?.handle===l?.handle);if(k)return{sku:l.sku,...k}})?.filter(l=>l);h(i)};return P(()=>{if(g){s(n?.[0]?.tab||""),y(n?.[0]?.data||[]);return}y(S)},[]),p("div",{className:d("w-full",c),children:[v&&t(V,{data:{title:v},GSAP:b}),g&&t("div",{className:`${x?"w-full overflow-hidden":""}`,children:t(I,{shape:N,align:B,value:f,onValueChange:a=>{s(a);const i=n?.find(l=>l?.tab===a);y(i?.data||[])},className:"mb-8",children:t(A,{children:n?.map((a,i)=>t(M,{value:a?.tab||"",children:a?.tab},i))})})}),t(E,{className:"!overflow-visible",id:"ShelfDisplay"+m,data:{list:o,configuration:{...T,event:u}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var Y=q(G);export{Y as default};
+          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},z=({data:e,buildData:r,className:m="",key:u,event:b})=>{const[f,d]=k(""),[s,o]=k([]),y=$({query:"(max-width: 768px)"}),{productsTab:l=[],productsCard:w=[],title:h,align:S="left",isShowTab:v=!0,tabShape:B="square",...N}=e,x=a=>{const n=a?.map(i=>{const g=r?.products?.find(T=>T?.handle===i?.handle);if(g)return{sku:i.sku,...g}})?.filter(i=>i);o(n)};return F(()=>{if(v){d(l?.[0]?.tab||""),x(l?.[0]?.data||[]);return}x(w)},[]),c("div",{className:p("w-full",m),children:[h&&t(V,{data:{title:h}}),v&&t("div",{className:`${y?"w-full overflow-hidden":""}`,children:t(P,{shape:B,align:S,value:f,onValueChange:a=>{d(a);const n=l?.find(i=>i?.tab===a);x(n?.data||[])},className:"mb-8",children:t(I,{children:l?.map((a,n)=>t(M,{value:a?.tab||"",children:a?.tab},n))})})}),t(E,{className:"!overflow-visible",id:"ShelfDisplay"+u,data:{list:s,configuration:{...N,event:b}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var X=q(z);export{X as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n  GSAP?: any\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event, GSAP }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} GSAP={GSAP} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "aAgGQ,cAAAA,EA0BF,QAAAC,MA1BE,oBA/FR,OAAgB,YAAAC,EAAU,aAAAC,MAAiB,QAC3C,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,MAAmB,2BAC5C,OAAOC,MAAY,6BACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,oBACnC,OAAS,iBAAAC,MAAqB,mBA0D9B,MAAMC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,MAAMC,EAAmBC,GAA6BF,GAAe,OAAO,gBAAgBE,CAAM,EAE5FC,EAAqBD,GAA6BF,GAAe,OAAO,kBAAkBE,CAAM,EAEhG,CAAE,MAAAE,EAAO,UAAAC,CAAU,EAAIT,EAAmB,CAC9C,OAAQ,KACR,OAAQG,GAAM,MAAM,QAAU,EAC9B,WAAYA,GAAM,gBAAgB,QAAUA,GAAM,MAAM,QAAU,EAClE,aAAcA,GAAM,MAAM,cAAgB,KAC5C,CAAC,EAEKO,EAAY,IAAM,CACtB,MAAMC,EAAMR,GAAM,IACZS,EAAWT,GAAM,SAEvB,OADgBS,GAAU,KAAMC,GAAcA,GAAM,MAAQF,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,OACExB,EAAC,OAEC,UAAWG,EACT,8IACAa,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,UAAAjB,EAAC,OAAI,UAAWI,EAAG,2FAA2F,EAC5G,SAAAJ,EAACK,EAAA,CAAQ,OAAQkB,EAAU,EAAG,UAAU,yDAAyD,EACnG,EACAvB,EAAC,OAAI,UAAU,2DACZ,SAAAgB,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACU,EAAWC,IAExC3B,EAAC,OAEC,UAAU,sHAET,SAAA0B,GAHIC,CAIP,CAEH,EACH,EACA3B,EAAC,KACC,MAAOgB,GAAM,OAAS,GACtB,UAAU,uGAET,SAAAA,GAAM,OAAS,GAClB,EACAhB,EAAC,MACC,MAAOgB,GAAM,aAAe,GAC5B,UAAU,sGAET,SAAAA,GAAM,aAAe,GACxB,EACAf,EAAC,OAAI,UAAU,yBACb,UAAAD,EAAC,OAAI,UAAU,mDAAoD,SAAAqB,GAAS,GAAG,EAC/ErB,EAAC,OAAI,UAAU,wDAAyD,SAAAsB,GAAa,GAAG,GAC1F,EAEArB,EAAC,OAAI,UAAWG,EAAG,0BAA2Ba,EAAc,YAAc,WAAa,WAAa,EAAE,EACpG,UAAAjB,EAACS,EAAA,CACC,QAAQ,UACR,QAAS,IAAMS,EAAgBF,CAAI,EACnC,UAAW;AAAA;AAAA;AAAA,cAGPC,GAAe,QAAU,QAAU,qCAAuC,EAAE;AAAA,cAC5EA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,eAAiB,GACnC,EACAjB,EAACS,EAAA,CACC,QAAQ,YACR,QAAS,IAAMW,EAAkBJ,CAAI,EACrC,UAAW;AAAA;AAAA;AAAA,cAGPC,GAAe,QAAU,QAAU,qCAAuC,EAAE;AAAA,cAC5EA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,iBAAmB,GACrC,GACF,IA/DKD,GAAM,IAAMA,GAAM,MAgEzB,CAEJ,EAEMY,EAA4C,CAAC,CAAE,KAAAZ,EAAM,UAAAa,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,EAAO,KAAAC,CAAK,IAAM,CAC3G,KAAM,CAACC,EAAOC,CAAQ,EAAIjC,EAAiB,EAAE,EACvC,CAACkC,EAAcC,CAAe,EAAInC,EAA6B,CAAC,CAAC,EAEjEoC,EAAWxB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD,CACJ,YAAAyB,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,GAAGC,CACL,EAAI7B,EAEE8B,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAIrB,GAAQ,CACZ,MAAMuB,EAAWpB,GAAW,UAAU,KAAKV,GAAUA,GAAQ,SAAWO,GAAM,MAAM,EACpF,GAAIuB,EACF,MAAO,CACL,IAAKvB,EAAK,IACV,GAAGuB,CACL,CAEJ,CAAC,GACC,OAAOvB,GAAQA,CAAI,EACvBW,EAAgBW,CAAc,CAChC,EAEA,OAAA7C,EAAU,IAAM,CACd,GAAIwC,EAAW,CACbR,EAASI,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,EAGHvC,EAAC,OAAI,UAAWG,EAAG,SAAU0B,CAAS,EACnC,UAAAW,GAASzC,EAACU,EAAA,CAAM,KAAM,CAAE,MAAO+B,CAAM,EAAG,KAAMR,EAAM,EACpDU,GACC3C,EAAC,OAAI,UAAW,GAAGsC,EAAW,yBAA2B,EAAE,GACzD,SAAAtC,EAACM,EAAA,CACC,MAAOsC,EACP,MAAOF,EACP,MAAOR,EACP,cAAegB,GAAK,CAClBf,EAASe,CAAC,EACV,MAAMD,EAAWV,GAAa,KAAMb,GAAcA,GAAM,MAAQwB,CAAC,EACjEJ,EAAiBG,GAAU,MAAQ,CAAC,CAAC,CACvC,EACA,UAAU,OAEV,SAAAjD,EAACO,EAAA,CACE,SAAAgC,GAAa,IAAI,CAACb,EAAWC,IAE1B3B,EAACQ,EAAA,CAAwB,MAAOkB,GAAM,KAAO,GAC1C,SAAAA,GAAM,KADSC,CAElB,CAEH,EACH,EACF,EACF,EAEF3B,EAACW,EAAA,CACC,UAAU,oBACV,GAAI,eAAiBoB,EACrB,KAAM,CAAE,KAAMK,EAAc,cAAe,CAAE,GAAGS,EAAO,MAAOb,CAAM,CAAE,EACtE,MAAOjB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,CAEJ,EAEA,IAAOoC,EAAQvC,EAAWgB,CAAY",
-  "names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "GSAP", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "index", "ShelfDisplay", "buildData", "className", "key", "event", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
 }

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

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