@anker-in/headless-ui 1.0.10-temp-1 → 1.0.10-temp-dialogs

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

@@ -5,11 +5,11 @@ export type CreativeModuleDataType = {
     title: string;
     description: string;
     theme: 'light' | 'dark';
+    shape: 'rounded' | 'square';
     span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 };
 type CreativeModuleType = {
     data: {
-        shape?: 'rounded' | 'square';
         products: CreativeModuleDataType[];
     };
     className?: string;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var g=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,l)=>{for(var o in l)p(e,o,{get:l[o],enumerable:!0})},n=(e,l,o,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of v(l))!b.call(e,s)&&s!==o&&p(e,s,{get:()=>l[s],enumerable:!(r=x(l,s))||r.enumerable});return e};var N=(e,l,o)=>(o=e!=null?g(h(e)):{},n(l||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),k=e=>n(p({},"__esModule",{value:!0}),e);var I={};w(I,{default:()=>C});module.exports=k(I);var t=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),c=N(require("../SwiperBox/index.js")),u=require("../../shared/Styles.js"),m=require("../../components/gird.js"),a=require("../../components/index.js");const y=({data:e,configuration:l})=>(0,t.jsx)("div",{className:(0,d.cn)("text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]",l?.shape==="rounded"?"rounded-2xl":"rounded-none",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.mobileImg?.url||e?.img?.url,alt:e?.mobileImg?.alt||e?.img?.alt||""}),(0,t.jsxs)("div",{className:"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col",children:[(0,t.jsx)(a.Text,{html:e?.title,className:"graphic-title truncate text-xl font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(a.Text,{html:e?.description,className:"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]"})]})]})}),M=e=>{const{data:l,className:o}=e,{products:r,shape:s}=l;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"laptop:block box-border hidden w-full overflow-hidden",children:(0,t.jsx)(m.Grid,{className:(0,d.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",o),children:r?.map((i,f)=>(0,t.jsxs)(m.GridItem,{span:i.span,className:(0,d.cn)("text-info-primary relative w-full overflow-hidden",s==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]",{"aiui-dark":i.theme==="dark"}),children:[(0,t.jsx)(a.Picture,{source:i.img.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,t.jsxs)("div",{className:"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4",children:[i.title&&(0,t.jsx)(a.Text,{html:i.title,as:"p",className:"desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),i.description&&(0,t.jsx)(a.Text,{html:i.description,className:"desktop:text-lg text-sm font-bold"})]})]},f))})}),(0,t.jsx)("div",{className:"laptop:hidden block w-full",children:(0,t.jsx)(c.default,{id:"CreativeModule",className:(0,d.cn)("!overflow-visible",o),data:{list:r||[],configuration:{shape:s}},Slide:y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3}}})})]})};var C=(0,u.withLayout)(M);
+"use strict";"use client";var f=Object.create;var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(e,o)=>{for(var s in o)d(e,s,{get:o[s],enumerable:!0})},m=(e,o,s,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of g(o))!x.call(e,l)&&l!==s&&d(e,l,{get:()=>o[l],enumerable:!(i=v(o,l))||i.enumerable});return e};var w=(e,o,s)=>(s=e!=null?f(h(e)):{},m(o||!e||!e.__esModule?d(s,"default",{value:e,enumerable:!0}):s,e)),N=e=>m(d({},"__esModule",{value:!0}),e);var C={};b(C,{default:()=>M});module.exports=N(C);var t=require("react/jsx-runtime"),r=require("../../helpers/utils.js"),n=w(require("../SwiperBox/index.js")),c=require("../../shared/Styles.js"),p=require("../../components/gird.js"),a=require("../../components/index.js");const k=({data:e})=>(0,t.jsx)("div",{className:(0,r.cn)("text-info-primary aspect-h-[360] aspect-w-[296] relative shrink-0 overflow-hidden md:basis-[296px]",e.shape==="rounded"?"rounded-2xl":"rounded-none",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.mobileImg?.url||e?.img?.url,alt:e?.mobileImg?.alt||e?.img?.alt||""}),(0,t.jsxs)("div",{className:"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col",children:[(0,t.jsx)(a.Text,{html:e?.title,className:"graphic-title truncate font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(a.Text,{html:e?.description,className:"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]"})]})]})}),y=e=>{const{data:o,className:s}=e,{products:i}=o;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"laptop:block box-border hidden w-full overflow-hidden",children:(0,t.jsx)(p.Grid,{className:(0,r.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",s),children:i?.map((l,u)=>(0,t.jsxs)(p.GridItem,{span:l.span,className:(0,r.cn)("text-info-primary relative w-full overflow-hidden",l.shape==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]",{"aiui-dark":l.theme==="dark"}),children:[(0,t.jsx)(a.Picture,{source:l.img.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,t.jsxs)("div",{className:"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4",children:[l.title&&(0,t.jsx)(a.Text,{html:l.title,as:"p",className:"desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),l.description&&(0,t.jsx)(a.Text,{html:l.description,className:"desktop:text-lg text-sm font-bold"})]})]},u))})}),(0,t.jsx)("div",{className:"laptop:hidden block w-full overflow-hidden",children:(0,t.jsx)(n.default,{id:"CreativeModule",className:(0,r.cn)("!overflow-visible",s),data:{list:i||[]},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3}}})})]})};var M=(0,c.withLayout)(y);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/CreativeModule/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype CreativeModuleType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    products: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data, configuration }: { data: CreativeModuleDataType; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]',\n        configuration?.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.mobileImg?.url || data?.img?.url}\n          alt={data?.mobileImg?.alt || data?.img?.alt || ''}\n        />\n        <div className=\"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col\">\n          <Text html={data?.title} className=\"graphic-title truncate text-xl font-bold leading-[1.2]\" />\n          {data?.description && (\n            <Text html={data?.description} className=\"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { products, shape } = data\n\n  return (\n    <>\n      <div className=\"laptop:block box-border hidden w-full overflow-hidden\">\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {products?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4\">\n                  {item.title && (\n                    <Text html={item.title} as=\"p\" className=\"desktop:text-[32px] laptop:text-2xl text-xl font-bold\" />\n                  )}\n                  {item.description && <Text html={item.description} className=\"desktop:text-lg text-sm font-bold\" />}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: products || [],\n            configuration: {\n              shape,\n            },\n          }}\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.2,\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,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MACT,4GACAA,GAAe,QAAU,UAAY,cAAgB,eACrD,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,+DACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEE,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAH,EAAM,UAAAI,CAAU,EAAID,EACtB,CAAE,SAAAE,EAAU,MAAAC,CAAM,EAAIN,EAE5B,SACE,oBACE,oBAAC,OAAI,UAAU,wDACb,mBAAC,QAAK,aAAW,MAAG,wCAAyCI,CAAS,EACnE,SAAAC,GAAU,IAAI,CAACE,EAAMC,OAElB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,sEACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,KACxF,QAAC,OAAI,UAAU,iGACZ,UAAAA,EAAK,UACJ,OAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,gBAAe,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,oCAAoC,GACnG,IAjBKC,CAkBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6BACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBL,CAAS,EAC5C,KAAM,CACJ,KAAMC,GAAY,CAAC,EACnB,cAAe,CACb,MAAAC,CACF,CACF,EACA,MAAOP,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,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWW,CAAc",
-  "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "Item", "data", "configuration", "CreativeModule", "props", "className", "products", "shape", "item", "index", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  shape: 'rounded' | 'square'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype CreativeModuleType = {\n  data: {\n    products: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data }: { data: CreativeModuleDataType }) => {\n  return (\n    <div\n      className={cn(\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative shrink-0 overflow-hidden md:basis-[296px]',\n        data.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.mobileImg?.url || data?.img?.url}\n          alt={data?.mobileImg?.alt || data?.img?.alt || ''}\n        />\n        <div className=\"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col\">\n          <Text html={data?.title} className=\"graphic-title truncate font-bold leading-[1.2]\" />\n          {data?.description && (\n            <Text html={data?.description} className=\"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { products } = data\n\n  return (\n    <>\n      <div className=\"laptop:block box-border hidden w-full overflow-hidden\">\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {products?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  item.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4\">\n                  {item.title && (\n                    <Text html={item.title} as=\"p\" className=\"desktop:text-[32px] laptop:text-2xl text-xl font-bold\" />\n                  )}\n                  {item.description && <Text html={item.description} className=\"desktop:text-lg text-sm font-bold\" />}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full overflow-hidden\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: products || [],\n          }}\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.2,\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,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,OAAC,OACC,aAAW,MACT,qGACAA,EAAK,QAAU,UAAY,cAAgB,eAC3C,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,+DACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,iDAAiD,EACnFA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEC,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAF,EAAM,UAAAG,CAAU,EAAID,EACtB,CAAE,SAAAE,CAAS,EAAIJ,EAErB,SACE,oBACE,oBAAC,OAAI,UAAU,wDACb,mBAAC,QAAK,aAAW,MAAG,wCAAyCG,CAAS,EACnE,SAAAC,GAAU,IAAI,CAACC,EAAMC,OAElB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAA,EAAK,QAAU,UAAY,cAAgB,eAC3C,sEACA,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,KACxF,QAAC,OAAI,UAAU,iGACZ,UAAAA,EAAK,UACJ,OAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,gBAAe,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,oCAAoC,GACnG,IAjBKC,CAkBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6CACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBJ,CAAS,EAC5C,KAAM,CACJ,KAAMC,GAAY,CAAC,CACrB,EACA,MAAOL,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,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWU,CAAc",
+  "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "Item", "data", "CreativeModule", "props", "className", "products", "item", "index", "SwiperBox"]
 }

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

