npm - @anker-in/headless-ui - Versions diffs - 1.1.68 → 1.1.69 - Mend

@anker-in/headless-ui 1.1.68 → 1.1.69

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

Files changed (292) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SelectStore/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 { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n  title: string\n  desc: string\n  img: Img\n  mobileImg: Img\n  padImg: Img\n  miniImg: Img\n  // pay: {\n  //   img: Img\n  // }[]\n  // delivery: {\n  //   img: Img\n  // }[]\n  // service: {\n  //   title: string\n  //   img: Img\n  // }[]\n}\n\ntype SelectStoreType = {\n  data: {\n    list: SelectStoreDataType[]\n  }\n  className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n  const { data, className } = props\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div className=\"\">\n        <div className=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n          {list.map((item, index) => (\n            <div\n              key={index}\n              className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]\"\n            >\n              <Picture\n                className=\"object-cover\"\n                imgClassName=\"w-full object-cover\"\n                source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n              />\n              <div className=\"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n                <Text\n                  html={item?.title}\n                  className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#080A0F] [&_*_strong]:!font-bold\"\n                />\n                <Text\n                  html={item?.desc}\n                  className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F]\"\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n        {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n              <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n                <div className=\"flex flex-col justify-center flex-1\">\n                \n                {item?.pay && (\n                  <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n                  {item?.pay?.map((pay, ind)=>{\n                    return (\n                      <div key={ind} className='laptop:w-[60px] w-[48px]'>\n                        <Picture\n                            className=\" w-full\"\n                            imgClassName=\"\"\n                            source={pay?.img?.url}\n                            alt={pay?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n                )}\n                \n                {\n                 item?.delivery && (\n                  <div className='flex gap-[24px] items-center justify-center'>\n                    {item?.delivery?.map((delivery, ind)=>{\n                    return (\n                      <div key={ind} className=''>\n                        <Picture\n                            className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n                            imgClassName=\"\"\n                            source={delivery?.img?.url}\n                            alt={delivery?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                  </div>\n                 ) \n                }\n                \n                {\n                  item?.service && (\n                    <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n                      {item?.service?.map((service, ind)=>{\n                        // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n                        const isFifth = ind === 4;\n                        return (\n                          <div key={ind} className={`\n                            flex flex-col items-center desktop:h-full  w-[157px] justify-start desktop:w-[81px]\n                            ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n                          `}>\n                            <div className='w-[70px] desktop:w-[54px]'>\n                              <Picture\n                              className=\"\"\n                              imgClassName=\"w-full h-auto\"\n                              source={service?.img?.url}\n                              alt={service?.img?.alt || ''}\n                            />\n                            </div>\n                            <div className='text-center'>\n                            <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n                            </div>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  )\n                }\n                </div>\n                <div className='mt-auto'>\n                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#080A0F]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#080A0F]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
-  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCI,IAAAI,EAAA,6BArCJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,GACb,mBAAC,OAAI,UAAU,+DACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAEC,UAAU,oLAEV,oBAAC,WACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACA,QAAC,OAAI,UAAU,oEACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,0FACZ,KACA,OAAC,QACC,KAAMA,GAAM,KACZ,UAAU,+EACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWO,CAAW",
-  "names": ["SelectStore_exports", "__export", "SelectStore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "SelectStore", "props", "data", "className", "list", "item", "index"]
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\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 { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n  title: string\n  desc: string\n  img: Img\n  mobileImg: Img\n  padImg: Img\n  miniImg: Img\n  // pay: {\n  //   img: Img\n  // }[]\n  // delivery: {\n  //   img: Img\n  // }[]\n  // service: {\n  //   title: string\n  //   img: Img\n  // }[]\n}\n\ninterface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    list: SelectStoreDataType[]\n  }\n}\n\nconst SelectStore = ({ data, className, ...rest }: SelectStoreType) => {\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div {...rest} className={cn('', className)}>\n        <div className=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n          {list.map((item, index) => (\n            <div\n              key={index}\n              className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]\"\n            >\n              <Picture\n                className=\"object-cover\"\n                imgClassName=\"w-full object-cover\"\n                source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n              />\n              <div className=\"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n                <Text\n                  html={item?.title}\n                  className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#080A0F] [&_*_strong]:!font-bold\"\n                />\n                <Text\n                  html={item?.desc}\n                  className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F]\"\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n        {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n              <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n                <div className=\"flex flex-col justify-center flex-1\">\n                \n                {item?.pay && (\n                  <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n                  {item?.pay?.map((pay, ind)=>{\n                    return (\n                      <div key={ind} className='laptop:w-[60px] w-[48px]'>\n                        <Picture\n                            className=\" w-full\"\n                            imgClassName=\"\"\n                            source={pay?.img?.url}\n                            alt={pay?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n                )}\n                \n                {\n                 item?.delivery && (\n                  <div className='flex gap-[24px] items-center justify-center'>\n                    {item?.delivery?.map((delivery, ind)=>{\n                    return (\n                      <div key={ind} className=''>\n                        <Picture\n                            className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n                            imgClassName=\"\"\n                            source={delivery?.img?.url}\n                            alt={delivery?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                  </div>\n                 ) \n                }\n                \n                {\n                  item?.service && (\n                    <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n                      {item?.service?.map((service, ind)=>{\n                        // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n                        const isFifth = ind === 4;\n                        return (\n                          <div key={ind} className={`\n                            flex flex-col items-center desktop:h-full  w-[157px] justify-start desktop:w-[81px]\n                            ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n                          `}>\n                            <div className='w-[70px] desktop:w-[54px]'>\n                              <Picture\n                              className=\"\"\n                              imgClassName=\"w-full h-auto\"\n                              source={service?.img?.url}\n                              alt={service?.img?.alt || ''}\n                            />\n                            </div>\n                            <div className='text-center'>\n                            <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n                            </div>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  )\n                }\n                </div>\n                <div className='mt-auto'>\n                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#080A0F]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#080A0F]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
+  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCI,IAAAI,EAAA,6BApCJC,EAAuB,iBACvBC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA2B9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,SACE,mBACE,mBAAC,OAAK,GAAGE,EAAM,aAAW,MAAG,GAAID,CAAS,EACxC,mBAAC,OAAI,UAAU,+DACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAEC,UAAU,oLAEV,oBAAC,WACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACA,QAAC,OAAI,UAAU,oEACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,0FACZ,KACA,OAAC,QACC,KAAMA,GAAM,KACZ,UAAU,+EACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOd,KAAQ,cAAWQ,CAAW",
+  "names": ["SelectStore_exports", "__export", "SelectStore_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "SelectStore", "data", "className", "rest", "list", "item", "index"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var oe=Object.create;var T=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty;var pe=(t,n)=>{for(var i in n)T(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of ce(n))!fe.call(t,c)&&c!==i&&T(t,c,{get:()=>n[c],enumerable:!(h=le(n,c))||h.enumerable});return t};var R=(t,n,i)=>(i=t!=null?oe(me(t)):{},A(n||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),ue=t=>A(T({},"__esModule",{value:!0}),t);var be={};pe(be,{default:()=>_e});module.exports=ue(be);var o=require("react/jsx-runtime"),s=R(require("react")),q=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),O=R(require("../Title/index.js")),K=R(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),W=require("react-responsive"),Z=require("../../hooks/useRollout.js"),S=require("./shelfDisplayItem.js");const de="image",he="product_shelf",ge=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",we=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,$=s.default.forwardRef(({key:t,data:n,event:i,buildData:h,breakpoints:c,className:j="",recommendedData:p,target:F="_self",metafields:G,isDisplayGudgments:M=!1,isDisplayBackImage:J=!1},U)=>{const{productsTab:m=[],productsCard:x=[],title:P,isShowTab:_=!0,tabShape:X="square",isShowTag:Y=!1,isShowOriginalPrice:ee=!0,isShowRecommendedCard:C=!1,...te}=n,[b,H]=(0,s.useState)(""),[f,v]=(0,s.useState)([]),L=(0,s.useRef)(!1),k=(0,s.useRef)(!1),V=(0,s.useRef)(null),ne=(0,s.useRef)(we()),se=(0,W.useMediaQuery)({query:"(max-width: 768px)"}),[ae,B]=(0,Z.useRollout)({threshold:0}),y=f?.length<=1&&M,g=!se&&f?.length<=2&&M,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,a)=>{const l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:a+1}})}})},w=(e,a)=>{if(a){const u=p?.map?.(l=>({...l,isShowRecommended:!0}));v(u?.length?u||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(r=>{const z=h?.products?.find(ie=>ie?.handle===r?.handle);if(z)return{sku:r.sku,isShowRecommended:!1,custom_name:r.custom_name,custom_description:r.custom_description,custom_image:r.custom_image,custom_theme:r.custom_theme,custom_primary_link:r?.custom_primary_link||"",custom_secondary_link:r?.custom_secondary_link||"",...z}})?.filter(r=>r);v(l?.length?l||[]:[])}else v([])};(0,s.useImperativeHandle)(U,()=>V.current),(0,s.useEffect)(()=>{B&&p?.length&&!L.current&&(L.current=!0,E())},[B,p]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&p?.length&&(k.current=!0),_){const e=m?.find(a=>a?.tab===b)||m?.[0];H(e?.tab||""),w(e?.data||[],e?.isShowRecommendedTab);return}w(x,C)}},[p]),(0,s.useEffect)(()=>{if(_){const e=m?.find(a=>a?.tab===b)||m?.[0];w(e?.data||[],e?.isShowRecommendedTab);return}w(x,C)},[h]);const re=ge(b),N=`${ne.current}-${re}`;return(0,o.jsxs)("div",{ref:V,className:(0,q.cn)("shelf-display-wrap text-info-primary w-full",j,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(O.default,{data:{title:P}}),_&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:b,onValueChange:e=>{const a=m?.find(u=>u?.tab===e);if(a){if(H(e),w(a.data||[],a.isShowRecommendedTab),!a.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:de,component_name:he,component_title:n?.title,component_position:1,navigation:e}});return}E()}},shape:X==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:ae,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(K.default,{data:{list:f,configuration:{...te,event:i,isShowTag:Y,isShowOriginalPrice:ee,target:F,metafields:G,itemLength:f?.length,isDisplayBackImage:J}},id:N,className:`${_?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?S.ShelfDisplayHorizontalItem:S.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},N)})]})});$.displayName="ShelfDisplay";var _e=(0,Q.withLayout)($);
+"use strict";"use client";var le=Object.create;var T=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ue=(t,n)=>{for(var i in n)T(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of me(n))!pe.call(t,c)&&c!==i&&T(t,c,{get:()=>n[c],enumerable:!(h=ce(n,c))||h.enumerable});return t};var R=(t,n,i)=>(i=t!=null?le(fe(t)):{},A(n||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),de=t=>A(T({},"__esModule",{value:!0}),t);var ye={};ue(ye,{default:()=>be});module.exports=de(ye);var o=require("react/jsx-runtime"),s=R(require("react")),q=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),O=R(require("../Title/index.js")),K=R(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),W=require("react-responsive"),Z=require("../../hooks/useRollout.js"),S=require("./shelfDisplayItem.js");const he="image",ge="product_shelf",we=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",_e=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,$=s.default.forwardRef(({key:t,data:n,event:i,buildData:h,breakpoints:c,className:j="",recommendedData:p,target:F="_self",metafields:G,isDisplayGudgments:M=!1,isDisplayBackImage:J=!1,...U},X)=>{const{productsTab:m=[],productsCard:x=[],title:P,isShowTab:_=!0,tabShape:Y="square",isShowTag:ee=!1,isShowOriginalPrice:te=!0,isShowRecommendedCard:C=!1,...ne}=n,[b,H]=(0,s.useState)(""),[f,v]=(0,s.useState)([]),L=(0,s.useRef)(!1),k=(0,s.useRef)(!1),V=(0,s.useRef)(null),se=(0,s.useRef)(_e()),ae=(0,W.useMediaQuery)({query:"(max-width: 768px)"}),[re,B]=(0,Z.useRollout)({threshold:0}),y=f?.length<=1&&M,g=!ae&&f?.length<=2&&M,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,a)=>{const l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:a+1}})}})},w=(e,a)=>{if(a){const u=p?.map?.(l=>({...l,isShowRecommended:!0}));v(u?.length?u||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(r=>{const z=h?.products?.find(oe=>oe?.handle===r?.handle);if(z)return{sku:r.sku,isShowRecommended:!1,custom_name:r.custom_name,custom_description:r.custom_description,custom_image:r.custom_image,custom_theme:r.custom_theme,custom_primary_link:r?.custom_primary_link||"",custom_secondary_link:r?.custom_secondary_link||"",...z}})?.filter(r=>r);v(l?.length?l||[]:[])}else v([])};(0,s.useImperativeHandle)(X,()=>V.current),(0,s.useEffect)(()=>{B&&p?.length&&!L.current&&(L.current=!0,E())},[B,p]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&p?.length&&(k.current=!0),_){const e=m?.find(a=>a?.tab===b)||m?.[0];H(e?.tab||""),w(e?.data||[],e?.isShowRecommendedTab);return}w(x,C)}},[p]),(0,s.useEffect)(()=>{if(_){const e=m?.find(a=>a?.tab===b)||m?.[0];w(e?.data||[],e?.isShowRecommendedTab);return}w(x,C)},[h]);const ie=we(b),N=`${se.current}-${ie}`;return(0,o.jsxs)("div",{ref:V,...U,className:(0,q.cn)("shelf-display-wrap text-info-primary w-full",j,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(O.default,{data:{title:P}}),_&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:b,onValueChange:e=>{const a=m?.find(u=>u?.tab===e);if(a){if(H(e),w(a.data||[],a.isShowRecommendedTab),!a.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:he,component_name:ge,component_title:n?.title,component_position:1,navigation:e}});return}E()}},shape:Y==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:re,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(K.default,{data:{list:f,configuration:{...ne,event:i,isShowTag:ee,isShowOriginalPrice:te,target:F,metafields:G,itemLength:f?.length,isDisplayBackImage:J}},id:N,className:`${_?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?S.ShelfDisplayHorizontalItem:S.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},N)})]})});$.displayName="ShelfDisplay";var be=(0,Q.withLayout)($);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\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 [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\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?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\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                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  custom_primary_link: item?.custom_primary_link || '',\n                  custom_secondary_link: item?.custom_secondary_link || '',\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\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        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && productsTab?.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab?.find(item => item?.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n                if (!currentTab.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: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }\n            }}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                  {item?.tab || ''}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\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            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n      ...rest\n    },\n    ref\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 [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\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?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\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                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  custom_primary_link: item?.custom_primary_link || '',\n                  custom_secondary_link: item?.custom_secondary_link || '',\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\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        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn('shelf-display-wrap text-info-primary w-full', className, {\n          'aiui-dark': data?.theme === 'dark',\n        })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && productsTab?.length > 0 && (\n          <Tabs\n            value={tabId}\n            onValueChange={value => {\n              const currentTab = productsTab?.find(item => item?.tab === value)\n              if (currentTab) {\n                setTabId(value)\n                handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n                if (!currentTab.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: value,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }\n            }}\n            shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n          >\n            <TabsList>\n              {productsTab.map(item => (\n                <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n                  {item?.tab || ''}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </Tabs>\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            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts CHANGED Viewed

@@ -73,7 +73,7 @@ export type ShelfDisplayType = {
     theme?: 'light' | 'dark';
     containerProps?: ContainerProps;
 };
-export interface ShelfDisplayProps {
+export interface ShelfDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     data: ShelfDisplayType;
     buildData?: {
         categories: any[];
@@ -82,7 +82,6 @@ export interface ShelfDisplayProps {
     recommendedData?: any[];
     /** 按钮事件*/
     event?: EventType;
-    className?: string;
     key?: string;
     target?: '_self' | '_blank';
     breakpoints?: {

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var D=Object.create;var s=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var w=(e,r)=>{for(var n in r)s(e,n,{get:r[n],enumerable:!0})},d=(e,r,n,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of P(r))!_.call(e,t)&&t!==n&&s(e,t,{get:()=>r[t],enumerable:!(a=S(r,t))||a.enumerable});return e};var k=(e,r,n)=>(n=e!=null?D(T(e)):{},d(r||!e||!e.__esModule?s(n,"default",{value:e,enumerable:!0}):n,e)),v=e=>d(s({},"__esModule",{value:!0}),e);var C={};w(C,{formatVariantPrice:()=>B});module.exports=v(C);var l=k(require("decimal.js")),i=require("../../helpers/index.js");function B({amount:e,baseAmount:r,currencyCode:n,currencyDisplay:a,locale:t,maximumFractionDigits:g,minimumFractionDigits:f,removeTrailingZeros:u}){if(typeof Intl>"u")return{price:`${i.PRICE_SYMBOL[t]}${e}`,basePrice:`${i.PRICE_SYMBOL[t]}${r}`,discount:`${i.PRICE_SYMBOL[t]}${r-e||0}`};const o=r>e;let m=null;const c=(0,i.languageTerritory)(t);if(c){const p=new Intl.NumberFormat(c,{style:"percent"});m=o?p.format((r-e)/r):null}let y;if(o){const p=new l.default(r).sub(e||0).toNumber();y=(0,i.formatPrice)({amount:p,currencyDisplay:a,currencyCode:n||"USD",locale:t,maximumFractionDigits:2})}const b=(0,i.formatPrice)({amount:e,currencyCode:n,currencyDisplay:a,locale:t,removeTrailingZeros:u}),h=o?(0,i.formatPrice)({amount:r,currencyCode:n,currencyDisplay:a,locale:t,maximumFractionDigits:g,minimumFractionDigits:f,removeTrailingZeros:u}):void 0;return{price:b,basePrice:h,discount:m,discountAmount:y}}
+"use strict";var D=Object.create;var s=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},d=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of T(t))!_.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(a=S(t,r))||a.enumerable});return e};var w=(e,t,n)=>(n=e!=null?D(P(e)):{},d(t||!e||!e.__esModule?s(n,"default",{value:e,enumerable:!0}):n,e)),k=e=>d(s({},"__esModule",{value:!0}),e);var B={};v(B,{formatVariantPrice:()=>x});module.exports=k(B);var l=w(require("decimal.js")),i=require("../../helpers/index.js");function x({amount:e,baseAmount:t,currencyCode:n,currencyDisplay:a,locale:r,maximumFractionDigits:g,minimumFractionDigits:b,removeTrailingZeros:p}){if(typeof Intl>"u")return{price:`${i.PRICE_SYMBOL[r]}${e}`,basePrice:`${i.PRICE_SYMBOL[r]}${t}`,discount:`${i.PRICE_SYMBOL[r]}${t-e||0}`};const o=t>e;let m=null;const c=(0,i.languageTerritory)(r);if(c){const u=new Intl.NumberFormat(c,{style:"percent"});m=o?u.format((t-e)/t):null}let y;if(o){const u=new l.default(t).sub(e||0).toNumber();y=(0,i.formatPrice)({amount:u,currencyDisplay:a,currencyCode:n||"USD",locale:r,maximumFractionDigits:2})}const f=(0,i.formatPrice)({amount:e,currencyCode:n,currencyDisplay:a,locale:r,removeTrailingZeros:p}),h=o?(0,i.formatPrice)({amount:t,currencyCode:n,currencyDisplay:a,locale:r,maximumFractionDigits:g,minimumFractionDigits:b,removeTrailingZeros:p}):void 0;return{price:f,basePrice:h,discount:m,discountAmount:y}}
 //# sourceMappingURL=shelfDisplay.js.map

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  currencyDisplay,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  currencyDisplay?: CurrencyDisplayType\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyDisplay,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\n\n  const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        currencyDisplay,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n  custom_primary_link?: string\n  custom_secondary_link?: string\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  custom_image?: string\n  custom_theme?: string\n}\n\nexport type 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  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}\n"],
+  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps, CurrencyDisplayType } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nimport { PRICE_SYMBOL, formatPrice, languageTerritory } from '../../helpers/index.js'\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  currencyDisplay,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  currencyDisplay?: CurrencyDisplayType\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount\n  if (hasDiscount) {\n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyDisplay,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\n\n  const price = formatPrice({ amount, currencyCode, currencyDisplay, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        currencyDisplay,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType, coupon: any) => void\n}\n\nexport interface ShelfDisplayItem {\n  custom_primary_link?: string\n  custom_secondary_link?: string\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  custom_image?: string\n  custom_theme?: string\n}\n\nexport type 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 extends React.HTMLAttributes<HTMLDivElement> {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}\n"],
   "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoB,yBAGpBC,EAA6D,kCAEtD,SAASH,EAAmB,CACjC,OAAAI,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,EASG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAG,eAAaH,CAAM,CAAC,GAAGJ,CAAM,GACvC,UAAW,GAAG,eAAaI,CAAM,CAAC,GAAGH,CAAU,GAC/C,SAAU,GAAG,eAAaG,CAAM,CAAC,GAAGH,EAAaD,GAAU,CAAC,EAC9D,EAGF,MAAMQ,EAAcP,EAAaD,EACjC,IAAIS,EAAW,KACf,MAAMC,KAAgB,qBAAkBN,CAAM,EAC9C,GAAIM,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQV,EAAaD,GAAUC,CAAU,EAAI,IACvF,CAEA,IAAIW,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAI,EAAAC,QAAQb,CAAU,EAAE,IAAID,GAAU,CAAC,EAAE,SAAS,EAC1EY,KAAiB,eAAY,CAC3B,OAAQC,EACR,gBAAAV,EACA,aAAcD,GAAgB,MAC9B,OAAAE,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMW,KAAQ,eAAY,CAAE,OAAAf,EAAQ,aAAAE,EAAc,gBAAAC,EAAiB,OAAAC,EAAQ,oBAAAG,CAAoB,CAAC,EAC1FS,EAAYR,KACd,eAAY,CACV,OAAQP,EACR,aAAAC,EACA,gBAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAQ,EAAO,UAAAC,EAAW,SAAAP,EAAU,eAAAG,CAAe,CACtD",
   "names": ["shelfDisplay_exports", "__export", "formatVariantPrice", "__toCommonJS", "import_decimal", "import_helpers", "amount", "baseAmount", "currencyCode", "currencyDisplay", "locale", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "Decimal", "price", "basePrice"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var O=Object.create;var h=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var tt=(t,r)=>{for(var n in r)h(t,n,{get:r[n],enumerable:!0})},G=(t,r,n,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of W(r))!Z.call(t,o)&&o!==n&&h(t,o,{get:()=>r[o],enumerable:!(l=Q(r,o))||l.enumerable});return t};var et=(t,r,n)=>(n=t!=null?O(X(t)):{},G(r||!t||!t.__esModule?h(n,"default",{value:t,enumerable:!0}):n,t)),rt=t=>G(h({},"__esModule",{value:!0}),t);var at={};tt(at,{componentName:()=>ot,componentType:()=>nt,default:()=>lt});module.exports=rt(at);var s=require("react/jsx-runtime"),e=et(require("react")),g=require("gsap"),N=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),u=require("../../helpers/utils.js"),w=require("../../components/index.js"),C=require("../../shared/Styles.js"),P=require("react-intersection-observer");const nt="copy",ot="brand_slogan";function st(t=[],r=3){const n=[];for(let l=0;l<t.length;l+=r)n.push(t.slice(l,l+r));return n}const j=e.default.forwardRef(({data:t,className:r=""},n)=>{const{title:l,features:o=[],tag:V="h1",featureChunkSize:k=3}=t,[y,I]=e.default.useState(0),[F,b]=e.default.useState(!0),M=(0,e.useRef)(null),T=(0,e.useRef)(null),E=(0,e.useRef)(null),d=st(o,k),S=d.length,p=o.length>k,U=p?[...d,d[0]]:d,R=40;(0,e.useImperativeHandle)(n,()=>M.current);const{ref:A,inView:L}=(0,P.useInView)();e.default.useEffect(()=>{if(!p)return;const a=setInterval(()=>{I(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[S,p]),e.default.useEffect(()=>{if(p)if(y===S){const a=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(a)}else b(!0)},[y,S,p]);const f=(0,e.useRef)(null),$=(0,e.useRef)(null),x=(0,e.useRef)(null);return(0,e.useEffect)(()=>{g.gsap.registerPlugin(v.ScrollTrigger,N.SplitText);function a(){if(!f.current)return;x.current=new N.SplitText(f.current,{type:"words",wordsClass:"word"});const i=f.current?.clientHeight||100,m=x.current.words;g.gsap.set(m,{opacity:0}),T.current=v.ScrollTrigger.create({trigger:f.current,start:"bottom bottom-=4%",end:`bottom+=${i*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const Y=c.progress,z=m.length,_=1/z,D=.5;m.forEach((q,B)=>{const J=B/z*(1-D),K=_*(1+D);let H=(Y-J)/K;H=Math.max(0,Math.min(H,1)),g.gsap.set(q,{opacity:H})})}}),o&&o.length>0&&(E.current=v.ScrollTrigger.create({trigger:$.current,start:`bottom+=${i*2}px bottom-=6%`,end:`bottom+=${i*2+100}px bottom-=6%`,onUpdate:c=>{g.gsap.set($.current,{opacity:c.progress})}}))}return L&&a(),()=>{x.current&&x.current.revert(),T.current&&T.current.kill(),E.current&&E.current.kill()}},[L]),(0,s.jsx)("div",{ref:A,children:(0,s.jsxs)("div",{ref:M,className:(0,u.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",r),children:[(0,s.jsx)(w.Heading,{ref:f,as:V,size:2,weight:"bold",align:"left",className:(0,u.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]"),html:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,u.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${R}px]`),children:(0,s.jsx)("div",{className:(0,u.cn)(["flex flex-col",F?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*R}px)`},children:U.map((a,i)=>(0,s.jsx)("div",{className:(0,u.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${R}px]`),children:a.map((m,c)=>(0,s.jsxs)(e.default.Fragment,{children:[c>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:m.title})]},c))},i))})})]})})});j.displayName="Slogan";var lt=(0,C.withLayout)(j);
