@anker-in/headless-ui 0.0.27-alpha.115 → 0.0.27-alpha.118

package/dist/cjs/biz-components/Evaluate/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ContainerProps, Theme } from '../../types/props.js';
 export interface EvaluateItem {
     /** 产品图片*/
     img: {
@@ -21,7 +22,8 @@ export interface EvaluateProps {
         /** 形状 */
         shape?: 'round' | 'square';
         /** 主题色*/
-        theme?: 'light' | 'dark';
+        theme?: Theme;
+        containerProps?: ContainerProps;
     };
     /** 按钮事件*/
     event?: {

package/dist/cjs/biz-components/Evaluate/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var b=Object.create;var n=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var i in r)n(e,i,{get:r[i],enumerable:!0})},p=(e,r,i,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of N(r))!C.call(e,l)&&l!==i&&n(e,l,{get:()=>r[l],enumerable:!(s=k(r,l))||s.enumerable});return e};var d=(e,r,i)=>(i=e!=null?b(y(e)):{},p(r||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),B=e=>p(n({},"__esModule",{value:!0}),e);var M={};L(M,{default:()=>P});module.exports=B(M);var t=require("react/jsx-runtime"),f=d(require("react")),v=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),c=d(require("../../components/picture.js")),u=d(require("../SwiperBox/index.js")),w=require("../../shared/Styles.js"),a=require("../../components/avatar.js");const E=({data:e,configuration:r})=>{const i=s=>s?Array.from(new Array(Number(s)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[480px] desktop:h-[384px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:i(e?.rating)?.map?.((s,l)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(a.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(a.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("p",{className:"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold",children:e?.description||""}),(0,t.jsx)("a",{href:e?.link||"",onClick:()=>{r?.event?.primaryButton(e,r?.index)},children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(c.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})})]})},A=f.default.forwardRef(({className:e="",data:r,key:i,event:s},l)=>{const{products:x,title:m,theme:g,...h}=r;return(0,t.jsxs)("div",{ref:l,className:(0,o.cn)("w-full",e,{"aiui-dark":g==="dark"}),children:[m&&(0,t.jsx)(v.default,{data:{title:m}}),(0,t.jsx)(u.default,{className:"!overflow-visible",id:"Evaluate"+i,data:{list:x,configuration:{...h,event:s}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})});var P=(0,w.withStyles)(A);
+"use strict";"use client";var k=Object.create;var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var i in r)n(e,i,{get:r[i],enumerable:!0})},p=(e,r,i,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of C(r))!P.call(e,s)&&s!==i&&n(e,s,{get:()=>r[s],enumerable:!(a=N(r,s))||a.enumerable});return e};var d=(e,r,i)=>(i=e!=null?k(y(e)):{},p(r||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),B=e=>p(n({},"__esModule",{value:!0}),e);var z={};L(z,{default:()=>M});module.exports=B(z);var t=require("react/jsx-runtime"),v=d(require("react")),f=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),c=d(require("../../components/picture.js")),u=d(require("../SwiperBox/index.js")),w=require("../../shared/Styles.js"),l=require("../../components/avatar.js"),x=require("../../components/container.js");const E=({data:e,configuration:r})=>{const i=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[480px] desktop:h-[384px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:i(e?.rating)?.map?.((a,s)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},s))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(l.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(l.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("p",{className:"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold",children:e?.description||""}),(0,t.jsx)("a",{href:e?.link||"",onClick:()=>{r?.event?.primaryButton(e,r?.index)},children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(c.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})})]})},A=v.default.forwardRef(({className:e="",data:r,key:i,...a},s)=>{const{products:h,title:m,theme:g,...b}=r;return(0,t.jsx)("div",{className:e,ref:s,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(x.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:s,className:(0,o.cn)("w-full",e,{"aiui-dark":g==="dark"}),children:[m&&(0,t.jsx)(f.default,{data:{title:m}}),(0,t.jsx)(u.default,{className:"!overflow-visible",id:"Evaluate"+i,data:{list:h,configuration:{...b}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var M=(0,w.withStyles)(A);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Evaluate/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: {\n    url: string\n  }\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: 'light' | 'dark'\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:h-[480px] desktop:h-[384px] h-[360px]'\n      )}\n    >\n      <div className={cn('laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between')}>\n        <div className=\"flex-1\">\n          <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n          <div className=\"mt-1 flex items-center\">\n            {handleRating(data?.rating)?.map?.((_, index) => {\n              return (\n                <div key={index} className=\"mr-1\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path\n                      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n                      fill=\"#F77234\"\n                    />\n                  </svg>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n        <div className=\"desktop:size-12 size-10 overflow-hidden\">\n          <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n            {data?.avatar?.url ? (\n              <>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </>\n            ) : (\n              data?.title\n            )}\n          </Avatar>\n        </div>\n      </div>\n      <p className=\"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold\">\n        {data?.description || ''}\n      </p>\n      <a\n        href={data?.link || ''}\n        onClick={() => {\n          configuration?.event?.primaryButton(data, configuration?.index)\n        }}\n      >\n        <div\n          className={cn(\n            'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n            configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n          )}\n        >\n          <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n            <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n          </div>\n          <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n        </div>\n      </a>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, event }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  return (\n    <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n      {title && <Title data={{ title: title }} />}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'Evaluate' + key}\n        data={{ list: products, configuration: { ...ohter, event: event } }}\n        Slide={EvaluateItem}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 2.3,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3.1,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nexport default withStyles(Evaluate)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0DQ,IAAAI,EAAA,6BAzDRC,EAAkB,oBAClBC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAoD,sCAkCpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,SACE,QAAC,OACC,aAAW,MACT,+HACAF,GAAe,QAAU,QAAU,cAAgB,eACnD,kDACF,EAEA,qBAAC,OAAI,aAAW,MAAG,8DAA8D,EAC/E,qBAAC,OAAI,UAAU,SACb,oBAAC,MAAG,UAAU,mCAAoC,SAAAD,GAAM,MAAM,KAC9D,OAAC,OAAI,UAAU,yBACZ,SAAAE,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,OAEnC,OAAC,OAAgB,UAAU,OACzB,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQA,CAOV,CAEH,EACH,GACF,KACA,OAAC,OAAI,UAAU,0CACb,mBAAC,UAAO,UAAU,YAAY,aAAc,CAACL,GAAM,QAAQ,IACxD,SAAAA,GAAM,QAAQ,OACb,oBACE,oBAAC,eAAY,IAAKA,GAAM,QAAQ,IAAK,KACrC,OAAC,kBAAgB,SAAAA,GAAM,MAAM,GAC/B,EAEAA,GAAM,MAEV,EACF,GACF,KACA,OAAC,KAAE,UAAU,kHACV,SAAAA,GAAM,aAAe,GACxB,KACA,OAAC,KACC,KAAMA,GAAM,MAAQ,GACpB,QAAS,IAAM,CACbC,GAAe,OAAO,cAAcD,EAAMC,GAAe,KAAK,CAChE,EAEA,oBAAC,OACC,aAAW,MACT,0DACAA,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,oBAAC,OAAI,UAAU,gEACb,mBAAC,EAAAK,QAAA,CAAQ,UAAU,sBAAsB,OAAQN,GAAM,KAAK,IAAK,EACnE,KACA,OAAC,KAAE,UAAU,2DAA4D,SAAAA,GAAM,UAAY,GAAG,GAChG,EACF,GACF,CAEJ,EAEMO,EAAW,EAAAC,QAAM,WAA0C,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAT,EAAM,IAAAU,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CAC9G,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAIhB,EAC7C,SACE,QAAC,OAAI,IAAKY,EAAK,aAAW,MAAG,SAAUH,EAAW,CAAE,YAAaM,IAAU,MAAO,CAAC,EAChF,UAAAD,MAAS,OAAC,EAAAG,QAAA,CAAM,KAAM,CAAE,MAAOH,CAAM,EAAG,KACzC,OAAC,EAAAI,QAAA,CACC,UAAU,oBACV,GAAI,WAAaR,EACjB,KAAM,CAAE,KAAMG,EAAU,cAAe,CAAE,GAAGG,EAAO,MAAOL,CAAM,CAAE,EAClE,MAAOZ,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,CAEJ,CAAC,EAED,IAAOV,KAAQ,cAAWkB,CAAQ",
-  "names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "event", "ref", "products", "title", "theme", "ohter", "Title", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme, Shape } from '../../types/props.js'\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: {\n    url: string\n  }\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: Theme\n    containerProps?: ContainerProps\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:h-[480px] desktop:h-[384px] h-[360px]'\n      )}\n    >\n      <div className={cn('laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between')}>\n        <div className=\"flex-1\">\n          <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n          <div className=\"mt-1 flex items-center\">\n            {handleRating(data?.rating)?.map?.((_, index) => {\n              return (\n                <div key={index} className=\"mr-1\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                    <path\n                      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n                      fill=\"#F77234\"\n                    />\n                  </svg>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n        <div className=\"desktop:size-12 size-10 overflow-hidden\">\n          <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n            {data?.avatar?.url ? (\n              <>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </>\n            ) : (\n              data?.title\n            )}\n          </Avatar>\n        </div>\n      </div>\n      <p className=\"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold\">\n        {data?.description || ''}\n      </p>\n      <a\n        href={data?.link || ''}\n        onClick={() => {\n          configuration?.event?.primaryButton(data, configuration?.index)\n        }}\n      >\n        <div\n          className={cn(\n            'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n            configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n          )}\n        >\n          <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n            <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n          </div>\n          <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n        </div>\n      </a>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  return (\n    <div className={className} ref={ref}>\n      <div className=\"evaluate-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n            {title && <Title data={{ title: title }} />}\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'Evaluate' + key}\n              data={{ list: products, configuration: { ...ohter } }}\n              Slide={EvaluateItem}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.1,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          </div>\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nexport default withStyles(Evaluate)\n"],
+  "mappings": "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",
+  "names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/Graphic/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentCommonProps, Img } from '../../types/props.js';
+import type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js';
 type GraphicType = {
     imgUrl: Img;
     title: string;
@@ -13,6 +13,7 @@ export interface GraphicProps extends ComponentCommonProps {
         title?: string;
         items?: GraphicType[];
         itemShape?: 'round' | 'square';
+        containerProps?: ContainerProps;
     };
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {

package/dist/cjs/biz-components/Graphic/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var u=Object.create;var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var s in t)r(e,s,{get:t[s],enumerable:!0})},m=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!k.call(e,o)&&o!==s&&r(e,o,{get:()=>t[o],enumerable:!(p=w(t,o))||p.enumerable});return e};var a=(e,t,s)=>(s=e!=null?u(y(e)):{},m(t||!e||!e.__esModule?r(s,"default",{value:e,enumerable:!0}):s,e)),P=e=>m(r({},"__esModule",{value:!0}),e);var C={};N(C,{default:()=>G});module.exports=P(C);var i=require("react/jsx-runtime"),d=a(require("react")),n=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=a(require("../SwiperBox/index.js")),x=require("../../components/index.js"),l=require("../../components/index.js"),g=a(require("../Title/index.js"));const b=({data:e,configuration:t})=>(0,i.jsx)("div",{className:(0,n.cn)("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,i.jsxs)("a",{href:e?.link,className:"relative cursor-pointer",children:[(0,i.jsx)(l.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,i.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,i.jsx)(l.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,i.jsx)(x.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),c=d.default.forwardRef(({data:e,className:t,...s},p)=>{const o=e?.items?.length>2;return(0,i.jsxs)("div",{children:[e?.title&&(0,i.jsx)(g.default,{data:{title:e?.title}}),(0,i.jsx)(h.default,{className:(0,n.cn)("!overflow-visible",t),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:b,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})});c.displayName="Graphic";var G=(0,f.withStyles)(c);
+"use strict";"use client";var w=Object.create;var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},m=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of P(t))!y.call(e,s)&&s!==o&&l(e,s,{get:()=>t[s],enumerable:!(r=v(t,s))||r.enumerable});return e};var n=(e,t,o)=>(o=e!=null?w(N(e)):{},m(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>m(l({},"__esModule",{value:!0}),e);var S={};C(S,{default:()=>G});module.exports=b(S);var i=require("react/jsx-runtime"),d=n(require("react")),a=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=n(require("../SwiperBox/index.js")),x=require("../../components/index.js"),p=require("../../components/index.js"),g=require("../../components/container.js"),u=n(require("../Title/index.js"));const k=({data:e,configuration:t})=>(0,i.jsx)("div",{className:(0,a.cn)("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,i.jsxs)("a",{href:e?.link,className:"relative cursor-pointer",children:[(0,i.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,i.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,i.jsx)(p.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,i.jsx)(x.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),c=d.default.forwardRef(({data:e,className:t,...o},r)=>{const s=e?.items?.length>2;return(0,i.jsx)("div",{className:t,ref:r,children:(0,i.jsx)("div",{className:"graphic-box",children:(0,i.jsxs)(g.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,i.jsx)(u.default,{data:{title:e?.title}}),(0,i.jsx)(h.default,{className:(0,a.cn)("!overflow-visible"),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:s?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:s?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:s?4:2}}})]})})})});c.displayName="Graphic";var G=(0,f.withStyles)(c);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div\n      className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n        ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n      })}\n    >\n      <a href={data?.link} className=\"relative cursor-pointer\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </a>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <SwiperBox\n        className={cn('!overflow-visible', className)}\n        id={'Graphic'}\n        data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n        Slide={Item}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 2.3 : 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 3.1 : 2,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: isShow ? 4 : 2,\n          },\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkCQ,IAAAI,EAAA,6BAjCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAAkB,gCAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MAAG,oFAAqF,CAChG,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,KAAMD,GAAM,KAAM,UAAU,0BAC7B,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQA,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,SACE,QAAC,OACE,UAAAA,GAAM,UAAS,OAAC,EAAAQ,QAAA,CAAM,KAAM,CAAE,MAAOR,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAS,QAAA,CACC,aAAW,MAAG,oBAAqBL,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMJ,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOZ,KAAQ,cAAWY,CAAO",
-  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "props", "ref", "isShow", "Title", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    containerProps?: ContainerProps\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  return (\n    <div\n      className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n        ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n      })}\n    >\n      <a href={data?.link} className=\"relative cursor-pointer\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n          source={data?.imgUrl?.url}\n        />\n        <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n          <Text\n            style={{\n              color: data?.textColor,\n            }}\n            html={data?.title}\n            // eslint-disable-next-line tailwindcss/classnames-order\n            className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n          />\n          {data?.description && (\n            <Heading\n              html={data?.description}\n              style={{\n                color: data?.textColor,\n              }}\n              as=\"h3\"\n              className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </a>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const isShow = (data?.items as GraphicType[])?.length > 2\n  return (\n    <div className={className} ref={ref}>\n      <div className=\"graphic-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          {data?.title && <Title data={{ title: data?.title }} />}\n          <SwiperBox\n            className={cn('!overflow-visible')}\n            id={'Graphic'}\n            data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n            Slide={Item}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 2.3 : 2,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 3.1 : 2,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: isShow ? 4 : 2,\n              },\n            }}\n          />\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCQ,IAAAI,EAAA,6BAnCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAoBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MAAG,oFAAqF,CAChG,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,KAAMD,GAAM,KAAM,UAAU,0BAC7B,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQA,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,SACE,OAAC,OAAI,UAAWI,EAAW,IAAKE,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIN,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAQ,QAAA,CAAM,KAAM,CAAE,MAAOR,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAS,QAAA,CACC,aAAW,MAAG,mBAAmB,EACjC,GAAI,UACJ,KAAM,CAAE,KAAMT,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOb,KAAQ,cAAWa,CAAO",
+  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_container", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "props", "ref", "isShow", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/MediaPlayerBase/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var C=Object.create;var d=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var O=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!G.call(e,s)&&s!==a&&d(e,s,{get:()=>t[s],enumerable:!(n=Y(t,s))||n.enumerable});return e};var k=(e,t,a)=>(a=e!=null?C(A(e)):{},y(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),$=e=>y(d({},"__esModule",{value:!0}),e);var K={};O(K,{default:()=>J});module.exports=$(K);var r=require("react/jsx-runtime"),o=require("react"),X=require("@gsap/react"),ee=require("gsap"),re=require("gsap/dist/ScrollTrigger"),m=require("../../helpers/utils.js"),H=require("../../shared/Styles.js"),N=k(require("../../components/picture.js")),M=k(require("../../components/button.js")),u=require("@payloadcms/richtext-lexical/html"),P=require("react-intersection-observer");const F=(0,o.forwardRef)(({className:e="",data:{title:t,videoTitle:a,btnText:n,img:s,video:T,theme:L,shape:B,onBtnClick:g,...R}},E)=>{const{sticky:c}=R,[i,p]=(0,o.useState)(!1),[z,I]=(0,o.useState)(0),l=(0,o.useRef)(null),f=(0,o.useRef)(null),S=(0,o.useRef)(null),{ref:_,inView:v}=(0,P.useInView)();(0,o.useImperativeHandle)(E,()=>f.current);const b=typeof t=="string"?t:t&&(0,u.convertLexicalToHTML)({data:t}),h=typeof a=="string"?a:a&&(0,u.convertLexicalToHTML)({data:a});return(0,o.useEffect)(()=>{v&&!n?(l.current?.play(),p(!0)):(l.current?.pause(),p(!1))},[v]),(0,o.useEffect)(()=>{if(f.current&&c){const V=f.current.getBoundingClientRect(),w=window.innerHeight,j=window.scrollY||window.pageYOffset,D=V.bottom+j,x=document.documentElement.scrollHeight-D;I(x>w?w:x)}},[]),(0,r.jsx)("div",{ref:f,style:c?{marginBottom:`-${z}px`}:{},className:(0,m.cn)("relative",c&&"mt-[-100vh]",c&&'after:content-[" "] after:relative after:box-content after:block after:h-screen',c&&"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:(0,r.jsx)("div",{className:"sticky top-0 ",children:(0,r.jsxs)("div",{className:(0,m.cn)("relative  overflow-hidden",c?"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]",e,{"aiui-dark":L==="dark","rounded-box":B==="rounded"}),children:[(0,r.jsx)("div",{children:(0,r.jsxs)("div",{ref:_,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:[b&&!i&&(0,r.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),h&&i&&(0,r.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:h}}),!i&&n&&(0,r.jsx)(M.default,{variant:"link",className:(0,m.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{i?(l.current&&l.current.pause(),p(!1)):(l.current&&l.current.play(),p(!0)),g&&g?.()},children:n})]})}),(0,r.jsx)("div",{children:(0,r.jsxs)("div",{ref:S,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,r.jsx)("video",{ref:l,className:"size-full object-cover",src:T?.url,muted:!0,loop:!0}),!i&&s?.url&&(0,r.jsx)(N.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:s?.url,alt:s?.alt,imgClassName:"w-full h-full object-cover"}),(0,r.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})})})});var J=(0,H.withStyles)(F);
+"use strict";"use client";var D=Object.create;var u=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var A=(t,o)=>{for(var e in o)u(t,e,{get:o[e],enumerable:!0})},k=(t,o,e,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of Y(o))!O.call(t,a)&&a!==e&&u(t,a,{get:()=>o[a],enumerable:!(l=F(o,a))||l.enumerable});return t};var H=(t,o,e)=>(e=t!=null?D(q(t)):{},k(o||!t||!t.__esModule?u(e,"default",{value:t,enumerable:!0}):e,t)),G=t=>k(u({},"__esModule",{value:!0}),t);var Q={};A(Q,{default:()=>K});module.exports=G(Q);var s=require("react/jsx-runtime"),r=require("react"),p=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),L=H(require("../../components/picture.js")),T=H(require("../../components/button.js")),v=require("@payloadcms/richtext-lexical/html"),P=require("react-intersection-observer");const M=({defaultConverters:t})=>({...t,text:o=>{const{node:e}=o;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),J=(0,r.forwardRef)(({className:t="",onBtnClick:o,data:{title:e,videoTitle:l,btnText:a,img:f,video:B,theme:R,shape:E,...$}},z)=>{const{sticky:n}=$,[i,d]=(0,r.useState)(!1),[g,I]=(0,r.useState)(0),c=(0,r.useRef)(null),m=(0,r.useRef)(null),_=(0,r.useRef)(null),{ref:C,inView:x}=(0,P.useInView)();(0,r.useImperativeHandle)(z,()=>m.current);const h=typeof e=="string"?e:e&&(0,v.convertLexicalToHTML)({data:e,converters:M}),y=typeof l=="string"?l:l&&(0,v.convertLexicalToHTML)({data:l,converters:M});return(0,r.useEffect)(()=>{x&&!a?(c.current?.play(),d(!0)):(c.current?.pause(),d(!1))},[x]),(0,r.useEffect)(()=>{if(m.current&&n){const S=m.current.getBoundingClientRect(),b=window.innerHeight,V=window.scrollY||window.pageYOffset,j=S.bottom+V,w=document.documentElement.scrollHeight-j;I(w>b?b:w)}},[]),(0,s.jsxs)("div",{ref:m,style:n?{marginBottom:`-${g}px`}:{},className:(0,p.cn)("relative",n&&"mt-[-100vh]"),children:[(0,s.jsx)("div",{className:"sticky top-0 ",children:(0,s.jsxs)("div",{className:(0,p.cn)("relative overflow-hidden",n?"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]",t,{"aiui-dark":R==="dark","rounded-box":E==="rounded"}),children:[(0,s.jsx)("div",{children:(0,s.jsxs)("div",{ref:C,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:[h&&!i&&(0,s.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:h}}),y&&i&&(0,s.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:y}}),!i&&a&&(0,s.jsx)(T.default,{variant:"link",className:(0,p.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{i?(c.current&&c.current.pause(),d(!1)):(c.current&&c.current.play(),d(!0)),o&&o?.()},children:a})]})}),(0,s.jsx)("div",{children:(0,s.jsxs)("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,s.jsx)("video",{ref:c,className:"size-full object-cover",src:B?.url,muted:!0,loop:!0}),!i&&f?.url&&(0,s.jsx)(L.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:f?.url,alt:f?.alt,imgClassName:"w-full h-full object-cover"}),(0,s.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})}),(0,s.jsx)("div",{className:(0,p.cn)(n&&"relative box-content block",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]"),style:n?{height:`${g}px`}:{}})]})});var K=(0,N.withStyles)(J);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaPlayerBase/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "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": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "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", "Button", "Picture"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport 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'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...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 =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\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('relative', sticky && 'mt-[-100vh]')}\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          className={cn(\n            sticky && 'relative box-content block',\n            sticky &&\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          )}\n          style={sticky ? { height: `${btb}px` } : {}}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "videoRef", "boxRef", "bgRef", "inViewRef", "inView", "title_html", "videoTitle_html", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "Button", "Picture"]
 }

package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts

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

package/dist/cjs/biz-components/MediaPlayerBase/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n  data: {\n    sticky?: boolean\n    shape?: Shape\n    theme?: Theme\n    title?: string\n    videoTitle?: string\n    btnText?: string\n    img?: Img\n    video?: Video\n    onBtnClick?: () => void\n  }\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n  data: {\n    sticky?: boolean\n    shape?: Shape\n    theme?: Theme\n    title?: string\n    videoTitle?: string\n    btnText?: string\n    img?: Img\n    video?: Video\n  }\n  onBtnClick?: () => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/MediaPlayerMulti/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var y=Object.create;var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var M=(e,l)=>{for(var o in l)s(e,o,{get:l[o],enumerable:!0})},p=(e,l,o,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of b(l))!k.call(e,i)&&i!==o&&s(e,i,{get:()=>l[i],enumerable:!(a=w(l,i))||a.enumerable});return e};var n=(e,l,o)=>(o=e!=null?y(P(e)):{},p(l||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>p(s({},"__esModule",{value:!0}),e);var j={};M(j,{default:()=>T});module.exports=N(j);var t=require("react/jsx-runtime"),r=require("react"),m=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../components/index.js"),c=n(require("../Title/index.js")),u=n(require("../SwiperBox/index.js")),x=require("@payloadcms/richtext-lexical/html");const L=({data:e,configuration:l})=>{const[o,a]=(0,r.useState)(!1),i=(0,r.useRef)(null);return(0,t.jsxs)("div",{className:(0,m.cn)("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",l.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[o?(0,t.jsx)("video",{ref:i,className:"size-full object-cover",src:e?.video?.url,muted:!0,loop:!0}):(0,t.jsx)(f.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),(0,t.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e.video&&(0,t.jsx)("button",{onClick:()=>{o?(i.current&&i.current.pause(),a(!1)):(i.current&&i.current.play(),a(!0)),l?.onVideoPlayBtnClick&&l?.onVideoPlayBtnClick?.(l?.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:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,t.jsxs)("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:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,t.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,t.jsx)("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:e.description})]})]})},S=(0,r.forwardRef)(({data:{items:e=[],shape:l="square",title:o},className:a="",key:i,onVideoPlayBtnClick:h},v)=>{const g=typeof o=="string"?o:o&&(0,x.convertLexicalToHTML)({data:o});return(0,t.jsxs)("div",{className:a,ref:v,children:[o&&(0,t.jsx)(c.default,{data:{title:g||""}}),(0,t.jsx)(u.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+i,data:{list:e,configuration:{shape:l,onVideoPlayBtnClick:h}},Slide:L})]})});var T=(0,d.withStyles)(S);
+"use strict";"use client";var b=Object.create;var s=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!M.call(e,i)&&i!==o&&s(e,i,{get:()=>t[i],enumerable:!(a=N(t,i))||a.enumerable});return e};var n=(e,t,o)=>(o=e!=null?b(k(e)):{},p(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),C=e=>p(s({},"__esModule",{value:!0}),e);var z={};L(z,{default:()=>j});module.exports=C(z);var l=require("react/jsx-runtime"),r=require("react"),d=require("../../helpers/utils.js"),m=require("../../shared/Styles.js"),f=require("../../components/index.js"),c=n(require("../Title/index.js")),u=n(require("../SwiperBox/index.js")),x=require("../../components/container.js"),v=require("@payloadcms/richtext-lexical/html");const S=({data:e,configuration:t})=>{const[o,a]=(0,r.useState)(!1),i=(0,r.useRef)(null);return(0,l.jsxs)("div",{className:(0,d.cn)("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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[o?(0,l.jsx)("video",{ref:i,className:"size-full object-cover",src:e?.video?.url,muted:!0,loop:!0}):(0,l.jsx)(f.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover hover:scale-110 transition-all duration-300"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e.video&&(0,l.jsx)("button",{onClick:()=>{o?(i.current&&i.current.pause(),a(!1)):(i.current&&i.current.play(),a(!0)),t?.onVideoPlayBtnClick&&t?.onVideoPlayBtnClick?.(t?.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:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("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:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,l.jsx)("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:e.description})]})]})},T=(0,r.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:h,onVideoPlayBtnClick:g},y)=>{const w=typeof o=="string"?o:o&&(0,v.convertLexicalToHTML)({data:o});return(0,l.jsx)("div",{className:i,children:(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(x.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:y,children:[o&&(0,l.jsx)(c.default,{data:{title:w||""}}),(0,l.jsx)(u.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+h,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:g}},Slide:S})]})})})})});var j=(0,m.withStyles)(T);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAoD,iBACpDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,+DACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,KAE3F,OAAC,WACC,OAAQA,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,KAEF,OAAC,OAAI,UAAU,2DACZ,SAAAA,EAAK,UACJ,OAAC,UACC,QAAS,IAAM,CACTE,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,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,KAEA,QAAC,OAAI,UAAU,oJACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,MAAG,UAAU,4FACX,SAAAD,EAAK,MACR,EACCA,EAAK,UACJ,OAAC,KAAE,UAAU,uFACV,SAAAA,EAAK,MACR,GAEJ,KAEA,OAAC,KAAE,UAAU,0JACV,SAAAA,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,KAAmB,cACvB,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,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,QAAC,OAAI,UAAWC,EAAW,IAAKG,EAC7B,UAAAJ,MAAS,OAAC,EAAAM,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BL,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAI,CAAoB,CAAE,EAC1E,MAAOZ,EACT,GACF,CAEJ,CACF,EAEA,IAAOV,KAAQ,cAAWgB,CAAgB",
-  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "Title", "SwiperBox"]
+  "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 { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const [isPlaying, setIsPlaying] = useState<boolean>(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full 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  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    return (\n      <div className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick } }}\n                Slide={MediaPlayerItem}\n              />\n            </div>\n          </Container>\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBM,IAAAI,EAAA,6BAtBNC,EAAoD,iBACpDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA0B,yCAC1BC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,+DACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,KAE3F,OAAC,WACC,OAAQA,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,KAEF,OAAC,OAAI,UAAU,2DACZ,SAAAA,EAAK,UACJ,OAAC,UACC,QAAS,IAAM,CACTE,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,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,KAEA,QAAC,OAAI,UAAU,oJACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,MAAG,UAAU,4FACX,SAAAD,EAAK,MACR,EACCA,EAAK,UACJ,OAAC,KAAE,UAAU,uFACV,SAAAA,EAAK,MACR,GAEJ,KAEA,OAAC,KAAE,UAAU,0JACV,SAAAA,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,KAAmB,cACvB,CACE,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,MAAMC,EAAa,OAAON,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,OAAC,OAAI,UAAWE,EACd,mBAAC,OAAI,UAAU,uBACb,mBAAC,aAAW,GAAID,GAAkB,CAAC,EAAI,UAAU,kBAC/C,oBAAC,OAAI,UAAWC,EAAW,IAAKG,EAC7B,UAAAL,MAAS,OAAC,EAAAO,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BL,EAC/B,KAAM,CAAE,KAAML,EAAO,cAAe,CAAE,MAAOC,EAAO,oBAAAK,CAAoB,CAAE,EAC1E,MAAOb,EACT,GACF,EACF,EACF,EACF,CAEJ,CACF,EAEA,IAAOX,KAAQ,cAAWiB,CAAgB",
+  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_container", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "title_html", "Title", "SwiperBox"]
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps, Img, Video } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n  title: string\n  name: string\n  description: string\n  img: Img\n  video?: Video\n  quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n  data: {\n    title?: string\n    shape?: 'round' | 'square'\n    items: MediaPlayerItemProps[]\n  }\n  onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n  title: string\n  name: string\n  description: string\n  img: Img\n  video?: Video\n  quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n  data: {\n    title?: string\n    shape?: 'round' | 'square'\n    items: MediaPlayerItemProps[]\n    containerProps?: ContainerProps\n  }\n  onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, 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": "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",
-  "names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "id", "components", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "ref", "videoRef", "title_html", "Slogan", "Picture"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\n// import ScrollTrigger from 'gsap/ScrollTrigger'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport Picture from '../../components/picture.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({ children, spaceY }: { children: React.ReactNode; spaceY?: string }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst StickyBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n    brandEquityRef: HTMLDivElement\n    memberEquityRef: HTMLDivElement\n  },\n  {\n    children: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n  const brandEquityRef = useRef<HTMLDivElement>(null)\n  const memberEquityRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => {\n    return {\n      mediaPlayerStickyRef: mediaPlayerStickyRef.current as HTMLDivElement,\n      brandEquityRef: brandEquityRef.current as HTMLDivElement,\n      memberEquityRef: memberEquityRef.current as HTMLDivElement,\n    }\n  }, [])\n\n  useEffect(() => {\n    const height = window.screen.height\n\n    gsap\n      .timeline({\n        scrollTrigger: {\n          trigger: `#${id}`,\n          start: 'top top',\n          end: `top+=${height * 1.8}px bottom`,\n          scrub: 0,\n        },\n      })\n      .to(`#${id} .sticky-cover`, {\n        opacity: 1,\n        duration: 0.3,\n      })\n      .to(\n        `#${id} .media-content`,\n        {\n          top: '100%',\n          transform: 'translate(-50%, -100%)',\n          duration: 1,\n        },\n        '<'\n      )\n  }, [])\n  return (\n    <div id={id} ref={mediaPlayerStickyRef} className=\"relative z-10 pb-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity ref={brandEquityRef} data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity\n                      ref={memberEquityRef}\n                      data={componentData}\n                      className=\"w-full\"\n                      style={componentData?.style}\n                    />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n    brandEquityRef: HTMLDivElement\n    memberEquityRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(({ className = '', id, data: { title, videoTitle, btnText, img, video, theme, shape, components } }, ref) => {\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const title_html =\n    typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n  typeof videoTitle === 'string'\n    ? videoTitle\n    : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n  return (\n    <StickyBox ref={ref} id={id} components={components}>\n      <div\n        className={cn('sticky-box absolute left-0 top-0 h-screen w-full', className, {\n          'aiui-dark': theme === 'dark',\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2\">\n          <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n            <Slogan className=\"sticky-title\" data={{ title: title_html || '', theme }} />\n          </SubContainer>\n        </div>\n      </div>\n      <div className=\"sticky left-0 top-0 w-full\">\n        <div\n          className={cn(\n            'media-cover',\n            'relative h-screen w-full',\n            'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n          )}\n        >\n          {video?.url && (\n            <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} autoPlay muted loop playsInline />\n          )}\n          {img?.url && (\n            <Picture\n              className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n              source={img?.url}\n              alt={img?.alt}\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          )}\n          <div\n            className=\"sticky-cover absolute left-0 top-0 z-10 size-full opacity-0\"\n            style={{\n              background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n            }}\n          />\n        </div>\n      </div>\n    </StickyBox>\n  )\n})\n\nexport default withStyles(MediaPlayerSticky)\n"],
+  "mappings": "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",
+  "names": ["MediaPlayerSticky_exports", "__export", "MediaPlayerSticky_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_Slogan", "import_gird", "import_container", "import_BrandEquity", "import_MemberEquity", "import_Spacer", "import_gsap", "import_html", "import_react_responsive", "import_picture", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "isMobile", "StickyBox", "React", "id", "components", "ref", "mediaPlayerStickyRef", "brandEquityRef", "memberEquityRef", "height", "gsap", "componentData", "BrandEquity", "MemberEquity", "Spacer", "MediaPlayerSticky", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "videoRef", "title_html", "Slogan", "Picture"]
 }

