npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.110 → 0.0.27-alpha.112 - Mend

@anker-in/headless-ui 0.0.27-alpha.110 → 0.0.27-alpha.112

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

package/dist/cjs/biz-components/SwiperBox/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SwiperBox/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, breakpoints, Slide, className, id }) => {\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n\n  return (\n    <Swiper\n      className={cn(className)}\n      navigation={{\n        nextEl: `.${id}-custom-swiper-button-next`,\n        prevEl: `.${id}-custom-swiper-button-prev`,\n      }}\n      onProgress={swiper => {\n        setStart(swiper.isBeginning)\n        setEnd(swiper.isEnd)\n      }}\n      modules={[Navigation, FreeMode, Mousewheel]}\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      breakpoints={\n        breakpoints || {\n          0: {\n            spaceBetween: 12,\n            slidesPerView: 1,\n            freeMode: false,\n          },\n          374: {\n            spaceBetween: 12,\n            slidesPerView: 1.1,\n            freeMode: false,\n          },\n          768: {\n            spaceBetween: 16,\n            slidesPerView: 2,\n            freeMode: false,\n          },\n        }\n      }\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!flex !h-[unset]\">\n          <Slide data={item} configuration={data?.configuration} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAAgC,oBAChCC,EAAmB,kCAGnBD,EAAoC,wBACpCE,EAAiD,0BAGjD,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,KAAI,YAAS,EAAI,EACnC,CAACC,EAAOC,CAAM,KAAI,YAAS,EAAK,EAEtC,SACE,OAAC,UACC,aAAW,MAAGL,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYK,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAAC,aAAY,WAAU,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACER,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,IACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACU,EAAMC,OACtB,OAAC,eAA8C,UAAU,mBACvD,mBAACT,EAAA,CAAM,KAAMQ,EAAM,cAAeV,GAAM,cAAe,GADvCI,EAAK,cAAgBO,CAEvC,CACD,EACH,CAEJ,CAAC,EAEDb,EAAU,YAAc,YAExB,IAAON,EAAQM",
+  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, breakpoints, Slide, className, id }) => {\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n\n  return (\n    <Swiper\n      className={cn(className)}\n      navigation={{\n        nextEl: `.${id}-custom-swiper-button-next`,\n        prevEl: `.${id}-custom-swiper-button-prev`,\n      }}\n      onProgress={swiper => {\n        setStart(swiper.isBeginning)\n        setEnd(swiper.isEnd)\n      }}\n      modules={[Navigation, FreeMode, Mousewheel]}\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      breakpoints={\n        breakpoints || {\n          0: {\n            spaceBetween: 12,\n            slidesPerView: 1,\n            freeMode: false,\n          },\n          374: {\n            spaceBetween: 12,\n            slidesPerView: 1.1,\n            freeMode: false,\n          },\n          768: {\n            spaceBetween: 16,\n            slidesPerView: 2,\n            freeMode: false,\n          },\n        }\n      }\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!flex !h-[unset]\">\n          <Slide\n            data={item}\n            configuration={data?.configuration ? { ...data?.configuration, index: jIndex } : { index: jIndex }}\n          />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAAgC,oBAChCC,EAAmB,kCAGnBD,EAAoC,wBACpCE,EAAiD,0BAGjD,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,KAAI,YAAS,EAAI,EACnC,CAACC,EAAOC,CAAM,KAAI,YAAS,EAAK,EAEtC,SACE,OAAC,UACC,aAAW,MAAGL,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYK,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAAC,aAAY,WAAU,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACER,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,IACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACU,EAAMC,OACtB,OAAC,eAA8C,UAAU,mBACvD,mBAACT,EAAA,CACC,KAAMQ,EACN,cAAeV,GAAM,cAAgB,CAAE,GAAGA,GAAM,cAAe,MAAOW,CAAO,EAAI,CAAE,MAAOA,CAAO,EACnG,GAJgBP,EAAK,cAAgBO,CAKvC,CACD,EACH,CAEJ,CAAC,EAEDb,EAAU,YAAc,YAExB,IAAON,EAAQM",
   "names": ["SwiperBox_exports", "__export", "SwiperBox_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_modules", "SwiperBox", "React", "data", "breakpoints", "Slide", "className", "id", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex"]
 }

package/dist/cjs/biz-components/SwiperBox/types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export interface SwiperBoxProps {
     data: {
         list: any[];
         configuration?: any;
+        onVideoPlayBtnClick?: (jIndex: number) => void;
     };
     id: string;
     className?: string;
@@ -10,5 +11,6 @@ export interface SwiperBoxProps {
     Slide: React.ComponentType<{
         data: any;
         configuration?: any;
+        jIndex?: number;
     }>;
 }

package/dist/cjs/biz-components/SwiperBox/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var s=(n,a,o,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of c(a))!p.call(n,t)&&t!==o&&i(n,t,{get:()=>a[t],enumerable:!(e=r(a,t))||e.enumerable});return n};var d=n=>s(i({},"__esModule",{value:!0}),n);var m={};module.exports=d(m);var f=require("react");
+"use strict";var o=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(e,n,t,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of c(n))!d.call(e,a)&&a!==t&&o(e,a,{get:()=>n[a],enumerable:!(i=r(n,a))||i.enumerable});return e};var p=e=>m(o({},"__esModule",{value:!0}),e);var s={};module.exports=p(s);var b=require("react");
 //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/SwiperBox/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SwiperBox/types.ts"],
-  "sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n  }\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any, configuration?: any }>\n}\n"],
+  "sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n    onVideoPlayBtnClick?: (jIndex: number) => void\n  }\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any; jIndex?: number }>\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAA,IAAAE,EAAkB",
   "names": ["types_exports", "__toCommonJS", "import_react"]
 }

package/dist/cjs/stories/brandEquity.stories.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
         className?: string;
         data?: Record<string, any>;
-    } & import("react").RefAttributes<any>>;
+    }, "ref"> & import("react").RefAttributes<any>>;
     parameters: {
         layout: string;
     };

package/dist/cjs/stories/mediaplayerMulti.stories.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/MediaPlayerMulti/types.js").MediaPlayerMultiProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/MediaPlayerMulti/types.js").MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
         className?: string;
         data?: Record<string, any>;