+"use strict";"use client";var Q=Object.create;var v=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,tt=Object.prototype.hasOwnProperty;var et=(t,r)=>{for(var n in r)v(t,n,{get:r[n],enumerable:!0})},j=(t,r,n,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of X(r))!tt.call(t,l)&&l!==n&&v(t,l,{get:()=>r[l],enumerable:!(s=W(r,l))||s.enumerable});return t};var rt=(t,r,n)=>(n=t!=null?Q(Z(t)):{},j(r||!t||!t.__esModule?v(n,"default",{value:t,enumerable:!0}):n,t)),nt=t=>j(v({},"__esModule",{value:!0}),t);var it={};et(it,{componentName:()=>st,componentType:()=>ot,default:()=>at});module.exports=nt(it);var o=require("react/jsx-runtime"),e=rt(require("react")),d=require("gsap"),k=require("gsap/dist/SplitText"),w=require("gsap/dist/ScrollTrigger"),p=require("../../helpers/utils.js"),y=require("../../components/index.js"),P=require("../../shared/Styles.js"),V=require("react-intersection-observer");const ot="copy",st="brand_slogan";function lt(t=[],r=3){const n=[];for(let s=0;s<t.length;s+=r)n.push(t.slice(s,s+r));return n}const C=e.default.forwardRef(({data:t,className:r="",...n},s)=>{const{title:l,features:c=[],tag:F="h1",featureChunkSize:I=3}=t,[b,M]=e.default.useState(0),[U,T]=e.default.useState(!0),L=(0,e.useRef)(null),E=(0,e.useRef)(null),S=(0,e.useRef)(null),x=lt(c,I),R=x.length,f=c.length>I,A=f?[...x,x[0]]:x,H=40;(0,e.useImperativeHandle)(s,()=>L.current);const{ref:Y,inView:$}=(0,V.useInView)();e.default.useEffect(()=>{if(!f)return;const a=setInterval(()=>{M(i=>i+1),T(!0)},3e3);return()=>clearInterval(a)},[R,f]),e.default.useEffect(()=>{if(f)if(b===R){const a=setTimeout(()=>{T(!1),M(0)},500);return()=>clearTimeout(a)}else T(!0)},[b,R,f]);const m=(0,e.useRef)(null),z=(0,e.useRef)(null),h=(0,e.useRef)(null);return(0,e.useEffect)(()=>{d.gsap.registerPlugin(w.ScrollTrigger,k.SplitText);function a(){if(!m.current)return;h.current=new k.SplitText(m.current,{type:"words",wordsClass:"word"});const i=m.current?.clientHeight||100,g=h.current.words;d.gsap.set(g,{opacity:0}),E.current=w.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${i*1.5}px bottom-=4%`,scrub:!0,onUpdate:u=>{const _=u.progress,D=g.length,q=1/D,G=.5;g.forEach((B,J)=>{const K=J/D*(1-G),O=q*(1+G);let N=(_-K)/O;N=Math.max(0,Math.min(N,1)),d.gsap.set(B,{opacity:N})})}}),c&&c.length>0&&(S.current=w.ScrollTrigger.create({trigger:z.current,start:`bottom+=${i*2}px bottom-=6%`,end:`bottom+=${i*2+100}px bottom-=6%`,onUpdate:u=>{d.gsap.set(z.current,{opacity:u.progress})}}))}return $&&a(),()=>{h.current&&h.current.revert(),E.current&&E.current.kill(),S.current&&S.current.kill()}},[$]),(0,o.jsx)("div",{ref:Y,children:(0,o.jsxs)("div",{ref:L,...n,className:(0,p.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",r),children:[(0,o.jsx)(y.Heading,{ref:m,as:F,size:2,weight:"bold",align:"left",className:(0,p.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]"),html:l}),c&&c.length>0&&(0,o.jsx)("div",{className:(0,p.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${H}px]`),children:(0,o.jsx)("div",{className:(0,p.cn)(["flex flex-col",U?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*H}px)`},children:A.map((a,i)=>(0,o.jsx)("div",{className:(0,p.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${H}px]`),children:a.map((g,u)=>(0,o.jsxs)(e.default.Fragment,{children:[u>0&&(0,o.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,o.jsx)(y.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:g.title})]},u))},i))})})]})})});C.displayName="Slogan";var at=(0,P.withLayout)(C);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } 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, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], tag = 'h1', featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\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}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      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\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: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as={tag}\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
-  "mappings": "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",
-  "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_react_intersection_observer", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "tag", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } 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, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '', ...rest }, ref) => {\n  const { title, features = [], tag = 'h1', featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\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}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      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\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: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as={tag}\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-[1.1]'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
+  "mappings": "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",
+  "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_react_intersection_observer", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "rest", "ref", "title", "features", "tag", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index"]
 }

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

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { Theme } from '../../types/props.js';
 export interface Feature {
     /**
@@ -5,7 +6,7 @@ export interface Feature {
      */
     title: string;
 }