@@ -14,6 +14,13 @@ type GraphicType = {
     buttonText?: string;
     icon?: Img;
     theme?: Theme;
+    extension?: {
+        text: string;
+        textDesc: string;
+        textTitle: string;
+        textPcImg: Img;
+        textMobileImg: Img;
+    };
 };
 export interface GraphicProps extends ComponentCommonProps {
     className?: string;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var h=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var $=(e,s)=>{for(var l in s)h(e,l,{get:s[l],enumerable:!0})},k=(e,s,l,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of D(s))!R.call(e,p)&&p!==l&&h(e,p,{get:()=>s[p],enumerable:!(r=U(s,p))||r.enumerable});return e};var f=(e,s,l)=>(l=e!=null?L(z(e)):{},k(s||!e||!e.__esModule?h(l,"default",{value:e,enumerable:!0}):l,e)),j=e=>k(h({},"__esModule",{value:!0}),e);var Y={};$(Y,{default:()=>A});module.exports=j(Y);var t=require("react/jsx-runtime"),T=require("react-responsive"),o=f(require("react")),c=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),M=f(require("../SwiperBox/index.js")),u=require("../../components/index.js"),m=require("../../components/index.js"),V=f(require("../Title/index.js")),C=require("../VideoModal/index.js"),I=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js");const b="image",g="graphic",q=({data:e,configuration:s})=>(0,t.jsx)("div",{className:(0,c.cn)((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),"laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,c.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("a",{"aria-label":e?.title??e?.description,href:(0,w.trackUrlRef)(e?.href,`${b}_${g}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,t.jsx)(m.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(m.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(u.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop: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"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:r=>{r.preventDefault(),r.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)(m.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(u.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"desktop:mt-[24px] mt-[12px] self-start",href:(0,w.trackUrlRef)(e?.href,`${b}_${g}`),children:e.buttonText})]})]})})}),y=o.default.forwardRef(({data:e,className:s},l)=>{const r=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),p=(0,o.useRef)(null),[P,v]=(0,o.useState)(!1),[x,S]=(0,o.useState)(""),[G,B]=(0,o.useState)(""),[E,H]=(0,o.useState)(""),d=a=>{const i=e?.items?.length>3,n=e?.items?.length>2;switch(a){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return i||n?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(l,()=>p.current),(0,I.useExposure)(p,{componentType:b,componentName:g,componentTitle:e?.title}),(0,o.useEffect)(()=>{const a=p.current?.querySelectorAll(".graphic-description");if(a&&a.length>0){let i=0;a.forEach(n=>{i=Math.max(i,n.offsetHeight)}),a.forEach(n=>{n.style.height=`${i}px`})}},[]),(0,t.jsxs)("div",{className:s,ref:p,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(V.default,{data:{title:e?.title}}),(0,t.jsx)(M.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(a,i)=>{v(!0),i?.isYouTube?B?.(i?.youtubeId||""):(S?.(i?.video?.url||""),H?.(i?.mobileVideo?.url||""))},onIconClick:a=>{}}},Slide:q,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:d()},768:{spaceBetween:16,freeMode:!1,slidesPerView:d(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:d(1440)}}})]}),(0,t.jsx)(C.VideoModal,{visible:P,youTubeId:G,onCloseModal:()=>v(!1),videoUrl:r&&E||x})]})});y.displayName="Graphic";var A=(0,N.withLayout)(y);
+"use strict";"use client";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var Y=(e,o)=>{for(var i in o)b(e,i,{get:o[i],enumerable:!0})},I=(e,o,i,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of R(o))!q.call(e,r)&&r!==i&&b(e,r,{get:()=>o[r],enumerable:!(a=j(o,r))||a.enumerable});return e};var x=(e,o,i)=>(i=e!=null?z($(e)):{},I(o||!e||!e.__esModule?b(i,"default",{value:e,enumerable:!0}):i,e)),_=e=>I(b({},"__esModule",{value:!0}),e);var Q={};Y(Q,{default:()=>F});module.exports=_(Q);var t=require("react/jsx-runtime"),N=require("react-responsive"),s=x(require("react")),d=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),V=x(require("../SwiperBox/index.js")),g=require("../../components/index.js"),h=require("../../components/index.js"),P=x(require("../Title/index.js")),G=require("../VideoModal/index.js"),S=require("../TextModal/index.js"),E=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const w="image",v="graphic",A=({data:e,configuration:o})=>{const i=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function a(n){throw new Error("Function not implemented.")}function r(n){throw new Error("Function not implemented.")}return(0,t.jsx)("div",{className:(0,d.cn)(i(),"laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,d.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:(0,t.jsxs)("a",{"aria-label":e?.title??e?.description,href:(0,y.trackUrlRef)(e?.href,`${w}_${v}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,t.jsx)(h.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,d.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(h.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(g.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:n=>{n.preventDefault(),n.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop: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"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:n=>{n.preventDefault(),n.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)(h.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(g.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"desktop:mt-[24px] mt-[12px] self-start",href:(0,y.trackUrlRef)(e?.href,`${w}_${v}`),children:e.buttonText})]})]})})})},M=s.default.forwardRef(({data:e,className:o},i)=>{const a=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,s.useRef)(null),[n,u]=(0,s.useState)(!1),[k,B]=(0,s.useState)(""),[D,H]=(0,s.useState)(""),[L,U]=(0,s.useState)(""),[c,T]=(0,s.useState)(null),f=p=>{const l=e?.items?.length>3,m=e?.items?.length>2;switch(p){case 1440:return l?4:e?.items?.length;case 1024:return l?3:e?.items?.length;case 768:return l||m?2.3:2;default:return 1.2}};return(0,s.useImperativeHandle)(i,()=>r.current),(0,E.useExposure)(r,{componentType:w,componentName:v,componentTitle:e?.title}),(0,s.useEffect)(()=>{const p=r.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let l=0;p.forEach(m=>{l=Math.max(l,m.offsetHeight)}),p.forEach(m=>{m.style.height=`${l}px`})}},[]),(0,t.jsxs)("div",{className:o,ref:r,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(P.default,{data:{title:e?.title}}),(0,t.jsx)(V.default,{id:"Graphic",className:(0,d.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,l)=>{u(!0),l?.isYouTube?H?.(l?.youtubeId||""):(B?.(l?.video?.url||""),U?.(l?.mobileVideo?.url||""))},onIconClick:p=>{u(!0),T(p)}}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(G.VideoModal,{visible:n,youTubeId:D,onCloseModal:()=>u(!1),videoUrl:a&&L||k}),(0,t.jsx)(S.TextModal,{visible:n,textPcImg:c?.extension?.textPcImg||{url:""},textMobileImg:c?.extension?.textMobileImg||{url:""},textTitle:c?.extension?.textTitle||"",text:c?.extension?.text||"",textDesc:c?.extension?.textDesc||"",onCloseModal:()=>{u(!1),T(null)}})]})});M.displayName="Graphic";var F=(0,C.withLayout)(M);
 //# 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 { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          aria-label={data?.title ?? data?.description}\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold 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=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop: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              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"desktop:mt-[24px] mt-[12px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                // configuration?.onIconClick?.(configuration?.index || 0, data)\n              },\n            },\n          }}\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: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
-  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "e", "Graphic", "React", "className", "ref", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  function setVisible(arg0: boolean) {\n    throw new Error('Function not implemented.')\n  }\n\n  function setCurrentItem(data: GraphicType) {\n    throw new Error('Function not implemented.')\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          aria-label={data?.title ?? data?.description}\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold 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=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop: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              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"desktop:mt-[24px] mt-[12px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setVisible(true)\n                setCurrentItem(data)\n              },\n            },\n          }}\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: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        visible={visible}\n        textPcImg={currentItem?.extension?.textPcImg || { url: '' }}\n        textMobileImg={currentItem?.extension?.textMobileImg || { url: '' }}\n        textTitle={currentItem?.extension?.textTitle || ''}\n        text={currentItem?.extension?.text || ''}\n        textDesc={currentItem?.extension?.textDesc || ''}\n        onCloseModal={() => {\n          setVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
+  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setCurrentItem", "e", "Graphic", "React", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
 }

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

@@ -1,6 +1,6 @@
-"use strict";"use client";var ne=Object.create;var D=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var oe=(e,t)=>{for(var r in t)D(e,r,{get:t[r],enumerable:!0})},O=(e,t,r,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of se(t))!ae.call(e,p)&&p!==r&&D(e,p,{get:()=>t[p],enumerable:!(d=re(t,p))||d.enumerable});return e};var f=(e,t,r)=>(r=e!=null?ne(ie(e)):{},O(t||!e||!e.__esModule?D(r,"default",{value:e,enumerable:!0}):r,e)),le=e=>O(D({},"__esModule",{value:!0}),e);var fe={};oe(fe,{default:()=>ue});module.exports=le(fe);var n=require("react/jsx-runtime"),i=f(require("react")),x=require("../../helpers/utils.js"),L=f(require("../../components/picture.js")),$=f(require("./tabSwitch.js")),H=f(require("../../components/button.js")),A=f(require("../Title/index.js")),F=f(require("../SwiperBox/index.js")),j=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),U=require("../../hooks/useExposure.js"),B=require("../../shared/track.js"),z=require("../AiuiProvider/index.js"),W=f(require("../../components/badge.js")),G=require("../../components/heading.js"),J=require("../../components/text.js"),K=require("../../shared/trackUrlRef.js");const E="image",V="product_shelf",pe=999999999e-2;function ce(e){const t=(0,i.useRef)(null),[r,d]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{if(r)return;const p=t.current;if(!p||typeof IntersectionObserver>"u")return;const c=new IntersectionObserver(([a])=>{a.isIntersecting&&(d(!0),c.disconnect())},e);return c.observe(p),()=>c.disconnect()},[r,e]),[t,r]}const me=({data:e,configuration:t})=>{const{locale:r="us",copyWriting:d}=(0,z.useAiuiContext)(),p=(s,o,h)=>t?.event?.primaryButton?.(s,o+1,h),c=(s,o,h)=>t?.event?.secondaryButton?.(s,o+1,h),a=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},P=!a?.availableForSale&&a?.price?.amount===pe,v=t?.isShowTag,b=t?.isShowOriginalPrice,g=a?.coupons?.[0],{price:S,basePrice:C}=(0,q.formatVariantPrice)({locale:r,amount:b&&g?g.variant_price4wscode:a.price,baseAmount:b&&g?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),k=()=>{const s=e?.sku,o=e?.variants;return o?.find(_=>_?.sku===s)?.image?.url||o?.[0]?.image?.url||""},u=e?.custom_name||e?.title,w=e?.custom_description||e?.description;return(0,n.jsx)("div",{className:(0,x.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:(0,n.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,n.jsx)("div",{className:(0,x.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,n.jsx)("a",{"aria-label":u,target:t?.target,href:(0,K.trackUrlRef)(`${r==="us"||!r?"":`/${r}`}/products/${e?.handle}`,`${E}_${V}`),onClick:()=>{(0,B.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:(0,n.jsx)(L.default,{source:k(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),v?(0,n.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,o)=>(0,n.jsx)(W.default,{children:s},o))}):null,u?(0,n.jsx)(G.Heading,{as:"h3",title:u||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:u||""}):null,w?(0,n.jsx)(J.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:w||""}):null,(0,n.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:P?(0,n.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:d?.soldOutText}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&S||""}),(0,n.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&C||""})]})}),(0,n.jsxs)("div",{className:(0,x.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,n.jsx)(H.default,{variant:"secondary",onClick:()=>c(e,t?.index,t),className:`
+"use strict";"use client";var ne=Object.create;var B=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var oe=(e,t)=>{for(var i in t)B(e,i,{get:t[i],enumerable:!0})},O=(e,t,i,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of re(t))!ae.call(e,p)&&p!==i&&B(e,p,{get:()=>t[p],enumerable:!(d=ie(t,p))||d.enumerable});return e};var f=(e,t,i)=>(i=e!=null?ne(se(e)):{},O(t||!e||!e.__esModule?B(i,"default",{value:e,enumerable:!0}):i,e)),le=e=>O(B({},"__esModule",{value:!0}),e);var fe={};oe(fe,{default:()=>ue});module.exports=le(fe);var n=require("react/jsx-runtime"),s=f(require("react")),w=require("../../helpers/utils.js"),L=f(require("../../components/picture.js")),$=f(require("./tabSwitch.js")),H=f(require("../../components/button.js")),A=f(require("../Title/index.js")),F=f(require("../SwiperBox/index.js")),j=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),U=require("../../hooks/useExposure.js"),D=require("../../shared/track.js"),z=require("../AiuiProvider/index.js"),W=f(require("../../components/badge.js")),G=require("../../components/heading.js"),J=require("../../components/text.js"),K=require("../../shared/trackUrlRef.js");const E="image",V="product_shelf",pe=999999999e-2;function ce(e){const t=(0,s.useRef)(null),[i,d]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{if(i)return;const p=t.current;if(!p||typeof IntersectionObserver>"u")return;const c=new IntersectionObserver(([a])=>{a.isIntersecting&&(d(!0),c.disconnect())},e);return c.observe(p),()=>c.disconnect()},[i,e]),[t,i]}const me=({data:e,configuration:t})=>{const{locale:i="us",copyWriting:d}=(0,z.useAiuiContext)(),p=(r,o,h)=>t?.event?.primaryButton?.(r,o+1,h),c=(r,o,h)=>t?.event?.secondaryButton?.(r,o+1,h),a=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},P=!a?.availableForSale&&a?.price?.amount===pe,y=t?.isShowTag,v=t?.isShowOriginalPrice,b=a?.coupons?.[0],{price:x,basePrice:N}=(0,q.formatVariantPrice)({locale:i,amount:v&&b?b.variant_price4wscode:a.price,baseAmount:v&&b?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),S=()=>{const r=e?.sku,o=e?.variants;return o?.find(k=>k?.sku===r)?.image?.url||o?.[0]?.image?.url||""},u=e?.custom_name||e?.title,g=e?.custom_description||e?.description;return(0,n.jsx)("div",{className:(0,w.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.itemShape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:(0,n.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,n.jsx)("div",{className:(0,w.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,n.jsx)("a",{"aria-label":u,target:t?.target,href:(0,K.trackUrlRef)(`${i==="us"||!i?"":`/${i}`}/products/${e?.handle}`,`${E}_${V}`),onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:(0,n.jsx)(L.default,{source:S(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),y?(0,n.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((r,o)=>(0,n.jsx)(W.default,{children:r},o))}):null,u?(0,n.jsx)(G.Heading,{as:"h3",title:u||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:u||""}):null,g?(0,n.jsx)(J.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:g||""}):null,(0,n.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:P?(0,n.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:d?.soldOutText}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&x||""}),(0,n.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&N||""})]})}),(0,n.jsxs)("div",{className:(0,w.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,n.jsx)(H.default,{variant:"secondary",onClick:()=>c(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
               `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,n.jsx)(H.default,{variant:"primary",onClick:()=>p(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},de=i.default.forwardRef(({data:e,buildData:t,className:r="",key:d,event:p,recommendedData:c,target:a="_self"},P)=>{const[v,b]=(0,i.useState)(""),[g,S]=(0,i.useState)([]),[C,k]=ce({threshold:0}),u=(0,i.useRef)(!1),w=(0,i.useRef)(!1),s=(0,i.useRef)(null);(0,i.useImperativeHandle)(P,()=>s.current),(0,U.useExposure)(s,{componentType:E,componentName:V,componentTitle:e?.title,navigation:v});const{productsTab:o=[],productsCard:h=[],title:_,isShowTab:N=!0,tabShape:Q="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:Z=!1,...ee}=e,M=()=>{(0,B.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((l,R)=>{const m=l?.variants?.find(T=>T?.sku===l?.sku)||l?.variants?.[0];return{item_id:l?.sku||m?.sku,item_name:l?.name,item_variant:m?.name,price:m?.price,index:R+1}})}})},I=(l,R)=>{if(R){const y=c?.map(m=>({...m,isShowRecommended:!0}));console.log("newCurrentData1",y),S(y||[])}else{const y=l?.map(m=>{const T=t?.products?.find(te=>te?.handle===m?.handle);if(T)return{sku:m.sku,isShowRecommended:!1,custom_name:m.custom_name,custom_description:m.custom_description,...T}})?.filter(m=>m);console.log("newCurrentData2",y),S(y||[])}};return(0,i.useEffect)(()=>{k&&c?.length&&!w.current&&(w.current=!0,M())},[k,c]),(0,i.useEffect)(()=>{if(!u.current){if(!u.current&&c?.length&&(u.current=!0),N){b(o?.[0]?.tab||""),I(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}I(h,Z)}},[c]),(0,n.jsxs)("div",{ref:s,className:(0,x.cn)("shelf-display-wrap w-full",r,{"aiui-dark":e?.theme==="dark"}),children:[_&&(0,n.jsx)(A.default,{data:{title:_}}),N&&(0,n.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,n.jsx)($.default,{value:v,tabs:o,tabShape:Q,onTabClick:l=>{if(b(l?.tab),I(l?.data||[],l?.isShowRecommendedTab),!l?.isShowRecommendedTab){(0,B.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:E,component_name:V,component_title:e?.title,component_position:1,navigation:l?.tab}});return}M()}})}),(0,n.jsx)("div",{ref:C,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,n.jsx)(F.default,{className:`${N?"mt-6":""} !overflow-visible`,id:`ShelfDisplay${d}${v}`,data:{list:g,configuration:{...ee,event:p,isShowTag:X,isShowOriginalPrice:Y,target:a}},Slide:me,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ue=(0,j.withLayout)(de);
+            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},de=s.default.forwardRef(({data:e,buildData:t,className:i="",key:d,event:p,recommendedData:c,target:a="_self"},P)=>{const[y,v]=(0,s.useState)(""),[b,x]=(0,s.useState)([]),[N,S]=ce({threshold:0}),u=(0,s.useRef)(!1),g=(0,s.useRef)(!1),r=(0,s.useRef)(null);(0,s.useImperativeHandle)(P,()=>r.current),(0,U.useExposure)(r,{componentType:E,componentName:V,componentTitle:e?.title,navigation:y});const{productsTab:o=[],productsCard:h=[],title:k,isShowTab:C=!0,tabShape:Q="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:Z=!1,...ee}=e,M=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((l,R)=>{const m=l?.variants?.find(T=>T?.sku===l?.sku)||l?.variants?.[0];return{item_id:l?.sku||m?.sku,item_name:l?.name,item_variant:m?.name,price:m?.price,index:R+1}})}})},I=(l,R)=>{if(R){const _=c?.map(m=>({...m,isShowRecommended:!0}));x(_||[])}else{const _=l?.map(m=>{const T=t?.products?.find(te=>te?.handle===m?.handle);if(T)return{sku:m.sku,isShowRecommended:!1,custom_name:m.custom_name,custom_description:m.custom_description,...T}})?.filter(m=>m);x(_||[])}};return(0,s.useEffect)(()=>{S&&c?.length&&!g.current&&(g.current=!0,M())},[S,c]),(0,s.useEffect)(()=>{if(!u.current){if(!u.current&&c?.length&&(u.current=!0),C){v(o?.[0]?.tab||""),I(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}I(h,Z)}},[c]),(0,n.jsxs)("div",{ref:r,className:(0,w.cn)("shelf-display-wrap w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[k&&(0,n.jsx)(A.default,{data:{title:k}}),C&&(0,n.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,n.jsx)($.default,{value:y,tabs:o,tabShape:Q,onTabClick:l=>{if(v(l?.tab),I(l?.data||[],l?.isShowRecommendedTab),!l?.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:E,component_name:V,component_title:e?.title,component_position:1,navigation:l?.tab}});return}M()}})}),(0,n.jsx)("div",{ref:N,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,n.jsx)(F.default,{className:`${C?"mt-6":""} !overflow-visible`,id:`ShelfDisplay${d}${y}`,data:{list:b,configuration:{...ee,event:p,isShowTag:X,isShowOriginalPrice:Y,target:a}},Slide:me,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ue=(0,j.withLayout)(de);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        console.log('newCurrentData1', newCurrentData)\n        setCurrentItems(newCurrentData || [])\n      } else {\n        const newCurrentData = currentData\n          ?.map(item => {\n            const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n            if (findData) {\n              return {\n                sku: item.sku,\n                isShowRecommended: false,\n                custom_name: item.custom_name,\n                custom_description: item.custom_description,\n                ...findData,\n              }\n            }\n          })\n          ?.filter(item => item)\n        console.log('newCurrentData2', newCurrentData)\n        setCurrentItems(newCurrentData || [])\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData || [])\n      } else {\n        const newCurrentData = currentData\n          ?.map(item => {\n            const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n            if (findData) {\n              return {\n                sku: item.sku,\n                isShowRecommended: false,\n                custom_name: item.custom_name,\n                custom_description: item.custom_description,\n                ...findData,\n              }\n            }\n          })\n          ?.filter(item => item)\n        setCurrentItems(newCurrentData || [])\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAiMY,IAAAI,EAAA,6BAhMZC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,6BACtBC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BACnCC,EAA4B,sCAC5BC,EAAwB,iCACxBC,EAA+B,oCAC/BC,EAAkB,wCAClBC,EAAwB,uCACxBC,EAAqB,oCAErBC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,GAAiB,aAqEvB,SAASC,GAAiCC,EAAc,CACtD,MAAMC,KAAM,UAAU,IAAI,EACpB,CAACC,EAAQC,CAAS,KAAI,YAAS,EAAK,EAE1C,sBAAU,IAAM,CACd,GAAID,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OAExD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EAEV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EAEb,CAACC,EAAKC,CAAM,CACrB,CAEA,MAAMK,GAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAEhDC,EAAkB,CAACC,EAA0BC,EAAeN,IAChEC,GAAe,OAAO,gBAAgBI,EAAQC,EAAQ,EAAGN,CAAI,EAEzDO,EAAoB,CAACF,EAA0BC,EAAeN,IAClEC,GAAe,OAAO,kBAAkBI,EAAQC,EAAQ,EAAGN,CAAI,EAE3DQ,EAAUR,GAAM,UAAU,KAAMS,GAAcA,GAAM,MAAQT,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGU,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWlB,GACrEqB,EAAYV,GAAe,UAC3BW,EAAsBX,GAAe,oBAGrCY,EAASL,GAAS,UAAU,CAAC,EAE7B,CAAE,MAAAM,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQb,EACR,OAAQU,GAAuBC,EAASA,EAAO,qBAAuBL,EAAQ,MAC9E,WAAYI,GAAuBC,EAASL,EAAQ,MAAQ,EAC5D,aAAcR,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKgB,EAAY,IAAM,CACtB,MAAMC,EAAMjB,GAAM,IACZkB,EAAWlB,GAAM,SAEvB,OADgBkB,GAAU,KAAMT,GAAcA,GAAM,MAAQQ,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEMC,EAAenB,GAAM,aAAeA,GAAM,MAC1CoB,EAAqBpB,GAAM,oBAAsBA,GAAM,YAE7D,SACE,OAAC,OAEC,aAAW,MACT,oHACAC,GAAe,YAAc,QAAU,cAAgB,eACvD,oGACA,qFACA,qBACF,EAEA,oBAAC,OAAI,UAAU,gFACb,oBAAC,OACC,aAAW,MACT,yGACF,EAEA,mBAAC,KACC,aAAYkB,EACZ,OAAQlB,GAAe,OACvB,QAAM,eACJ,GAAGC,IAAW,MAAQ,CAACA,EAAS,GAAK,IAAIA,CAAM,EAAE,aAAaF,GAAM,MAAM,GAC1E,GAAGZ,CAAa,IAAIC,CAAa,EACnC,EACA,QAAS,IAAM,IACb,WAAQ,CACN,MAAO,WACP,WAAY,cACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAO,CACL,CACE,QAASW,GAAM,KAAOQ,GAAS,IAC/B,UAAWR,GAAM,KACjB,aAAcQ,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOP,GAAe,MAAQ,CAChC,CACF,CACF,CACF,CAAC,CACH,EAEA,mBAAC,EAAAoB,QAAA,CAAQ,OAAQL,EAAU,EAAG,IAAI,GAAG,UAAU,yDAAyD,EAC1G,EACF,EACCL,KACC,OAAC,OAAI,UAAU,2DACZ,SAAAX,GAAM,MACH,SAAUS,GAAcA,GAAM,aAAa,OAAO,CAAC,GACnD,MAAOA,GAAcA,GAAM,UAAU,SAAU,EAAE,CAAC,GAClD,QAAQ,EAAG,CAAC,GACZ,MAAM,CAACA,EAAWH,OAAkB,OAAC,EAAAgB,QAAA,CAAmB,SAAAb,GAARH,CAAa,CAAQ,EAC3E,EACE,KACHa,KACC,OAAC,WACC,GAAG,KACH,MAAOA,GAAgB,GACvB,KAAM,EACN,UAAU,0GACV,KAAMA,GAAgB,GACxB,EACE,KACHC,KACC,OAAC,QACC,KAAM,EACN,UAAU,sJACV,KAAMA,GAAsB,GAC9B,EACE,QACJ,OAAC,OAAI,UAAU,mCACZ,SAAAV,KACC,OAAC,OAAI,UAAU,sDAAuD,SAAAP,GAAa,YAAY,KAE/F,oBACE,oBAAC,OAAI,UAAU,kEACZ,SAAAK,GAAS,kBAAmBM,GAAS,GACxC,KACA,OAAC,OAAI,UAAU,sFACZ,SAAAN,GAAS,kBAAmBO,GAAa,GAC5C,GACF,EAEJ,KAEA,QAAC,OACC,aAAW,MACT,2CACAd,EAAc,YAAc,WAAa,WAAa,EACxD,EAEC,UAAAA,GAAe,mBACd,OAAC,EAAAsB,QAAA,CACC,QAAQ,YACR,QAAS,IAAMhB,EAAkBP,EAAMC,GAAe,MAAOA,CAAa,EAC1E,UAAW;AAAA,kBACPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,gBAGzD,SAAAA,GAAe,iBAAmB,GACrC,EACE,KACHA,GAAe,iBACd,OAAC,EAAAsB,QAAA,CACC,QAAQ,UACR,QAAS,IAAMnB,EAAgBJ,EAAMC,GAAe,MAAOA,CAAa,EACxE,UAAW;AAAA,gBACTA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,cAGvD,SAAAA,GAAe,eAAiB,GACnC,EACE,MACN,GACF,GAlHKD,GAAM,IAAMA,GAAM,MAmHzB,CAEJ,EAEMwB,GAAe,EAAAC,QAAM,WACzB,CAAC,CAAE,KAAAzB,EAAM,UAAA0B,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,EAAO,gBAAAC,EAAiB,OAAAC,EAAS,OAAQ,EAAGtC,IAAQ,CAC3F,KAAM,CAACuC,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EACvC,CAACC,EAAcC,CAAe,KAAI,YAA6B,CAAC,CAAC,EAEjE,CAACC,EAAS1C,CAAM,EAAIH,GAA8B,CAAE,UAAW,CAAE,CAAC,EAClE8C,KAAc,UAAgB,EAAK,EACnCC,KAAS,UAAgB,EAAK,EAC9BC,KAAW,UAAuB,IAAI,KAC5C,uBAAoB9C,EAAK,IAAM8C,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAenD,EACf,cAAeC,EACf,eAAgBW,GAAM,MACtB,WAAYgC,CACd,CAAC,EAED,KAAM,CACJ,YAAAQ,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,UAAAjC,EAAY,GACZ,oBAAAC,EAAsB,GACtB,sBAAAiC,EAAwB,GACxB,GAAGC,EACL,EAAI9C,EAEE+C,EAAgB,IAAM,IAC1B,WAAQ,CACN,MAAO,WACP,WAAY,iBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAOjB,GAAiB,IAAI,CAACrB,EAAMH,IAAU,CAE3C,MAAME,EADWC,GAAM,UAAU,KAAMuC,GAAWA,GAAG,MAAQvC,GAAM,GAAG,GAC1CA,GAAM,WAAW,CAAC,EAC9C,MAAO,CACL,QAASA,GAAM,KAAOD,GAAS,IAC/B,UAAWC,GAAM,KACjB,aAAcD,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOF,EAAQ,CACjB,CACF,CAAC,CACH,CACF,CAAC,CACH,EAEM2C,EAAmB,CAACC,EAAiCC,IAAkB,CAC3E,GAAIA,EAAM,CACR,MAAMC,EAAiBtB,GAAiB,IAAIrB,IACnC,CACL,GAAGA,EACH,kBAAmB,EACrB,EACD,EACD0B,EAAgBiB,GAAkB,CAAC,CAAC,CACtC,KAAO,CACL,MAAMA,EAAiBF,GACnB,IAAIzC,GAAQ,CACZ,MAAM4C,EAAW3B,GAAW,UAAU,KAAKrB,IAAUA,IAAQ,SAAWI,GAAM,MAAM,EACpF,GAAI4C,EACF,MAAO,CACL,IAAK5C,EAAK,IACV,kBAAmB,GACnB,YAAaA,EAAK,YAClB,mBAAoBA,EAAK,mBACzB,GAAG4C,CACL,CAEJ,CAAC,GACC,OAAO5C,GAAQA,CAAI,EACvB0B,EAAgBiB,GAAkB,CAAC,CAAC,CACtC,CACF,EAEA,sBAAU,IAAM,CACV1D,GAAUoC,GAAiB,QAAU,CAACQ,EAAO,UAC/CA,EAAO,QAAU,GACjBS,EAAc,EAElB,EAAG,CAACrD,EAAQoC,CAAe,CAAC,KAG5B,aAAU,IAAM,CACd,GAAI,CAAAO,EAAY,QAIhB,IAHI,CAACA,EAAY,SAAWP,GAAiB,SAC3CO,EAAY,QAAU,IAEpBM,EAAW,CACbV,EAASO,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCS,EAAiBT,IAAc,CAAC,GAAG,MAAQ,CAAC,EAAGA,IAAc,CAAC,GAAG,oBAAoB,EACrF,MACF,CACAS,EAAiBR,EAAcI,CAAqB,EACtD,EAAG,CAACf,CAAe,CAAC,KAGlB,QAAC,OACC,IAAKS,EACL,aAAW,MAAG,4BAA6BZ,EAAW,CAAE,YAAa3B,GAAM,QAAU,MAAO,CAAC,EAE5F,UAAA0C,MAAS,OAAC,EAAAY,QAAA,CAAM,KAAM,CAAE,MAAOZ,CAAM,EAAG,EACxCC,MACC,OAAC,OAAI,UAAU,6CACb,mBAAC,EAAAY,QAAA,CACC,MAAOvB,EACP,KAAMQ,EACN,SAAUI,EACV,WAAYI,GAAK,CAGf,GAFAf,EAASe,GAAG,GAAG,EACfC,EAAiBD,GAAG,MAAQ,CAAC,EAAGA,GAAG,oBAAoB,EACnD,CAACA,GAAG,qBAAsB,IAC5B,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB5D,EAChB,eAAgBC,EAChB,gBAAiBW,GAAM,MACvB,mBAAoB,EACpB,WAAYgD,GAAG,GACjB,CACF,CAAC,EACD,MACF,CACAD,EAAc,CAChB,EACF,EACF,KAEF,OAAC,OACC,IAAKX,EACL,UAAU,2FAEV,mBAAC,EAAAoB,QAAA,CACC,UAAW,GAAGb,EAAY,OAAS,EAAE,qBACrC,GAAI,eAAef,CAAG,GAAGI,CAAK,GAC9B,KAAM,CACJ,KAAME,EACN,cAAe,CAAE,GAAGY,GAAO,MAAOjB,EAAO,UAAAlB,EAAW,oBAAAC,EAAqB,OAAQmB,CAAO,CAC1F,EACA,MAAOhC,GACP,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,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,CAEJ,CACF,EAEA,IAAO9B,MAAQ,cAAWuD,EAAY",
   "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "recommendedData", "target", "tabId", "setTabId", "currentItems", "setCurrentItems", "viewRef", "isRecommend", "isView", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowRecommendedCard", "other", "gackViewEvent", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "Title", "TabSwitch", "SwiperBox"]
 }

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

@@ -0,0 +1,12 @@
+import type { Img } from '../../types/props.js';
+export type TextModalType = {
+    visible: boolean;
+    textPcImg: Img;
+    textMobileImg: Img;
+    textTitle: string;
+    text: string;
+    textDesc: string;
+    onCloseModal: () => void;
+};
+declare const TextModal: (props: TextModalType) => import("react/jsx-runtime").JSX.Element;
+export { TextModal };

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

@@ -0,0 +1,2 @@
+"use strict";var x=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var v=(l,e)=>{for(var a in e)x(l,a,{get:e[a],enumerable:!0})},h=(l,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of b(e))!c.call(l,o)&&o!==a&&x(l,o,{get:()=>e[o],enumerable:!(s=g(e,o))||s.enumerable});return l};var f=l=>h(x({},"__esModule",{value:!0}),l);var C={};v(C,{TextModal:()=>m});module.exports=f(C);var t=require("react/jsx-runtime"),p=require("../../components/dialog.js"),i=require("../../components/index.js"),w=require("../../helpers/index.js");const m=l=>{const{visible:e,textPcImg:a,textMobileImg:s,textTitle:o,text:r,textDesc:d,onCloseModal:n}=l;return(0,t.jsx)(p.Dialog,{open:e,onOpenChange:()=>n(),children:(0,t.jsx)(p.DialogContent,{className:" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] mx-auto border-none bg-transparent p-0 text-white [&_button]:hidden",children:(0,t.jsxs)("div",{className:" relative",children:[(0,t.jsx)(i.Picture,{source:`${a?.url||""} , ${s?.url||""} 767`,className:"h-full w-full",imgClassName:"h-full object-cover"}),(0,t.jsx)("div",{className:" tablet:inset-x-[32px] tablet:top-[32px] absolute inset-x-[16px] top-[16px]",children:(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)(i.Text,{html:o,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"}),(0,t.jsx)("div",{onClick:()=>n(),className:" cursor-pointer",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("g",{"clip-path":"url(#clip0_2548_10038)",children:(0,t.jsx)("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})})]})}),(0,t.jsxs)("div",{className:"tablet:p-[32px] p-[16px]",children:[(0,t.jsx)(i.Text,{html:r,className:" tablet:text-[24px] text-[20px] font-bold leading-[1.2]"}),(0,t.jsx)("br",{}),(0,t.jsx)(i.Text,{html:d,className:"tablet:leading-[1.2] pt-1 text-[16px] font-bold leading-[1.4]"})]})]})})})};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/TextModal/index.tsx"],
+  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n  visible: boolean\n  textPcImg: Img\n  textMobileImg: Img\n  textTitle: string\n  text: string\n  textDesc: string\n  onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n  const { visible, textPcImg, textMobileImg, textTitle, text, textDesc, onCloseModal } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] mx-auto border-none bg-transparent p-0 text-white [&_button]:hidden\">\n        <div className=\" relative\">\n          <Picture\n            source={`${textPcImg?.url || ''} , ${textMobileImg?.url || ''} 767`}\n            className=\"h-full w-full\"\n            imgClassName=\"h-full object-cover\"\n          />\n          <div className=\" tablet:inset-x-[32px] tablet:top-[32px] absolute inset-x-[16px] top-[16px]\">\n            <div className=\"flex items-center justify-between\">\n              <Text html={textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n              <div onClick={() => onCloseModal()} className=\" cursor-pointer\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n                  <g clip-path=\"url(#clip0_2548_10038)\">\n                    <path\n                      d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n                      fill=\"white\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n          </div>\n          <div className=\"tablet:p-[32px] p-[16px]\">\n            <Text html={text} className=\" tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n            <br />\n            <Text html={textDesc} className=\"tablet:leading-[1.2] pt-1 text-[16px] font-bold leading-[1.4]\" />\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { TextModal }\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAuBU,IAAAI,EAAA,6BAtBVC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAanB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,cAAAC,EAAe,UAAAC,EAAW,KAAAC,EAAM,SAAAC,EAAU,aAAAC,CAAa,EAAIP,EAEvF,SACE,OAAC,UAAO,KAAMC,EAAS,aAAc,IAAMM,EAAa,EACtD,mBAAC,iBAAc,UAAU,yJACvB,oBAAC,OAAI,UAAU,YACb,oBAAC,WACC,OAAQ,GAAGL,GAAW,KAAO,EAAE,MAAMC,GAAe,KAAO,EAAE,OAC7D,UAAU,gBACV,aAAa,sBACf,KACA,OAAC,OAAI,UAAU,8EACb,oBAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,KAAMC,EAAW,UAAU,yDAAyD,KAC1F,OAAC,OAAI,QAAS,IAAMG,EAAa,EAAG,UAAU,kBAC5C,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,KAAE,YAAU,yBACX,mBAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,GACF,EACF,KACA,QAAC,OAAI,UAAU,2BACb,oBAAC,QAAK,KAAMF,EAAM,UAAU,0DAA0D,KACtF,OAAC,OAAG,KACJ,OAAC,QAAK,KAAMC,EAAU,UAAU,gEAAgE,GAClG,GACF,EACF,EACF,CAEJ",
+  "names": ["TextModal_exports", "__export", "TextModal", "__toCommonJS", "import_jsx_runtime", "import_dialog", "import_components", "import_helpers", "props", "visible", "textPcImg", "textMobileImg", "textTitle", "text", "textDesc", "onCloseModal"]
+}

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var q=Object.create;var a=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var K=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},b=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of B(e))!J.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=A(e,o))||s.enumerable});return t};var O=(t,e,n)=>(n=t!=null?q(G(t)):{},b(e||!t||!t.__esModule?a(n,"default",{value:t,enumerable:!0}):n,t)),Q=t=>b(a({},"__esModule",{value:!0}),t);var X={};K(X,{default:()=>W});module.exports=Q(X);var i=require("react/jsx-runtime"),r=O(require("react")),m=require("gsap"),T=require("gsap/dist/SplitText"),h=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),L=require("../../components/index.js"),M=require("../../shared/Styles.js"),D=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),S=require("react-intersection-observer");const R="link",H="title",E=r.default.forwardRef(({data:t,className:e},n)=>{const{title:s,caption:o,theme:x,extensions:p}=t,u=(0,r.useRef)(null),l=(0,r.useRef)(null),c=(0,r.useRef)(null),f=(0,r.useRef)(null),{ref:I,inView:v}=(0,S.useInView)();return(0,r.useImperativeHandle)(n,()=>u.current),(0,D.useExposure)(u,{componentType:R,componentName:H,componentTitle:t?.title}),(0,r.useEffect)(()=>{m.gsap.registerPlugin(T.SplitText,h.ScrollTrigger);function P(){if(!l.current)return;const V=l.current?.clientHeight||80;c.current=new T.SplitText(l.current,{type:"words",wordsClass:"word"});const d=c.current.words;m.gsap.set(d,{opacity:0}),f.current=h.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${V*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:$=>{const z=$.progress,y=d.length,U=1/y,k=.5;d.forEach((j,C)=>{const F=C/y*(1-k),_=U*(1+k);let g=(z-F)/_;g=Math.max(0,Math.min(g,1)),m.gsap.set(j,{opacity:g})})}})}return v&&P(),()=>{c.current&&c.current.revert(),f.current&&f.current.kill()}},[v]),(s||o)&&(0,i.jsxs)("div",{className:"mb-6 flex items-end justify-between",ref:u,children:[(0,i.jsx)("div",{ref:I,className:(0,w.cn)("space-y-4",e,{"aiui-dark":x==="dark"}),children:(0,i.jsx)(L.Heading,{ref:l,as:"h2",size:4,html:o||s})}),p?.textLink&&(0,i.jsx)("a",{className:(0,w.cn)({"aiui-dark":x==="dark"},"text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,N.trackUrlRef)(p?.link,`${R}_${H}`),children:p?.textLink})]})});E.displayName="Title";var W=(0,M.withLayout)(E);
+"use strict";"use client";var _=Object.create;var a=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},k=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of A(e))!G.call(t,o)&&o!==n&&a(t,o,{get:()=>e[o],enumerable:!(s=q(e,o))||s.enumerable});return t};var K=(t,e,n)=>(n=t!=null?_(B(t)):{},k(e||!t||!t.__esModule?a(n,"default",{value:t,enumerable:!0}):n,t)),O=t=>k(a({},"__esModule",{value:!0}),t);var W={};J(W,{default:()=>Q});module.exports=O(W);var i=require("react/jsx-runtime"),r=K(require("react")),m=require("gsap"),T=require("gsap/dist/SplitText"),h=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),E=require("../../components/index.js"),L=require("../../shared/Styles.js"),M=require("../../hooks/useExposure.js"),D=require("../../shared/trackUrlRef.js"),N=require("react-intersection-observer");const b="link",R="title",H=r.default.forwardRef(({data:t,className:e},n)=>{const{title:s,theme:o,extension:u}=t,p=(0,r.useRef)(null),l=(0,r.useRef)(null),c=(0,r.useRef)(null),f=(0,r.useRef)(null),{ref:S,inView:x}=(0,N.useInView)();return(0,r.useImperativeHandle)(n,()=>p.current),(0,M.useExposure)(p,{componentType:b,componentName:R,componentTitle:t?.title}),(0,r.useEffect)(()=>{m.gsap.registerPlugin(T.SplitText,h.ScrollTrigger);function I(){if(!l.current)return;const P=l.current?.clientHeight||80;c.current=new T.SplitText(l.current,{type:"words",wordsClass:"word"});const d=c.current.words;m.gsap.set(d,{opacity:0}),f.current=h.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${P*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:V=>{const $=V.progress,v=d.length,z=1/v,y=.5;d.forEach((U,j)=>{const C=j/v*(1-y),F=z*(1+y);let g=($-C)/F;g=Math.max(0,Math.min(g,1)),m.gsap.set(U,{opacity:g})})}})}return x&&I(),()=>{c.current&&c.current.revert(),f.current&&f.current.kill()}},[x]),s&&(0,i.jsxs)("div",{className:"mb-6 flex items-end justify-between",ref:p,children:[(0,i.jsx)("div",{ref:S,className:(0,w.cn)("space-y-4",e,{"aiui-dark":o==="dark"}),children:(0,i.jsx)(E.Heading,{ref:l,as:"h2",size:4,html:s})}),u?.textLink&&(0,i.jsx)("a",{className:(0,w.cn)({"aiui-dark":o==="dark"},"text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,D.trackUrlRef)(u?.link,`${b}_${R}`),children:u?.textLink})]})});H.displayName="Title";var Q=(0,L.withLayout)(H);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, caption, theme, extensions } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n          >\n            {extensions?.textLink}\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8EM,IAAAI,EAAA,6BA7ENC,EAA8D,oBAC9DC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvF,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,MAAAC,EAAO,WAAAC,CAAW,EAAIN,EACxCO,KAAW,UAAuB,IAAI,EACtCC,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,gCAAoBV,EAAK,IAAMK,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAX,EACA,cAAAC,EACA,eAAgBG,GAAM,KACxB,CAAC,KAED,aAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASa,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,GAGRT,GAASC,OACR,QAAC,OAAI,UAAU,sCAAsC,IAAKG,EACxD,oBAAC,OAAI,IAAKI,EAAW,aAAW,MAAG,YAAaV,EAAW,CAAE,YAAaI,IAAU,MAAO,CAAC,EAC1F,mBAAC,WAAQ,IAAKG,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMJ,GAAWD,EAAO,EACnE,EACCG,GAAY,aACX,OAAC,KACC,aAAW,MACT,CAAE,YAAaD,IAAU,MAAO,EAChC,oGACF,EACA,QAAM,eAAYC,GAAY,KAAM,GAAGV,CAAa,IAAIC,CAAa,EAAE,EAEtE,SAAAS,GAAY,SACf,GAEJ,CAGN,CAAC,EAEDR,EAAM,YAAc,QAEpB,IAAOf,KAAQ,cAAWe,CAAK",
-  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, theme, extension } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div className=\"mb-6 flex items-end justify-between\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n        </div>\n        {extension?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extension?.link, `${componentType}_${componentName}`)}\n          >\n            {extension?.textLink}\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8EM,IAAAI,EAAA,6BA7ENC,EAA8D,oBAC9DC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvF,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAU,EAAIL,EAC9BM,KAAW,UAAuB,IAAI,EACtCC,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,gCAAoBT,EAAK,IAAMI,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAV,EACA,cAAAC,EACA,eAAgBG,GAAM,KACxB,CAAC,KAED,aAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASY,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,EAGTR,MACE,QAAC,OAAI,UAAU,sCAAsC,IAAKG,EACxD,oBAAC,OAAI,IAAKI,EAAW,aAAW,MAAG,YAAaT,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EAC1F,mBAAC,WAAQ,IAAKG,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMJ,EAAO,EACxD,EACCE,GAAW,aACV,OAAC,KACC,aAAW,MACT,CAAE,YAAaD,IAAU,MAAO,EAChC,oGACF,EACA,QAAM,eAAYC,GAAW,KAAM,GAAGT,CAAa,IAAIC,CAAa,EAAE,EAErE,SAAAQ,GAAW,SACd,GAEJ,CAGN,CAAC,EAEDP,EAAM,YAAc,QAEpB,IAAOf,KAAQ,cAAWe,CAAK",
+  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "ref", "title", "theme", "extension", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
 }

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

@@ -10,8 +10,7 @@ export interface TitleProps {
         /**
          * 主标题
          */
-        title?: string;
-        caption?: string;
+        title: string;
         /**
          * 特性列表，最多支持3个
          */
@@ -23,7 +22,7 @@ export interface TitleProps {
         /**
          * 扩展数据
          */
-        extensions?: any;
+        extension?: any;
     };
     /**
      * 自定义类名

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/types.ts"],
-  "sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface TitleProps {\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title?: string\n    caption?: string\n    /**\n     * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\u8272\n     */\n    theme?: Theme\n    /**\n     * \u6269\u5C55\u6570\u636E\n     */\n    extensions?: any\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface TitleProps {\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\u8272\n     */\n    theme?: Theme\n    /**\n     * \u6269\u5C55\u6570\u636E\n     */\n    extension?: any\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/WhyChooses/WhyChoose.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js';
+declare const WhyChooseItem: {
+    ({ data }: {
+        data: ItemType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<WhyChooseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;
+export { WhyChooseItem };

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

@@ -0,0 +1,2 @@
+export { default } from './WhyChoose.js';
+export { WhyChooseItem } from './WhyChoose.js';