package/dist/cjs/components/container.d.ts

@@ -1,17 +1,22 @@
 import React from 'react';
+import type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js';
 type ContainerProps = {
     asChild?: boolean;
     children?: React.ReactNode;
     className?: string;
-    overflow?: 'hidden';
-    spaceY?: string;
+    spaceY?: SpaceY;
+    spaceTop?: SpaceTop;
+    spaceBottom?: SpaceBottom;
+    mode?: Mode;
 } & React.ComponentPropsWithoutRef<'div'>;
 declare const Container: React.ForwardRefExoticComponent<{
     asChild?: boolean;
     children?: React.ReactNode;
     className?: string;
-    overflow?: "hidden";
-    spaceY?: string;
+    spaceY?: SpaceY;
+    spaceTop?: SpaceTop;
+    spaceBottom?: SpaceBottom;
+    mode?: Mode;
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Container };
 export type { ContainerProps };

package/dist/cjs/components/container.js

@@ -1,2 +1,2 @@
-"use strict";var C=Object.create;var s=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var u=(p,e)=>{for(var o in e)s(p,o,{get:e[o],enumerable:!0})},i=(p,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of w(e))!h.call(p,t)&&t!==o&&s(p,t,{get:()=>e[t],enumerable:!(a=k(e,t))||a.enumerable});return p};var v=(p,e,o)=>(o=p!=null?C(g(p)):{},i(e||!p||!p.__esModule?s(o,"default",{value:p,enumerable:!0}):o,p)),b=p=>i(s({},"__esModule",{value:!0}),p);var N={};u(N,{Container:()=>r});module.exports=b(N);var n=require("react/jsx-runtime"),c=v(require("react")),m=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const r=c.default.forwardRef(({...p},e)=>{const{asChild:o,children:a,className:t,overflow:y,spaceY:l,...x}=p,d=o?f.Slot:"div";return y==="hidden"?(0,n.jsx)("div",{className:(0,m.cn)("overflow-hidden",l||"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",t),children:(0,n.jsx)(d,{className:(0,m.cn)("desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto box-border w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4"),...x,ref:e,children:a})}):(0,n.jsx)(d,{...x,ref:e,className:(0,m.cn)("desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",l||"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",t),children:a})});r.displayName="Container";
+"use strict";var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of S(t))!P.call(e,p)&&p!==o&&c(e,p,{get:()=>t[p],enumerable:!(n=g(t,p))||n.enumerable});return e};var T=(e,t,o)=>(o=e!=null?u(h(e)):{},i(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),w=e=>i(c({},"__esModule",{value:!0}),e);var Y={};N(Y,{Container:()=>m});module.exports=w(Y);var a=require("react/jsx-runtime"),r=T(require("react")),x=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const B=({children:e})=>(0,a.jsx)(a.Fragment,{children:e}),M=r.default.forwardRef(({...e},t)=>{const{asChild:o,children:n,className:p,spaceY:s="default",spaceTop:l="none",spaceBottom:d="none",...C}=e,y=o?f.Slot:"div",R={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},b={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},k={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,a.jsx)(y,{...C,ref:t,className:(0,x.cn)("desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",R?.[s]||s,b?.[l]||l,k?.[d]||d,p),children:n})}),m=r.default.forwardRef(({...e},t)=>{const{children:o,mode:n="section"}=e,s={section:M,fragment:B}[n];return(0,a.jsx)(s,{...e,ref:t,children:o})});m.displayName="Container";
 //# sourceMappingURL=container.js.map