-    } & import("react").RefAttributes<any>>;
+    }, "ref"> & import("react").RefAttributes<any>>;
     parameters: {
         layout: string;
     };

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import p from"../../components/picture.js";import{withStyles as n}from"../../shared/Styles.js";const m=({data:{items:r=[],itemShape:i},className:d})=>e("div",{className:a("brand-equity-wrapper w-full",d),children:e("div",{className:a("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:r.map((t,l)=>s("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(l)},i==="round"?"rounded-2xl":"rounded-none"),children:[s("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[e("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.type==="avatar"?e("div",{className:"flex -space-x-2",children:t?.avatarList?.map((o,c)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(p,{source:o.avatar.url,alt:o.avatar?.alt,className:"size-full object-cover"})},c))}):e(p,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:t.icon?.url,alt:t.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),e("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]},l))})});var b=n(m);export{b as default};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as m}from"react";import{cn as a}from"../../helpers/utils.js";import p from"../../components/picture.js";import{withStyles as u}from"../../shared/Styles.js";const f=m(({data:{items:s=[],itemShape:i},className:d},c)=>e("div",{ref:c,className:a("brand-equity-wrapper w-full",d),children:e("div",{className:a("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:s.map((t,l)=>r("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(l)},i==="round"?"rounded-2xl":"rounded-none"),children:[r("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[e("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.type==="avatar"?e("div",{className:"flex -space-x-2",children:t?.avatarList?.map((o,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(p,{source:o.avatar.url,alt:o.avatar?.alt,className:"size-full object-cover"})},n))}):e(p,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:t.icon?.url,alt:t.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),e("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]},l))})}));var y=u(f);export{y as default};
 //# sourceMappingURL=BrandEquity.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data: { items = [], itemShape }, className }) => {\n  return (\n    <div className={cn('brand-equity-wrapper w-full', className)}>\n      <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'brand-equity-item',\n              'flex flex-col bg-white p-4',\n              'desktop:p-6 desktop:gap-16 gap-12',\n              'laptop:col-span-3 lg-desktop:p-8',\n              {\n                ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n              },\n              itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n                {item.title}\n              </h3>\n              {item.type === 'avatar' ? (\n                <div className=\"flex -space-x-2\">\n                  {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n                    <div\n                      key={index}\n                      className={cn(\n                        'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                        'relative inline-block',\n                        'lg-desktop:size-[36px]'\n                      )}\n                    >\n                      <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <Picture\n                  className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                  source={item.icon?.url}\n                  alt={item.icon?.alt}\n                  imgClassName=\"w-full h-full object-cover\"\n                />\n              )}\n            </div>\n            <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n              {item.description}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