-export interface SloganProps {
+export interface SloganProps extends React.HTMLAttributes<HTMLDivElement> {
     data: {
         /**
          * 主标题
@@ -25,8 +26,4 @@ export interface SloganProps {
         theme?: Theme;
         tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     };
-    /**
-     * 自定义类名
-     */
-    className?: string;
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/types.ts"],
-  "sourcesContent": ["import type { Theme } from '../../types/props.js'\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface SloganProps {\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5206\u7EC4\u5927\u5C0F \u9ED8\u8BA4\u4E3A3\n     */\n    featureChunkSize?: number\n    /**\n     * \u7279\u6027\u5217\u8868\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\n     */\n    theme?: Theme\n\n    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type React from 'react'\nimport type { Theme } from '../../types/props.js'\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface SloganProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title: string\n    /**\n     * \u7279\u6027\u5206\u7EC4\u5927\u5C0F \u9ED8\u8BA4\u4E3A3\n     */\n    featureChunkSize?: number\n    /**\n     * \u7279\u6027\u5217\u8868\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\n     */\n    theme?: Theme\n\n    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var S=(e,p)=>{for(var t in p)a(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,r)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of n(p))!y.call(e,o)&&o!==t&&a(e,o,{get:()=>p[o],enumerable:!(r=h(p,o))||r.enumerable});return e};var v=(e,p,t)=>(t=e!=null?m(u(e)):{},s(p||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>s(a({},"__esModule",{value:!0}),e);var w={};S(w,{default:()=>k});module.exports=x(w);var l=require("react/jsx-runtime"),f=v(require("react")),i=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const c=f.default.forwardRef(({className:e,data:p},t)=>{const{space:r="default"}=p;return(0,l.jsx)("div",{className:(0,i.cn)("ipc_spacer",r==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",r==="fixed"&&"h-16",e)})});c.displayName="Spacer";var k=(0,d.withLayout)(c);
+"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var S=(e,p)=>{for(var t in p)a(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,o)=>{if(p&&typeof p=="object"||typeof p=="function")for(let r of n(p))!y.call(e,r)&&r!==t&&a(e,r,{get:()=>p[r],enumerable:!(o=h(p,r))||o.enumerable});return e};var v=(e,p,t)=>(t=e!=null?m(u(e)):{},s(p||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>s(a({},"__esModule",{value:!0}),e);var w={};S(w,{default:()=>k});module.exports=x(w);var l=require("react/jsx-runtime"),f=v(require("react")),i=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const c=f.default.forwardRef(({className:e,data:p,...t},o)=>{const{space:r="default"}=p;return(0,l.jsx)("div",{ref:o,...t,className:(0,i.cn)("ipc_spacer",r==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",r==="fixed"&&"h-16",e)})});c.displayName="Spacer";var k=(0,d.withLayout)(c);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Spacer/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }, ref) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        'ipc_spacer',\n        space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withLayout(Spacer)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,EAAGC,IAAQ,CACzF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAIF,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACAE,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBH,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
-  "names": ["Spacer_exports", "__export", "Spacer_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "Spacer", "React", "className", "data", "ref", "space"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data, ...rest }, ref) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      ref={ref}\n      {...rest}\n      className={cn(\n        'ipc_spacer',\n        space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withLayout(Spacer)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAAQ,CAClG,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAIH,EAC9B,SACE,OAAC,OACC,IAAKE,EACJ,GAAGD,EACJ,aAAW,MACT,aACAE,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBJ,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
+  "names": ["Spacer_exports", "__export", "Spacer_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "Spacer", "React", "className", "data", "rest", "ref", "space"]
 }

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

@@ -1,10 +1,6 @@
 import type { ComponentCommonProps } from '../../types/props.js';
-export interface SpacerProps extends ComponentCommonProps {
+export interface SpacerProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {
     data: {
         space: 'default' | 'fixed';
     };
-    /**
-     * 自定义类名
-     */
-    className?: string;
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Spacer/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface SpacerProps extends ComponentCommonProps {\n  data: {\n    space: 'default' | 'fixed'\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface SpacerProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    space: 'default' | 'fixed'\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/Specs/index.d.ts CHANGED Viewed

@@ -1,5 +1,11 @@
 import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement> & {
+export interface SpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    data?: any;
+    buildData?: any;
+    onChange?: (product: any, index: number) => void;
+    onSecondaryChange?: (data: any) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<SpecsProps & React.RefAttributes<HTMLDivElement> & {
     style?: string | React.CSSProperties;
     container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var W=Object.create;var h=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(n,o)=>{for(var d in o)h(n,d,{get:o[d],enumerable:!0})},A=(n,o,d,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of J(o))!X.call(n,x)&&x!==d&&h(n,x,{get:()=>o[x],enumerable:!(m=G(o,x))||m.enumerable});return n};var C=(n,o,d)=>(d=n!=null?W(K(n)):{},A(o||!n||!n.__esModule?h(d,"default",{value:n,enumerable:!0}):d,n)),Z=n=>A(h({},"__esModule",{value:!0}),n);var te={};Y(te,{default:()=>ee});module.exports=Z(te);var e=require("react/jsx-runtime"),F=C(require("./dropdown.js")),H=require("../AiuiProvider/index.js"),R=require("react-responsive"),p=require("react"),I=require("../../shared/Styles.js"),O=require("../ShelfDisplay/shelfDisplay.js"),c=require("../../components/index.js"),g=C(require("react"));const T=g.default.forwardRef((n,o)=>{const{data:d,buildData:m,onChange:x,onSecondaryChange:se}=n||{},y=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),[r,k]=(0,p.useState)({}),[P,_]=(0,p.useState)([]),[N,D]=(0,p.useState)(!1),[w,L]=(0,p.useState)({}),M=(0,g.useRef)(null),{locale:$="us",currencyDisplay:U}=(0,H.useAiuiContext)(),{LeftMenu:S,RightMenu:E,DefaultSelectMenu:v}=(0,p.useMemo)(()=>d?.data||{},[d?.data]),V=t=>{try{const l=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(l)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},B=(t,s)=>{const l=t?.variants?.find?.(f=>f?.sku===t?.sku),a=l?.coupons?.[0],{price:u,basePrice:i}=(0,O.formatVariantPrice)({locale:$||"us",amount:a?a?.variant_price4wscode:l?.price,baseAmount:a?l?.price:0,currencyDisplay:U,currencyCode:t?.price?.currencyCode||"USD"}),b=typeof v?.buttonText=="string"?v?.buttonText:v?.buttonText?.[String(s)]||"";return(0,e.jsxs)("div",{className:"specs-sku-node-wrap box-border",children:[(0,e.jsxs)(c.Text,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(r||{})?.length<=2)return null;L({...w,[s]:!w?.[s]})},children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:r?.[s]?.name||"",children:r?.[s]?.name||""}),Object.keys(r||{})?.length>2?(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),(0,e.jsx)(F.default,{index:s,list:P,active:r,setActive:k,visible:w,setVisible:L})]}),(0,e.jsx)("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:(0,e.jsx)(c.Picture,{source:l?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),(0,e.jsx)("div",{className:"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold",children:(0,e.jsx)("div",{className:"lg-desktop:min-h-[32px] flex  min-h-[28px] items-center",children:l?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"specs-sku-node-price text-[#080A0F]",children:u||""}),i&&(0,e.jsx)("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:i})]}):null})}),b?(0,e.jsx)(c.Button,{onClick:()=>{x?.(t,s)},className:"specs-sku-node-button",children:b}):null]})},z=t=>t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(c.Picture,{source:t?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:V(t)?(0,e.jsx)(c.Picture,{source:t,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t||""}})}),j=t=>t.map((s,l)=>{const a=l===0;return(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6]  specs-product-node-wrap",children:[(0,e.jsx)(c.Heading,{as:"h3",html:s||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${N?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(r)?.map?.(u=>{const i=r?.[u],b=E?.menus?.find?.(f=>f?.handle===i?.handle)?.subTitle;return z(b?.[s])})})]},s)}),q=t=>{if(!r)return;const{subTitle:s,isProduct:l}=t;return l?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[t?.title&&(0,e.jsx)(c.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${N?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(r)?.map((a,u)=>{const i=r?.[a],b=m?.products?.find?.(f=>f?.handle===i?.handle);return(0,e.jsx)("div",{children:B({...b,item:a,sku:i?.sku},u)},a)})})]}),t?.categoryLabel&&(0,e.jsx)(c.Heading,{size:2,as:"h4",html:t?.categoryLabel||"",className:"desktop:p-6 specs-item-product-category py-6"}),s?.length?j(s):null]}):j(s)};return(0,g.useImperativeHandle)(o,()=>M.current),(0,p.useEffect)(()=>{if(!m?.products?.length)return;const t=v?.sku?.split?.(",")||[];let s={};t?.forEach?.((a,u)=>{const i=m?.products?.find?.(b=>{if(b?.variants?.find?.(Q=>Q?.sku===a))return!0});i&&(s={...s,[u]:{sku:a,name:i?.name||i?.title,handle:i?.handle}})});const l=m?.products?.filter(a=>E?.menus?.find(u=>u?.handle===a?.handle));k(s),_(l),D(t?.length>2)},[m]),(0,p.useEffect)(()=>{if(y){const t=Object.keys(r||{});if(t?.length>2){const s=t?.slice?.(0,2);let l={};s?.forEach?.(a=>{l={...l,[a]:r?.[a]}}),D(!1),k(l)}}},[y]),(0,e.jsx)("div",{className:"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",ref:M,children:S?.data?(0,e.jsx)("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:S?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:q(t)},s))}):null})});T.displayName="Specs";var ee=(0,I.withLayout)(T);
+"use strict";"use client";var K=Object.create;var v=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var te=(n,o)=>{for(var p in o)v(n,p,{get:o[p],enumerable:!0})},T=(n,o,p,h)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of Y(o))!ee.call(n,x)&&x!==p&&v(n,x,{get:()=>o[x],enumerable:!(h=X(o,x))||h.enumerable});return n};var A=(n,o,p)=>(p=n!=null?K(Z(n)):{},T(o||!n||!n.__esModule?v(p,"default",{value:n,enumerable:!0}):p,n)),se=n=>T(v({},"__esModule",{value:!0}),n);var oe={};te(oe,{default:()=>ne});module.exports=se(oe);var e=require("react/jsx-runtime"),F=A(require("./dropdown.js")),H=require("../AiuiProvider/index.js"),P=require("react-responsive"),d=require("react"),R=require("../../shared/Styles.js"),O=require("../ShelfDisplay/shelfDisplay.js"),c=require("../../components/index.js"),I=require("../../helpers/index.js"),f=A(require("react"));const j=f.default.forwardRef(({data:n,buildData:o,onChange:p,onSecondaryChange:h,className:x,..._},$)=>{const w=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),[r,k]=(0,d.useState)({}),[U,V]=(0,d.useState)([]),[N,L]=(0,d.useState)(!1),[y,M]=(0,d.useState)({}),S=(0,f.useRef)(null),{locale:B="us",currencyDisplay:z}=(0,H.useAiuiContext)(),{LeftMenu:D,RightMenu:E,DefaultSelectMenu:g}=(0,d.useMemo)(()=>n?.data||{},[n?.data]),q=t=>{try{const a=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(a)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},Q=(t,s)=>{const a=t?.variants?.find?.(b=>b?.sku===t?.sku),l=a?.coupons?.[0],{price:u,basePrice:i}=(0,O.formatVariantPrice)({locale:B||"us",amount:l?l?.variant_price4wscode:a?.price,baseAmount:l?a?.price:0,currencyDisplay:z,currencyCode:t?.price?.currencyCode||"USD"}),m=typeof g?.buttonText=="string"?g?.buttonText:g?.buttonText?.[String(s)]||"";return(0,e.jsxs)("div",{className:"specs-sku-node-wrap box-border",children:[(0,e.jsxs)(c.Text,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(r||{})?.length<=2)return null;M({...y,[s]:!y?.[s]})},children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:r?.[s]?.name||"",children:r?.[s]?.name||""}),Object.keys(r||{})?.length>2?(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),(0,e.jsx)(F.default,{index:s,list:U,active:r,setActive:k,visible:y,setVisible:M})]}),(0,e.jsx)("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:(0,e.jsx)(c.Picture,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),(0,e.jsx)("div",{className:"lg-desktop:text-2xl mb-2 mt-6 text-xl font-bold",children:(0,e.jsx)("div",{className:"lg-desktop:min-h-[32px] flex  min-h-[28px] items-center",children:a?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"specs-sku-node-price text-[#080A0F]",children:u||""}),i&&(0,e.jsx)("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:i})]}):null})}),m?(0,e.jsx)(c.Button,{onClick:()=>{p?.(t,s)},className:"specs-sku-node-button",children:m}):null]})},W=t=>t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(c.Picture,{source:t?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:q(t)?(0,e.jsx)(c.Picture,{source:t,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:t||""}})}),C=t=>t.map((s,a)=>{const l=a===0;return(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6]  specs-product-node-wrap",children:[(0,e.jsx)(c.Heading,{as:"h3",html:s||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${N?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(r)?.map?.(u=>{const i=r?.[u],m=E?.menus?.find?.(b=>b?.handle===i?.handle)?.subTitle;return W(m?.[s])})})]},s)}),G=t=>{if(!r)return;const{subTitle:s,isProduct:a}=t;return a?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[t?.title&&(0,e.jsx)(c.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${N?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(r)?.map((l,u)=>{const i=r?.[l],m=o?.products?.find?.(b=>b?.handle===i?.handle);return(0,e.jsx)("div",{children:Q({...m,item:l,sku:i?.sku},u)},l)})})]}),t?.categoryLabel&&(0,e.jsx)(c.Heading,{size:2,as:"h4",html:t?.categoryLabel||"",className:"desktop:p-6 specs-item-product-category py-6"}),s?.length?C(s):null]}):C(s)};return(0,f.useImperativeHandle)($,()=>S.current),(0,d.useEffect)(()=>{if(!o?.products?.length)return;const t=g?.sku?.split?.(",")||[];let s={};t?.forEach?.((l,u)=>{const i=o?.products?.find?.(m=>{if(m?.variants?.find?.(J=>J?.sku===l))return!0});i&&(s={...s,[u]:{sku:l,name:i?.name||i?.title,handle:i?.handle}})});const a=o?.products?.filter(l=>E?.menus?.find(u=>u?.handle===l?.handle));k(s),V(a),L(t?.length>2)},[o]),(0,d.useEffect)(()=>{if(w){const t=Object.keys(r||{});if(t?.length>2){const s=t?.slice?.(0,2);let a={};s?.forEach?.(l=>{a={...a,[l]:r?.[l]}}),L(!1),k(a)}}},[w]),(0,e.jsx)("div",{..._,className:(0,I.cn)("specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",x),ref:S,children:D?.data?(0,e.jsx)("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:D?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:G(t)},s))}):null})});j.displayName="Specs";var ne=(0,R.withLayout)(j);
 //# sourceMappingURL=index.js.map