-  "mappings": "aA4BY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA3BZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAK3B,MAAMC,EAA0C,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,IAE1FR,EAAC,OAAI,UAAWE,EAAG,8BAA+BM,CAAS,EACzD,SAAAR,EAAC,OAAI,UAAWE,EAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,cAAgB,cAC1C,EAEA,UAAAN,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,MAAG,UAAU,mGACX,SAAAS,EAAK,MACR,EACCA,EAAK,OAAS,SACbT,EAAC,OAAI,UAAU,kBACZ,SAAAS,GAAM,YAAY,IAAI,CAACA,EAAuBC,IAC7CV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQM,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,EAEAV,EAACG,EAAA,CACC,UAAU,2DACV,OAAQM,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,EACAT,EAAC,KAAE,UAAU,+FACV,SAAAS,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,EAIJ,IAAOC,EAAQP,EAAWC,CAAW",
-  "names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "BrandEquity_default"]
+  "sourcesContent": ["'use client'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n  ({ data: { items = [], itemShape }, className }, ref) => {\n    return (\n      <div ref={ref} className={cn('brand-equity-wrapper w-full', className)}>\n        <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className={cn(\n                'brand-equity-item',\n                'flex flex-col bg-white p-4',\n                'desktop:p-6 desktop:gap-16 gap-12',\n                'laptop:col-span-3 lg-desktop:p-8',\n                {\n                  ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n                },\n                itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n              )}\n            >\n              <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n                <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n                  {item.title}\n                </h3>\n                {item.type === 'avatar' ? (\n                  <div className=\"flex -space-x-2\">\n                    {item?.avatarList?.map((item: { avatar: Img }, index: number) => (\n                      <div\n                        key={index}\n                        className={cn(\n                          'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                          'relative inline-block',\n                          'lg-desktop:size-[36px]'\n                        )}\n                      >\n                        <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <Picture\n                    className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                    source={item.icon?.url}\n                    alt={item.icon?.alt}\n                    imgClassName=\"w-full h-full object-cover\"\n                  />\n                )}\n              </div>\n              <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n                {item.description}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(BrandEquity)\n"],
+  "mappings": "aA6Bc,OACE,OAAAA,EADF,QAAAC,MAAA,oBA5Bd,OAAgB,cAAAC,MAAkB,QAElC,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAK3B,MAAMC,EAAcJ,EAClB,CAAC,CAAE,KAAM,CAAE,MAAAK,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,EAAGC,IAE7CV,EAAC,OAAI,IAAKU,EAAK,UAAWP,EAAG,8BAA+BM,CAAS,EACnE,SAAAT,EAAC,OAAI,UAAWG,EAAG,yBAA0B,qBAAsB,kCAAkC,EAClG,SAAAI,EAAM,IAAI,CAACI,EAAMC,IAChBX,EAAC,OAEC,UAAWE,EACT,oBACA,6BACA,oCACA,mCACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASS,CAAK,CACrD,EACAJ,IAAc,QAAU,cAAgB,cAC1C,EAEA,UAAAP,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,MAAG,UAAU,mGACX,SAAAW,EAAK,MACR,EACCA,EAAK,OAAS,SACbX,EAAC,OAAI,UAAU,kBACZ,SAAAW,GAAM,YAAY,IAAI,CAACA,EAAuBC,IAC7CZ,EAAC,OAEC,UAAWG,EACT,iEACA,wBACA,wBACF,EAEA,SAAAH,EAACI,EAAA,CAAQ,OAAQO,EAAK,OAAO,IAAK,IAAKA,EAAK,QAAQ,IAAK,UAAU,yBAAyB,GAPvFC,CAQP,CACD,EACH,EAEAZ,EAACI,EAAA,CACC,UAAU,2DACV,OAAQO,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GAEJ,EACAX,EAAC,KAAE,UAAU,+FACV,SAAAW,EAAK,YACR,IA1CKC,CA2CP,CACD,EACH,EACF,CAGN,EAEA,IAAOC,EAAQR,EAAWC,CAAW",
+  "names": ["jsx", "jsxs", "forwardRef", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "ref", "item", "index", "BrandEquity_default"]
 }

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as h,useRef as p,useEffect as x}from"react";import"@gsap/react";import"gsap";import"gsap/dist/ScrollTrigger";import{cn as f}from"../../helpers/utils.js";import{withStyles as _}from"../../shared/Styles.js";import E from"../../components/picture.js";import I from"../../components/button.js";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{useInView as C}from"react-intersection-observer";const j=({className:w="",data:{title:a,videoTitle:s,btnText:n,img:c,video:k,theme:N,shape:H,...P}})=>{const{sticky:o}=P,[r,l]=h(!1),[B,M]=h(0),t=p(null),i=p(null),T=p(null),{ref:L,inView:m}=C(),u=typeof a=="string"?a:a&&y({data:a}),g=typeof s=="string"?s:s&&y({data:s});return x(()=>{m&&!n?(t.current?.play(),l(!0)):(t.current?.pause(),l(!1))},[m]),x(()=>{if(i.current&&o){const R=i.current.getBoundingClientRect(),v=window.innerHeight,z=window.scrollY||window.pageYOffset,S=R.bottom+z,b=document.documentElement.scrollHeight-S;M(b>v?v:b)}},[]),e("div",{ref:i,style:o?{marginBottom:`-${B}px`}:{},className:f("relative",o&&"mt-[-100vh]",o&&'after:content-[" "] after:relative after:box-content after:block after:h-screen',o&&"lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]"),children:e("div",{className:"sticky top-0 ",children:d("div",{className:f("relative  overflow-hidden",o?"h-screen w-screen":"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",w,{"aiui-dark":N==="dark","rounded-box":H==="rounded"}),children:[e("div",{children:d("div",{ref:L,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:[u&&!r&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),g&&r&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),!r&&n&&e(I,{variant:"link",className:f("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{r?(t.current&&t.current.pause(),l(!1)):(t.current&&t.current.play(),l(!0))},children:n})]})}),e("div",{children:d("div",{ref:T,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:t,className:"size-full object-cover",src:k?.url,muted:!0,loop:!0}),!r&&c?.url&&e(E,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c?.url,alt:c?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})})})};var Z=_(j);export{Z as default};
+"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as w,useRef as p,useEffect as x,forwardRef as _,useImperativeHandle as V}from"react";import"@gsap/react";import"gsap";import"gsap/dist/ScrollTrigger";import{cn as f}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import D from"../../components/picture.js";import C from"../../components/button.js";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{useInView as Y}from"react-intersection-observer";const q=_(({className:k="",data:{title:a,videoTitle:s,btnText:c,img:i,video:H,theme:N,shape:M,onBtnClick:m,...P}},T)=>{const{sticky:r}=P,[o,l]=w(!1),[L,B]=w(0),t=p(null),n=p(null),R=p(null),{ref:E,inView:u}=Y();V(T,()=>n.current);const g=typeof a=="string"?a:a&&y({data:a}),v=typeof s=="string"?s:s&&y({data:s});return x(()=>{u&&!c?(t.current?.play(),l(!0)):(t.current?.pause(),l(!1))},[u]),x(()=>{if(n.current&&r){const z=n.current.getBoundingClientRect(),b=window.innerHeight,I=window.scrollY||window.pageYOffset,S=z.bottom+I,h=document.documentElement.scrollHeight-S;B(h>b?b:h)}},[]),e("div",{ref:n,style:r?{marginBottom:`-${L}px`}:{},className:f("relative",r&&"mt-[-100vh]",r&&'after:content-[" "] after:relative after:box-content after:block after:h-screen',r&&"lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]"),children:e("div",{className:"sticky top-0 ",children:d("div",{className:f("relative  overflow-hidden",r?"h-screen w-screen":"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",k,{"aiui-dark":N==="dark","rounded-box":M==="rounded"}),children:[e("div",{children:d("div",{ref:E,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:[g&&!o&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),v&&o&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!o&&c&&e(C,{variant:"link",className:f("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{o?(t.current&&t.current.pause(),l(!1)):(t.current&&t.current.play(),l(!0)),m&&m?.()},children:c})]})}),e("div",{children:d("div",{ref:R,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:t,className:"size-full object-cover",src:H?.url,muted:!0,loop:!0}),!o&&i?.url&&e(D,{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 oe=j(q);export{oe 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, 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'\n// import { 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, ...rest },\n}) => {\n  const { sticky } = rest\n  const [isPlaying, setIsPlaying] = useState(false)\n  const [btb, setbtb] = useState(0)\n\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n  const bgRef = useRef<HTMLImageElement>(null)\n\n  const { ref, 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  useEffect(() => {\n    if (boxRef.current && sticky) {\n      const rect = boxRef.current.getBoundingClientRect()\n      const screenHeight = window.innerHeight\n      const scrollTop = window.scrollY || window.pageYOffset\n      const elementBottomToPageTop = rect.bottom + scrollTop\n      const pageHeight = document.documentElement.scrollHeight\n      const distanceToPageBottom = pageHeight - elementBottomToPageTop\n      setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n    }\n  }, [])\n\n  // useGSAP(() => {\n  //   if (!bgRef.current) return\n  //   const height = boxRef.current?.clientHeight || 100\n  //   const screenHeight = bgRef.current?.clientHeight || 100\n  //   const base = screenHeight + height\n\n  //   ScrollTrigger.create({\n  //     trigger: boxRef.current,\n  //     start: 'top bottom',\n  //     end: 'bottom top',\n  //     scrub: true,\n  //     onUpdate: (self: any) => {\n  //       const value = self.progress * base - screenHeight\n  //       gsap.set(bgRef.current, { y: value })\n  //     },\n  //   })\n  //   return () => {\n  //     ScrollTrigger.getAll().forEach((t: any) => t.kill())\n  //   }\n  // }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      style={sticky ? { marginBottom: `-${btb}px` } : {}}\n      className={cn(\n        'relative',\n        sticky && 'mt-[-100vh]',\n        sticky && 'after:content-[\" \"] after:relative after:box-content after:block after:h-screen',\n        sticky &&\n          'lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]'\n      )}\n    >\n      <div className=\"sticky top-0 \">\n        <div\n          className={cn(\n            'relative  overflow-hidden',\n            sticky\n              ? 'h-screen w-screen'\n              : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n            className,\n            {\n              'aiui-dark': theme === 'dark',\n              'rounded-box': shape === 'rounded',\n            }\n          )}\n        >\n          <div>\n            <div\n              ref={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-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              {videoTitle_html && isPlaying && (\n                <div\n                  className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                />\n              )}\n              {!isPlaying && btnText && (\n                <Button\n                  variant=\"link\"\n                  className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                  onClick={() => {\n                    if (isPlaying) {\n                      if (videoRef.current) {\n                        videoRef.current.pause()\n                      }\n                      setIsPlaying(false)\n                    } else {\n                      if (videoRef.current) {\n                        videoRef.current.play()\n                      }\n                      setIsPlaying(true)\n                    }\n                  }}\n                >\n                  {btnText}\n                  {/* <Right /> */}\n                </Button>\n              )}\n            </div>\n          </div>\n          <div>\n            <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n              <video 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      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "useInView", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "ref", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } 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'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', data: { title, videoTitle, btnText, img, video, theme, shape, onBtnClick, ...rest } }, ref) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    const title_html = 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    useEffect(() => {\n      if (boxRef.current && sticky) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n    }, [])\n\n    // useGSAP(() => {\n    //   if (!bgRef.current) return\n    //   const height = boxRef.current?.clientHeight || 100\n    //   const screenHeight = bgRef.current?.clientHeight || 100\n    //   const base = screenHeight + height\n\n    //   ScrollTrigger.create({\n    //     trigger: boxRef.current,\n    //     start: 'top bottom',\n    //     end: 'bottom top',\n    //     scrub: true,\n    //     onUpdate: (self: any) => {\n    //       const value = self.progress * base - screenHeight\n    //       gsap.set(bgRef.current, { y: value })\n    //     },\n    //   })\n    //   return () => {\n    //     ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    //   }\n    // }, [])\n\n    return (\n      <div\n        ref={boxRef}\n        style={sticky ? { marginBottom: `-${btb}px` } : {}}\n        className={cn(\n          'relative',\n          sticky && 'mt-[-100vh]',\n          sticky && 'after:content-[\" \"] after:relative after:box-content after:block after:h-screen',\n          sticky &&\n            'lg-desktop:after:aspect-w-[1920] lg-desktop:after:aspect-h-[930] desktop:after:aspect-w-[1024] desktop:after:aspect-h-[520] tablet:after:aspect-w-[768] tablet:after:aspect-h-[660] after:aspect-w-[390] after:aspect-h-[660]'\n        )}\n      >\n        <div className=\"sticky top-0 \">\n          <div\n            className={cn(\n              'relative  overflow-hidden',\n              sticky\n                ? 'h-screen w-screen'\n                : 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n              className,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              }\n            )}\n          >\n            <div>\n              <div\n                ref={inViewRef}\n                className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {!isPlaying && btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\n                      if (isPlaying) {\n                        if (videoRef.current) {\n                          videoRef.current.pause()\n                        }\n                        setIsPlaying(false)\n                      } else {\n                        if (videoRef.current) {\n                          videoRef.current.play()\n                        }\n                        setIsPlaying(true)\n                      }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n            <div>\n              <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                <video 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        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "useInView", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "onBtnClick", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "MediaPlayerBase_default"]
 }

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

@@ -9,5 +9,6 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
         btnText?: string;
         img?: Img;
         video?: Video;
+        onBtnClick?: () => void;
     };
 }

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as p,useRef as n}from"react";import{cn as m}from"../../helpers/utils.js";import{withStyles as d}from"../../shared/Styles.js";import{Picture as c}from"../../components/index.js";import f from"../Title/index.js";import u from"../SwiperBox/index.js";import{convertLexicalToHTML as x}from"@payloadcms/richtext-lexical/html";const g=({data:t,configuration:r})=>{const[l,a]=p(!1),o=n(null);return i("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",r.shape==="round"?"rounded-2xl":""),children:[i("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[l?e("video",{ref:o,className:"size-full object-cover",src:t?.video?.url,muted:!0,loop:!0}):e(c,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t.video&&e("button",{onClick:()=>{l?(o.current&&o.current.pause(),a(!1)):(o.current&&o.current.play(),a(!0))},className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),i("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[i("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]})},h=({data:{items:t=[],shape:r="square",title:l},className:a="",key:o})=>{const s=typeof l=="string"?l:l&&x({data:l});return i("div",{className:a,children:[l&&e(f,{data:{title:s||""}}),e(u,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+o,data:{list:t,configuration:{shape:r}},Slide:g})]})};var L=d(h);export{L as default};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as m,useRef as d,forwardRef as f}from"react";import{cn as c}from"../../helpers/utils.js";import{withStyles as u}from"../../shared/Styles.js";import{Picture as x}from"../../components/index.js";import h from"../Title/index.js";import v from"../SwiperBox/index.js";import{convertLexicalToHTML as g}from"@payloadcms/richtext-lexical/html";const y=({data:l,configuration:i})=>{const[t,r]=m(!1),o=d(null);return a("div",{className:c("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:[a("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[t?e("video",{ref:o,className:"size-full object-cover",src:l?.video?.url,muted:!0,loop:!0}):e(x,{source:l.img?.url,alt:l.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:l.video&&e("button",{onClick:()=>{t?(o.current&&o.current.pause(),r(!1)):(o.current&&o.current.play(),r(!0)),i?.onVideoPlayBtnClick&&i?.onVideoPlayBtnClick?.(i?.index||0)},className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),a("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[a("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.title}),l.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:l.description})]})]})},w=f(({data:{items:l=[],shape:i="square",title:t},className:r="",key:o,onVideoPlayBtnClick:s},p)=>{const n=typeof t=="string"?t:t&&g({data:t});return a("div",{className:r,ref:p,children:[t&&e(h,{data:{title:n||""}}),e(v,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+o,data:{list:l,configuration:{shape:i,onVideoPlayBtnClick:s}},Slide:y})]})});var j=u(w);export{j 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, { useState, useRef } 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  const [isPlaying, setIsPlaying] = useState<boolean>(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n        {isPlaying ? (\n          <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n        ) : (\n          <Picture\n            source={data.img?.url}\n            alt={data.img?.alt || ''}\n            className=\"size-full\"\n            imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n          />\n        )}\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data.video && (\n            <button\n              onClick={() => {\n                if (isPlaying) {\n                  if (videoRef.current) {\n                    videoRef.current.pause()\n                  }\n                  setIsPlaying(false)\n                } else {\n                  if (videoRef.current) {\n                    videoRef.current.play()\n                  }\n                  setIsPlaying(true)\n                }\n              }}\n              className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti: 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": "aAsBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBArBN,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,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,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,EAAIZ,EAAkB,EAAK,EACnDa,EAAWZ,EAAyB,IAAI,EAC9C,OACEF,EAAC,OACC,UAAWG,EACT,2CACA,yCACA,iEACAQ,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAX,EAAC,OAAI,UAAU,+DACZ,UAAAY,EACCb,EAAC,SAAM,IAAKe,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,EAE3FX,EAACM,EAAA,CACC,OAAQK,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,EAEFX,EAAC,OAAI,UAAU,2DACZ,SAAAW,EAAK,OACJX,EAAC,UACC,QAAS,IAAM,CACTa,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EACA,UAAU,gHAEV,SAAAd,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oJACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,4FACX,SAAAW,EAAK,MACR,EACCA,EAAK,OACJX,EAAC,KAAE,UAAU,uFACV,SAAAW,EAAK,MACR,GAEJ,EAEAX,EAAC,KAAE,UAAU,0JACV,SAAAW,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,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,GAASV,EAAqB,CAAE,KAAMU,CAAM,CAAC,EACpG,OACElB,EAAC,OAAI,UAAWmB,EACb,UAAAD,GAASnB,EAACO,EAAA,CAAM,KAAM,CAAE,MAAOe,GAAc,EAAG,EAAG,EACpDtB,EAACQ,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2Ba,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,CAAM,CAAE,EACrD,MAAOR,EACT,GACF,CAEJ,EAEA,IAAOa,EAAQlB,EAAWW,CAAgB",
-  "names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "MediaPlayerMulti_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, forwardRef } 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  const [isPlaying, setIsPlaying] = useState<boolean>(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none\">\n        {isPlaying ? (\n          <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n        ) : (\n          <Picture\n            source={data.img?.url}\n            alt={data.img?.alt || ''}\n            className=\"size-full\"\n            imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n          />\n        )}\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data.video && (\n            <button\n              onClick={() => {\n                if (isPlaying) {\n                  if (videoRef.current) {\n                    videoRef.current.pause()\n                  }\n                  setIsPlaying(false)\n                } else {\n                  if (videoRef.current) {\n                    videoRef.current.play()\n                  }\n                  setIsPlaying(true)\n                }\n                configuration?.onVideoPlayBtnClick && configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  ({ data: { items = [], shape = 'square', title }, className = '', key, onVideoPlayBtnClick }, ref) => {\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    return (\n      <div className={className} ref={ref}>\n        {title && <Title data={{ title: title_html || '' }} />}\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MediaPlayerMultiSwiper' + key}\n          data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n          Slide={MediaPlayerItem}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "aAsBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBArBN,OAAgB,YAAAC,EAAU,UAAAC,EAAQ,cAAAC,MAAkB,QACpD,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,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,EAAIb,EAAkB,EAAK,EACnDc,EAAWb,EAAyB,IAAI,EAC9C,OACEF,EAAC,OACC,UAAWI,EACT,2CACA,yCACA,iEACAQ,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAZ,EAAC,OAAI,UAAU,+DACZ,UAAAa,EACCd,EAAC,SAAM,IAAKgB,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,EAE3FZ,EAACO,EAAA,CACC,OAAQK,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,EAEFZ,EAAC,OAAI,UAAU,2DACZ,SAAAY,EAAK,OACJZ,EAAC,UACC,QAAS,IAAM,CACTc,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,GAEnBF,GAAe,qBAAuBA,GAAe,sBAAsBA,GAAe,OAAS,CAAC,CACtG,EACA,UAAU,gHAEV,SAAAb,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oJACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,4FACX,SAAAY,EAAK,MACR,EACCA,EAAK,OACJZ,EAAC,KAAE,UAAU,uFACV,SAAAY,EAAK,MACR,GAEJ,EAEAZ,EAAC,KAAE,UAAU,0JACV,SAAAY,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,EAAmBb,EACvB,CAAC,CAAE,KAAM,CAAE,MAAAc,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAAGC,IAAQ,CACpG,MAAMC,EAAa,OAAOL,GAAU,SAAWA,EAAQA,GAASV,EAAqB,CAAE,KAAMU,CAAM,CAAC,EACpG,OACEnB,EAAC,OAAI,UAAWoB,EAAW,IAAKG,EAC7B,UAAAJ,GAASpB,EAACQ,EAAA,CAAM,KAAM,CAAE,MAAOiB,GAAc,EAAG,EAAG,EACpDzB,EAACS,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2Ba,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAI,CAAoB,CAAE,EAC1E,MAAOZ,EACT,GACF,CAEJ,CACF,EAEA,IAAOe,EAAQpB,EAAWW,CAAgB",
+  "names": ["jsx", "jsxs", "useState", "useRef", "forwardRef", "cn", "withStyles", "Picture", "Title", "SwiperBox", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "MediaPlayerMulti_default"]
 }

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

@@ -13,4 +13,5 @@ export interface MediaPlayerMultiProps extends ComponentCommonProps {
         shape?: 'round' | 'square';
         items: MediaPlayerItemProps[];
     };
+    onVideoPlayBtnClick?: (jIndex: number) => void;
 }

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as y,jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as h,useEffect as x}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as w}from"../../shared/Styles.js";import k from"../Slogan/index.js";import{Grid as N,GridItem as i}from"../../components/gird.js";import{Container as C}from"../../components/container.js";import M from"../BrandEquity/index.js";import S from"../MemberEquity/index.js";import z from"../Spacer/index.js";import P from"gsap";import{convertLexicalToHTML as m}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as $}from"react-responsive";import R from"../../components/picture.js";const u=({defaultConverters:s})=>({...s,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<div class="lexical-${t.$.color}">${t.text}</div>`:t.text}}),c=({children:s,spaceY:a})=>{const t=$({query:"(max-width: 768px)"});return e(C,{spaceY:a,children:o(N,{children:[!t&&e(i,{span:1}),e(i,{span:t?12:10,children:s}),!t&&e(i,{span:1})]})})},L=({children:s,id:a,components:t})=>(x(()=>{const r=window.screen.height;P.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${r*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:a,className:"relative z-10 pb-10",children:[e(y,{children:s}),e(y,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(c,{spaceY:"!my-0",children:e(M,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(c,{spaceY:"!my-0",children:e(S,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(z,{data:r,style:r?.style});default:return null}})})]})),T=({className:s="",id:a,data:{title:t,videoTitle:r,btnText:q,img:l,video:n,theme:p,shape:f,components:v}})=>{const b=h(null),g=typeof t=="string"?t:t&&m({data:t,converters:u});return typeof r=="string"||r&&m({data:r,converters:u}),o(L,{id:a,components:v,children:[e("div",{className:d("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":p==="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(k,{className:"sticky-title",data:{title:g||"",theme: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:[n?.url&&e("video",{ref:b,className:"size-full object-cover",src:n?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),l?.url&&e(R,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:l?.url,alt:l?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})};var W=w(T);export{W as default};
+"use client";import{Fragment as f,jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as w,useEffect as x,forwardRef as k}from"react";import{cn as d}from"../../helpers/utils.js";import{withStyles as N}from"../../shared/Styles.js";import M from"../Slogan/index.js";import{Grid as C,GridItem as i}from"../../components/gird.js";import{Container as S}from"../../components/container.js";import z from"../BrandEquity/index.js";import P from"../MemberEquity/index.js";import $ from"../Spacer/index.js";import R from"gsap";import{convertLexicalToHTML as m}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as L}from"react-responsive";import T from"../../components/picture.js";const u=({defaultConverters:s})=>({...s,text:a=>{const{node:t}=a;return t.$&&t.$.color?`<div class="lexical-${t.$.color}">${t.text}</div>`:t.text}}),c=({children:s,spaceY:a})=>{const t=L({query:"(max-width: 768px)"});return e(S,{spaceY:a,children:o(C,{children:[!t&&e(i,{span:1}),e(i,{span:t?12:10,children:s}),!t&&e(i,{span:1})]})})},H=({children:s,id:a,components:t})=>(x(()=>{const r=window.screen.height;R.timeline({scrollTrigger:{trigger:`#${a}`,start:"top top",end:`top+=${r*1.8}px bottom`,scrub:0}}).to(`#${a} .sticky-cover`,{opacity:1,duration:.3}).to(`#${a} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")},[]),o("div",{id:a,className:"relative z-10 pb-10",children:[e(f,{children:s}),e(f,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(c,{spaceY:"!my-0",children:e(z,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(c,{spaceY:"!my-0",children:e(P,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e($,{data:r,style:r?.style});default:return null}})})]})),q=k(({className:s="",id:a,data:{title:t,videoTitle:r,btnText:B,img:l,video:n,theme:p,shape:y,components:v}},b)=>{const g=w(null),h=typeof t=="string"?t:t&&m({data:t,converters:u});return typeof r=="string"||r&&m({data:r,converters:u}),o(H,{id:a,components:v,children:[e("div",{ref:b,className:d("sticky-box absolute left-0 top-0 h-screen w-full",s,{"aiui-dark":p==="dark","rounded-box":y==="rounded"}),children:e("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2",children:e(c,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(M,{className:"sticky-title",data:{title:h||"",theme: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:[n?.url&&e("video",{ref:g,className:"size-full object-cover",src:n?.url,autoPlay:!0,muted:!0,loop:!0,playsInline:!0}),l?.url&&e(T,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:l?.url,alt:l?.alt,imgClassName:"w-full h-full object-cover"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})]})});var Z=N(q);export{Z 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 { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = ({\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 =\n    typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n  typeof videoTitle === 'string'\n    ? videoTitle\n    : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n  return (\n    <StickyBox id={id} components={components}>\n      <div\n        className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n        >\n          {video?.url && (\n            <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop playsInline />\n          )}\n          {img?.url && (\n            <Picture\n              className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n              source={img?.url}\n              alt={img?.alt}\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          )}\n          <div\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n}\n\nexport default withStyles(MediaPlayerSticky)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "MediaPlayerSticky_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } 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 { defaultHTMLConverters, convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<div class=\"lexical-${node.$.color}\">${node.text}</div>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = ({\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 = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    return (\n      <StickyBox id={id} components={components}>\n        <div\n          ref={ref}\n          className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n        >\n          <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n        <div className=\"sticky left-0 top-0 w-full\">\n          <div\n            className={cn(\n              'media-cover',\n              'relative h-screen w-full',\n              'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n            )}\n          >\n            {video?.url && (\n              <video\n                ref={videoRef}\n                className=\"size-full object-cover\"\n                src={video?.url}\n                autoPlay\n                muted\n                loop\n                playsInline\n              />\n            )}\n            {img?.url && (\n              <Picture\n                className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n                source={img?.url}\n                alt={img?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            )}\n            <div\n              className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n              style={{\n                background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n              }}\n            />\n          </div>\n        </div>\n      </StickyBox>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerSticky)\n"],
+  "mappings": "aAqCM,OA+CA,YAAAA,EA9CgB,OAAAC,EADhB,QAAAC,MAAA,oBApCN,OAA0B,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,MAAkB,QAC/D,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAY,qBACnB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAiB,0BACxB,OAAOC,MAAkB,2BACzB,OAAOC,MAAY,qBACnB,OAAOC,MAAU,OAEjB,OAAgC,wBAAAC,MAA4B,oCAI5D,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,MAAa,8BAEpB,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,uBAAuBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,SAEnDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CAAE,SAAAC,EAAU,OAAAC,CAAO,IAAsD,CAC7F,MAAMC,EAAWT,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACEhB,EAACU,EAAA,CAAU,OAAQc,EACjB,SAAAvB,EAACO,EAAA,CACE,WAACiB,GAAYzB,EAACS,EAAA,CAAS,KAAM,EAAG,EACjCT,EAACS,EAAA,CAAS,KAAMgB,EAAW,GAAK,GAAK,SAAAF,EAAS,EAC7C,CAACE,GAAYzB,EAACS,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMiB,EAAY,CAAC,CACjB,SAAAH,EACA,GAAAI,EACA,WAAAC,CACF,KAKEzB,EAAU,IAAM,CACd,MAAM0B,EAAS,OAAO,OAAO,OAE7Bf,EACG,SAAS,CACR,cAAe,CACb,QAAS,IAAIa,CAAE,GACf,MAAO,UACP,IAAK,QAAQE,EAAS,GAAG,YACzB,MAAO,CACT,CACF,CAAC,EACA,GAAG,IAAIF,CAAE,iBAAkB,CAC1B,QAAS,EACT,SAAU,EACZ,CAAC,EACA,GACC,IAAIA,CAAE,kBACN,CACE,IAAK,OACL,UAAW,yBACX,SAAU,CACZ,EACA,GACF,CACJ,EAAG,CAAC,CAAC,EAGH1B,EAAC,OAAI,GAAI0B,EAAI,UAAU,sBACrB,UAAA3B,EAAAD,EAAA,CAAG,SAAAwB,EAAS,EACZvB,EAAAD,EAAA,CACG,SAAA6B,GAAY,IAAKE,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACE9B,EAAC,OAAI,UAAU,+BACb,SAAAA,EAACsB,EAAA,CAAa,OAAO,QACnB,SAAAtB,EAACW,EAAA,CAAY,KAAMmB,EAAe,MAAOA,GAAe,MAAO,EACjE,EACF,EAGJ,IAAK,oBACH,OACE9B,EAAC,OAAI,UAAU,sCACb,SAAAA,EAACsB,EAAA,CAAa,OAAO,QACnB,SAAAtB,EAACY,EAAA,CAAa,KAAMkB,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,EACF,EAGJ,IAAK,aACH,OAAO9B,EAACa,EAAA,CAAO,KAAMiB,EAAe,MAAOA,GAAe,MAAO,EAEnE,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,GAIEC,EAAoB3B,EACxB,CAAC,CAAE,UAAA4B,EAAY,GAAI,GAAAL,EAAI,KAAM,CAAE,MAAAM,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,WAAAX,CAAW,CAAE,EAAGY,IAAQ,CAC3G,MAAMC,EAAWvC,EAAyB,IAAI,EAExCwC,EACJ,OAAOT,GAAU,SAAWA,EAAQA,GAASlB,EAAqB,CAAE,KAAMkB,EAAO,WAAYf,CAAe,CAAC,EAC/G,cAAOgB,GAAe,UAElBA,GAAcnB,EAAqB,CAAE,KAAMmB,EAAY,WAAYhB,CAAe,CAAC,EAGrFjB,EAACyB,EAAA,CAAU,GAAIC,EAAI,WAAYC,EAC7B,UAAA5B,EAAC,OACC,IAAKwC,EACL,UAAWnC,EAAG,mDAAoD2B,EAAW,CAC3E,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,SAAAvC,EAAC,OAAI,UAAU,wFACb,SAAAA,EAACsB,EAAA,CAAa,OAAO,uCACnB,SAAAtB,EAACO,EAAA,CAAO,UAAU,eAAe,KAAM,CAAE,MAAOmC,GAAc,GAAI,MAAAJ,CAAM,EAAG,EAC7E,EACF,EACF,EACAtC,EAAC,OAAI,UAAU,6BACb,SAAAC,EAAC,OACC,UAAWI,EACT,cACA,2BACA,oNACF,EAEC,UAAAgC,GAAO,KACNrC,EAAC,SACC,IAAKyC,EACL,UAAU,yBACV,IAAKJ,GAAO,IACZ,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,YAAW,GACb,EAEDD,GAAK,KACJpC,EAACiB,EAAA,CACC,UAAU,mDACV,OAAQmB,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,EAEFpC,EAAC,OACC,UAAU,8DACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAO2C,EAAQrC,EAAWyB,CAAiB",
+  "names": ["Fragment", "jsx", "jsxs", "useRef", "useEffect", "forwardRef", "cn", "withStyles", "Slogan", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "Picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "componentData", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "ref", "videoRef", "title_html", "MediaPlayerSticky_default"]
 }

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

@@ -19,8 +19,8 @@ export interface ShelfDisplayItem {
     data?: ShelfDisplayItem[];
 }
 type EventType = {
-    primaryButton?: (v: any) => void;
-    secondaryButton?: (v: any) => void;
+    primaryButton?: (v: any, index: number) => void;
+    secondaryButton?: (v: any, index: number) => void;
 };
 export interface ShelfDisplayProps {
     data: {

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

@@ -1,8 +1,8 @@
-"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import I,{useState as k,useEffect as C}from"react";import{cn as d}from"../../helpers/utils.js";import M from"../../components/picture.js";import{Tabs as V,TabsList as q,TabsTrigger as E}from"../../components/tabs.js";import S from"../../components/button.js";import A from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as $}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import{useMediaQuery as R}from"react-responsive";const U=({data:e,configuration:r})=>{const c=a=>r?.event?.primaryButton?.(a),m=a=>r?.event?.secondaryButton?.(a),{price:u,basePrice:f}=z({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),b=()=>{const a=e?.sku,i=e?.variants;return i?.find(y=>y?.sku===a)?.image?.url||i?.[0]?.image?.url||""};return p("div",{className:d("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",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(M,{source:b(),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?.((a,i)=>t("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:a},i))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),p("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:f||""})]}),p("div",{className:d("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(S,{variant:"primary",onClick:()=>c(e),className:`
+"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import I,{useState as k,useEffect as C}from"react";import{cn as d}from"../../helpers/utils.js";import M from"../../components/picture.js";import{Tabs as V,TabsList as q,TabsTrigger as E}from"../../components/tabs.js";import S from"../../components/button.js";import A from"../Title/index.js";import L from"../SwiperBox/index.js";import{withStyles as $}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import{useMediaQuery as R}from"react-responsive";const U=({data:e,configuration:r})=>{const m=(a,s)=>r?.event?.primaryButton?.(a,s+1),c=(a,s)=>r?.event?.secondaryButton?.(a,s+1),{price:u,basePrice:f}=z({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),b=()=>{const a=e?.sku,s=e?.variants;return s?.find(x=>x?.sku===a)?.image?.url||s?.[0]?.image?.url||""};return p("div",{className:d("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",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(M,{source:b(),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?.((a,s)=>t("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:a},s))}),t("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold",children:e?.title||""}),t("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),p("div",{className:"mb-2 flex items-center",children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:f||""})]}),p("div",{className:d("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[t(S,{variant:"primary",onClick:()=>m(e,r?.index),className:`
             laptop:text-sm desktop:text-base text-xs
             ${r.direction==="vertical"?"w-full":""}
-          `,children:r?.primaryButton||""}),t(S,{variant:"secondary",onClick:()=>m(e),className:`
+          `,children:r?.primaryButton||""}),t(S,{variant:"secondary",onClick:()=>c(e,r?.index),className:`
             laptop:text-sm desktop:text-base text-xs
             ${r.direction==="vertical"?"w-full":""}
-          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},j=I.forwardRef(({data:e,buildData:r,className:c="",key:m,event:u},f)=>{const[b,a]=k(""),[i,h]=k([]),y=R({query:"(max-width: 768px)"}),{productsTab:l=[],productsCard:B=[],title:v,align:T="left",isShowTab:g=!0,tabShape:N="square",...D}=e,x=s=>{const o=s?.map(n=>{const w=r?.products?.find(P=>P?.handle===n?.handle);if(w)return{sku:n.sku,...w}})?.filter(n=>n);h(o)};return C(()=>{if(g){a(l?.[0]?.tab||""),x(l?.[0]?.data||[]);return}x(B)},[]),p("div",{ref:f,className:d("w-full",c,{"aiui-dark":e?.theme==="dark"}),children:[v&&t(A,{data:{title:v}}),g&&t("div",{className:`${y?"w-full overflow-hidden":""}`,children:t(V,{shape:N,align:T,value:b,onValueChange:s=>{a(s);const o=l?.find(n=>n?.tab===s);x(o?.data||[])},className:"mb-8",children:t(q,{children:l?.map((s,o)=>t(E,{value:s?.tab||"",children:s?.tab},o))})})}),t(L,{className:"!overflow-visible",id:"ShelfDisplay"+m,data:{list:i,configuration:{...D,event:u}},Slide:U,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=$(j);export{Y as default};
+          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},j=I.forwardRef(({data:e,buildData:r,className:m="",key:c,event:u},f)=>{const[b,a]=k(""),[s,h]=k([]),x=R({query:"(max-width: 768px)"}),{productsTab:o=[],productsCard:B=[],title:v,align:T="left",isShowTab:g=!0,tabShape:N="square",...D}=e,y=i=>{const l=i?.map(n=>{const w=r?.products?.find(P=>P?.handle===n?.handle);if(w)return{sku:n.sku,...w}})?.filter(n=>n);h(l)};return C(()=>{if(g){a(o?.[0]?.tab||""),y(o?.[0]?.data||[]);return}y(B)},[]),p("div",{ref:f,className:d("w-full",m,{"aiui-dark":e?.theme==="dark"}),children:[v&&t(A,{data:{title:v}}),g&&t("div",{className:`${x?"w-full overflow-hidden":""}`,children:t(V,{shape:N,align:T,value:b,onValueChange:i=>{a(i);const l=o?.find(n=>n?.tab===i);y(l?.data||[])},className:"mb-8",children:t(q,{children:o?.map((i,l)=>t(E,{value:i?.tab||"",children:i?.tab},l))})})}),t(L,{className:"!overflow-visible",id:"ShelfDisplay"+c,data:{list:s,configuration:{...D,event:u}},Slide:U,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=$(j);export{Y 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    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\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 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\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 border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n        <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{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 desktop:text-base text-xs\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 text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\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 ref={ref} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\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)\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "aA8FQ,cAAAA,EA0BF,QAAAC,MA1BE,oBA7FR,OAAOC,GAAS,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,mBAwD9B,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,OACEzB,EAAC,OAEC,UAAWI,EACT,2JACAa,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,UAAAlB,EAAC,OAAI,UAAWK,EAAG,2FAA2F,EAC5G,SAAAL,EAACM,EAAA,CAAQ,OAAQkB,EAAU,EAAG,UAAU,yDAAyD,EACnG,EACAxB,EAAC,OAAI,UAAU,2DACZ,SAAAiB,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACU,EAAWC,IAExC5B,EAAC,OAEC,UAAU,8HAET,SAAA2B,GAHIC,CAIP,CAEH,EACH,EACA5B,EAAC,KACC,MAAOiB,GAAM,OAAS,GACtB,UAAU,0GAET,SAAAA,GAAM,OAAS,GAClB,EACAjB,EAAC,MACC,MAAOiB,GAAM,aAAe,GAC5B,UAAU,yGAET,SAAAA,GAAM,aAAe,GACxB,EACAhB,EAAC,OAAI,UAAU,yBACb,UAAAD,EAAC,OAAI,UAAU,sDAAuD,SAAAsB,GAAS,GAAG,EAClFtB,EAAC,OAAI,UAAU,6DAA8D,SAAAuB,GAAa,GAAG,GAC/F,EAEAtB,EAAC,OAAI,UAAWI,EAAG,0BAA2Ba,EAAc,YAAc,WAAa,WAAa,EAAE,EACpG,UAAAlB,EAACU,EAAA,CACC,QAAQ,UACR,QAAS,IAAMS,EAAgBF,CAAI,EACnC,UAAW;AAAA;AAAA,cAEPC,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,eAAiB,GACnC,EACAlB,EAACU,EAAA,CACC,QAAQ,YACR,QAAS,IAAMW,EAAkBJ,CAAI,EACrC,UAAW;AAAA;AAAA,cAEPC,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,iBAAmB,GACrC,GACF,IA3DKD,GAAM,IAAMA,GAAM,MA4DzB,CAEJ,EAEMY,EAAe3B,EAAM,WACzB,CAAC,CAAE,KAAAe,EAAM,UAAAa,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CACxD,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,EAGHxC,EAAC,OAAI,IAAKiC,EAAK,UAAW7B,EAAG,SAAU0B,EAAW,CAAE,YAAad,GAAM,QAAU,MAAO,CAAC,EACtF,UAAAyB,GAAS1C,EAACW,EAAA,CAAM,KAAM,CAAE,MAAO+B,CAAM,EAAG,EACxCE,GACC5C,EAAC,OAAI,UAAW,GAAGuC,EAAW,yBAA2B,EAAE,GACzD,SAAAvC,EAACO,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,SAAAlD,EAACQ,EAAA,CACE,SAAAgC,GAAa,IAAI,CAACb,EAAWC,IAE1B5B,EAACS,EAAA,CAAwB,MAAOkB,GAAM,KAAO,GAC1C,SAAAA,GAAM,KADSC,CAElB,CAEH,EACH,EACF,EACF,EAEF5B,EAACY,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,CACF,EAEA,IAAOoC,EAAQvC,EAAWgB,CAAY",
-  "names": ["jsx", "jsxs", "React", "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", "ref", "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, index: number) => void\n  secondaryButton?: (v: any, index: number) => 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    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\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 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\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 border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n        <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{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, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\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 ref={ref} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\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)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "cn", "Picture", "Tabs", "TabsList", "TabsTrigger", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
 }