npm - @anker-in/headless-ui - Versions diffs - 1.1.5 → 1.1.7-alpha.1763622192862 - Mend

@anker-in/headless-ui 1.1.5 → 1.1.7-alpha.1763622192862

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

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 }) => {\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,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACAC,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBF,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", "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 }, 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"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var x=Object.create;var l=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var v=(e,r)=>{for(var o in r)l(e,o,{get:r[o],enumerable:!0})},u=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of M(r))!P.call(e,i)&&i!==o&&l(e,i,{get:()=>r[i],enumerable:!(n=B(r,i))||n.enumerable});return e};var y=(e,r,o)=>(o=e!=null?x(E(e)):{},u(r||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>u(l({},"__esModule",{value:!0}),e);var h={};v(h,{default:()=>b});module.exports=N(h);var f=require("react/jsx-runtime"),t=y(require("react")),m=require("../../helpers/utils.js"),w=require("swiper/react"),s=require("swiper/modules");const c=t.default.forwardRef(({data:e,breakpoints:r,Slide:o,className:n,id:i,itemClassName:d})=>{const[V,S]=(0,t.useState)(!0),[k,g]=(0,t.useState)(!1);return(0,f.jsx)(w.Swiper,{className:(0,m.cn)(n),navigation:{nextEl:`.${i}-custom-swiper-button-next`,prevEl:`.${i}-custom-swiper-button-prev`},onProgress:p=>{S(p.isBeginning),g(p.isEnd)},modules:[s.Navigation,s.FreeMode,s.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:r||{0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,slidesPerView:1.2,freeMode:!1},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},children:e?.list?.map((p,a)=>(0,f.jsx)(w.SwiperSlide,{className:(0,m.cn)("!flex !h-[unset]",d),children:(0,f.jsx)(o,{data:p,configuration:e?.configuration?{...e?.configuration,index:a}:{index:a},jIndex:a})},i+"SwiperSlide"+a))})});c.displayName="SwiperBox";var b=c;
+"use strict";"use client";var x=Object.create;var l=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var v=(e,r)=>{for(var o in r)l(e,o,{get:r[o],enumerable:!0})},u=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of M(r))!P.call(e,i)&&i!==o&&l(e,i,{get:()=>r[i],enumerable:!(n=B(r,i))||n.enumerable});return e};var y=(e,r,o)=>(o=e!=null?x(E(e)):{},u(r||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),N=e=>u(l({},"__esModule",{value:!0}),e);var h={};v(h,{default:()=>b});module.exports=N(h);var f=require("react/jsx-runtime"),t=y(require("react")),m=require("../../helpers/utils.js"),w=require("swiper/react"),s=require("swiper/modules");const c=t.default.forwardRef(({data:e,breakpoints:r,Slide:o,className:n,id:i,itemClassName:d},V)=>{const[k,S]=(0,t.useState)(!0),[R,g]=(0,t.useState)(!1);return(0,f.jsx)(w.Swiper,{className:(0,m.cn)(n),navigation:{nextEl:`.${i}-custom-swiper-button-next`,prevEl:`.${i}-custom-swiper-button-prev`},onProgress:p=>{S(p.isBeginning),g(p.isEnd)},modules:[s.Navigation,s.FreeMode,s.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:r||{0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,slidesPerView:1.2,freeMode:!1},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},children:e?.list?.map((p,a)=>(0,f.jsx)(w.SwiperSlide,{className:(0,m.cn)("!flex !h-[unset]",d),children:(0,f.jsx)(o,{data:p,configuration:e?.configuration?{...e?.configuration,index:a}:{index:a},jIndex:a})},i+"SwiperSlide"+a))})});c.displayName="SwiperBox";var b=c;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SwiperBox/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(\n  ({ data, breakpoints, Slide, className, id, itemClassName }) => {\n    const [isStart, setStart] = useState(true)\n    const [isEnd, setEnd] = useState(false)\n\n    return (\n      <Swiper\n        className={cn(className)}\n        navigation={{\n          nextEl: `.${id}-custom-swiper-button-next`,\n          prevEl: `.${id}-custom-swiper-button-prev`,\n        }}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        modules={[Navigation, FreeMode, Mousewheel]}\n        freeMode={true}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={\n          breakpoints || {\n            0: {\n              spaceBetween: 12,\n              slidesPerView: 1,\n              freeMode: false,\n            },\n            374: {\n              spaceBetween: 12,\n              slidesPerView: 1.2,\n              freeMode: false,\n            },\n            768: {\n              spaceBetween: 16,\n              slidesPerView: 2,\n              freeMode: false,\n            },\n          }\n        }\n      >\n        {data?.list?.map((item, jIndex) => (\n          <SwiperSlide key={id + 'SwiperSlide' + jIndex} className={cn('!flex !h-[unset]', itemClassName)}>\n            <Slide\n              data={item}\n              configuration={data?.configuration ? { ...data?.configuration, index: jIndex } : { index: jIndex }}\n              jIndex={jIndex}\n            />\n          </SwiperSlide>\n        ))}\n      </Swiper>\n    )\n  }\n)\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDY,IAAAI,EAAA,6BAnDZC,EAAgC,oBAChCC,EAAmB,kCAGnBD,EAAoC,wBACpCE,EAAiD,0BAGjD,MAAMC,EAAY,EAAAC,QAAM,WACtB,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,EAAI,cAAAC,CAAc,IAAM,CAC9D,KAAM,CAACC,EAASC,CAAQ,KAAI,YAAS,EAAI,EACnC,CAACC,EAAOC,CAAM,KAAI,YAAS,EAAK,EAEtC,SACE,OAAC,UACC,aAAW,MAAGN,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYM,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAAC,aAAY,WAAU,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACET,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,IACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACW,EAAMC,OACtB,OAAC,eAA8C,aAAW,MAAG,mBAAoBP,CAAa,EAC5F,mBAACH,EAAA,CACC,KAAMS,EACN,cAAeX,GAAM,cAAgB,CAAE,GAAGA,GAAM,cAAe,MAAOY,CAAO,EAAI,CAAE,MAAOA,CAAO,EACjG,OAAQA,EACV,GALgBR,EAAK,cAAgBQ,CAMvC,CACD,EACH,CAEJ,CACF,EAEAd,EAAU,YAAc,YAExB,IAAON,EAAQM",
-  "names": ["SwiperBox_exports", "__export", "SwiperBox_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_modules", "SwiperBox", "React", "data", "breakpoints", "Slide", "className", "id", "itemClassName", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex"]
+  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(\n  ({ data, breakpoints, Slide, className, id, itemClassName }, ref) => {\n    const [isStart, setStart] = useState(true)\n    const [isEnd, setEnd] = useState(false)\n\n    return (\n      <Swiper\n        className={cn(className)}\n        navigation={{\n          nextEl: `.${id}-custom-swiper-button-next`,\n          prevEl: `.${id}-custom-swiper-button-prev`,\n        }}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        modules={[Navigation, FreeMode, Mousewheel]}\n        freeMode={true}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={\n          breakpoints || {\n            0: {\n              spaceBetween: 12,\n              slidesPerView: 1,\n              freeMode: false,\n            },\n            374: {\n              spaceBetween: 12,\n              slidesPerView: 1.2,\n              freeMode: false,\n            },\n            768: {\n              spaceBetween: 16,\n              slidesPerView: 2,\n              freeMode: false,\n            },\n          }\n        }\n      >\n        {data?.list?.map((item, jIndex) => (\n          <SwiperSlide key={id + 'SwiperSlide' + jIndex} className={cn('!flex !h-[unset]', itemClassName)}>\n            <Slide\n              data={item}\n              configuration={data?.configuration ? { ...data?.configuration, index: jIndex } : { index: jIndex }}\n              jIndex={jIndex}\n            />\n          </SwiperSlide>\n        ))}\n      </Swiper>\n    )\n  }\n)\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDY,IAAAI,EAAA,6BAnDZC,EAAgC,oBAChCC,EAAmB,kCAGnBD,EAAoC,wBACpCE,EAAiD,0BAGjD,MAAMC,EAAY,EAAAC,QAAM,WACtB,CAAC,CAAE,KAAAC,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,EAAI,cAAAC,CAAc,EAAGC,IAAQ,CACnE,KAAM,CAACC,EAASC,CAAQ,KAAI,YAAS,EAAI,EACnC,CAACC,EAAOC,CAAM,KAAI,YAAS,EAAK,EAEtC,SACE,OAAC,UACC,aAAW,MAAGP,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYO,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAAC,aAAY,WAAU,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACEV,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,IACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACY,EAAMC,OACtB,OAAC,eAA8C,aAAW,MAAG,mBAAoBR,CAAa,EAC5F,mBAACH,EAAA,CACC,KAAMU,EACN,cAAeZ,GAAM,cAAgB,CAAE,GAAGA,GAAM,cAAe,MAAOa,CAAO,EAAI,CAAE,MAAOA,CAAO,EACjG,OAAQA,EACV,GALgBT,EAAK,cAAgBS,CAMvC,CACD,EACH,CAEJ,CACF,EAEAf,EAAU,YAAc,YAExB,IAAON,EAAQM",
+  "names": ["SwiperBox_exports", "__export", "SwiperBox_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_modules", "SwiperBox", "React", "data", "breakpoints", "Slide", "className", "id", "itemClassName", "ref", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var J=Object.create;var d=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Q(e))!X.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(c=K(e,o))||c.enumerable});return t};var Z=(t,e,n)=>(n=t!=null?J(W(t)):{},M(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),tt=t=>M(d({},"__esModule",{value:!0}),t);var rt={};Y(rt,{default:()=>et});module.exports=tt(rt);var i=require("react/jsx-runtime"),r=Z(require("react")),p=require("gsap"),x=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),k=require("../../helpers/utils.js"),z=require("../../components/index.js"),P=require("../../shared/Styles.js"),S=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer");const E="link",$="title",D=r.default.forwardRef(({data:t,className:e,as:n="h2",weight:c="bold"},o)=>{const{title:u,caption:f,theme:b,extensions:m,align:g="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:V,inView:R}=(0,I.useInView)();return(0,r.useImperativeHandle)(o,()=>y.current),(0,r.useEffect)(()=>{p.gsap.registerPlugin(x.SplitText,T.ScrollTrigger);function B(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new x.SplitText(l.current,{type:"words",wordsClass:"word"});const h=s.current.words;p.gsap.set(h,{opacity:0}),a.current=T.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const C=j.progress,L=h.length||1,F=.5,w=1/L,N=w*(1-F),H=(L-1)*N+w,O=Math.min(1,H>0?C/H:0);h.forEach((_,q)=>{const A=q*N,G=w;let v=(O-A)/G;v=Math.max(0,Math.min(1,v)),p.gsap.set(_,{opacity:v})})}})}return R&&B(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[R]),(u||f)&&(0,i.jsxs)("div",{id:m?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:y,children:[(0,i.jsx)("div",{ref:V,className:(0,k.cn)("flex-1 space-y-4",e,{"aiui-dark":b==="dark","text-center":g==="center","text-right":g==="right","text-left":g==="left"}),children:(0,i.jsx)(z.Heading,{ref:l,as:n,size:4,html:f||u,weight:c})}),m?.textLink&&(0,i.jsxs)("a",{className:(0,k.cn)({"aiui-dark":b==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(m?.link,`${E}_${$}`),"data-headless-type-name":`${E}#${$}`,"data-headless-title-desc-button":`${u}#${f}`,children:[(0,i.jsx)("div",{className:"flex-1 truncate whitespace-nowrap",children:m?.textLink}),(0,i.jsx)("div",{className:"size-6",children:(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})})]})]})});D.displayName="Title";var et=(0,P.withLayout)(D);
+"use strict";"use client";var G=Object.create;var d=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!X.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(c=J(e,o))||c.enumerable});return t};var Z=(t,e,n)=>(n=t!=null?G(Q(t)):{},M(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),tt=t=>M(d({},"__esModule",{value:!0}),t);var rt={};Y(rt,{default:()=>et});module.exports=tt(rt);var i=require("react/jsx-runtime"),r=Z(require("react")),p=require("gsap"),x=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),k=require("../../helpers/utils.js"),z=require("../../components/index.js"),P=require("../../shared/Styles.js"),S=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer");const E="link",$="title",D=r.default.forwardRef(({data:t,className:e,as:n="h2",weight:c="bold"},o)=>{const{title:u,caption:f,theme:b,extensions:m,align:g="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:V,inView:L}=(0,I.useInView)();return(0,r.useImperativeHandle)(o,()=>y.current),(0,r.useEffect)(()=>{p.gsap.registerPlugin(x.SplitText,T.ScrollTrigger);function B(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new x.SplitText(l.current,{type:"words",wordsClass:"word"});const h=s.current.words;p.gsap.set(h,{opacity:0}),a.current=T.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const C=j.progress,R=h.length||1,F=.5,v=1/R,N=v*(1-F),H=(R-1)*N+v,O=Math.min(1,H>0?C/H:0);h.forEach((W,_)=>{const q=_*N,A=v;let w=(O-q)/A;w=Math.max(0,Math.min(1,w)),p.gsap.set(W,{opacity:w})})}})}return L&&B(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[L]),(u||f)&&(0,i.jsxs)("div",{id:m?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:y,children:[(0,i.jsx)("div",{ref:V,className:(0,k.cn)("flex-1 space-y-4",e,{"aiui-dark":b==="dark","text-center":g==="center","text-right":g==="right","text-left":g==="left"}),children:(0,i.jsx)(z.Heading,{ref:l,as:n,size:4,html:f||u,weight:c})}),m?.textLink&&(0,i.jsxs)("a",{className:(0,k.cn)({"aiui-dark":b==="dark"},"flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(m?.link,`${E}_${$}`),"data-headless-type-name":`${E}#${$}`,"data-headless-title-desc-button":`${u}#${f}`,children:[(0,i.jsx)("div",{className:"flex-1 truncate whitespace-nowrap",children:m?.textLink}),(0,i.jsx)("div",{className:"size-6",children:(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});D.displayName="Title";var et=(0,P.withLayout)(D);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div\n        id={extensions?.id}\n        className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1 space-y-4', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n            <div className=\"size-6\">\n              <svg\n                width=\"24\"\n                height=\"24\"\n                className=\"mb-[3px]\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  className=\"transition-all duration-[0.4s]\"\n                  d=\"M10.5 8L14.5 12L10.5 16\"\n                  stroke=\"#777\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                ></path>\n              </svg>\n            </div>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div\n        id={extensions?.id}\n        className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1 space-y-4', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n            <div className=\"size-6\">\n              <svg\n                width=\"24\"\n                height=\"24\"\n                className=\"mb-[3px]\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  className=\"transition-all duration-[0.4s]\"\n                  d=\"M10.5 8L14.5 12L10.5 16\"\n                  stroke=\"#777\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                ></path>\n              </svg>\n            </div>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "wkBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA+FU,IAAAI,EAAA,6BA9FVC,EAA8D,oBAC9DC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAAC,EAAK,KAAM,OAAAC,EAAS,MAAO,EAAGC,IAAQ,CACnH,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,MAAAC,EAAO,WAAAC,EAAY,MAAAC,EAAQ,MAAO,EAAIT,EACxDU,KAAW,UAAuB,IAAI,EACtCC,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,gCAAoBX,EAAK,IAAMM,EAAS,OAAyB,KAEjE,aAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASM,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GAC7CC,EAAkB,SACpBA,EAAkB,QAAQ,OAAO,EAE/BC,EAAiB,SACnBA,EAAiB,QAAQ,KAAK,EAEhCD,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,oBAAqB,GACrB,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,QAAU,EACxBI,EAAU,GACVC,EAAW,EAAIF,EACfG,EAAOD,GAAY,EAAID,GACvBG,GAAWJ,EAAQ,GAAKG,EAAOD,EAC/BG,EAAqB,KAAK,IAAI,EAAGD,EAAU,EAAIL,EAAWK,EAAU,CAAC,EAC3EP,EAAM,QAAQ,CAACS,EAAWC,IAAc,CACtC,MAAMC,EAAQD,EAAIJ,EACZM,EAAQP,EACd,IAAIQ,GAAWL,EAAqBG,GAASC,EAC7CC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGA,CAAO,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIhB,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,GAGRV,GAASC,OACR,QAAC,OACC,GAAIE,GAAY,GAChB,UAAU,kEACV,IAAKE,EAEL,oBAAC,OACC,IAAKI,EACL,aAAW,MAAG,mBAAoBb,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeE,IAAU,SACzB,aAAcA,IAAU,QACxB,YAAaA,IAAU,MACzB,CAAC,EAED,mBAAC,WAAQ,IAAKE,EAAU,GAAIT,EAAI,KAAM,EAAG,KAAMI,GAAWD,EAAO,OAAQF,EAAQ,EACnF,EACCK,GAAY,aACX,QAAC,KACC,aAAW,MACT,CAAE,YAAaD,IAAU,MAAO,EAChC,sIACF,EACA,QAAM,eAAYC,GAAY,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EACvE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGQ,CAAK,IAAIC,CAAO,GAEpD,oBAAC,OAAI,UAAU,oCAAqC,SAAAE,GAAY,SAAS,KACzE,OAAC,OAAI,UAAU,SACb,mBAAC,OACC,MAAM,KACN,OAAO,KACP,UAAU,WACV,MAAM,6BACN,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,UAAU,iCACV,EAAE,0BACF,OAAO,OACP,YAAY,MACZ,cAAc,QACf,EACH,EACF,GACF,GAEJ,CAGN,CAAC,EAEDV,EAAM,YAAc,QAEpB,IAAOd,MAAQ,cAAWc,CAAK",
   "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "weight", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
 }

package/dist/cjs/components/picture.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var R=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},y=(t,e,r,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of F(e))!j.call(t,a)&&a!==r&&d(t,a,{get:()=>e[a],enumerable:!(m=x(e,a))||m.enumerable});return t};var k=(t,e,r)=>(r=t!=null?L(U(t)):{},y(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),N=t=>y(d({},"__esModule",{value:!0}),t);var C={};R(C,{default:()=>B});module.exports=N(C);var u=require("react/jsx-runtime"),p=k(require("react"));const $=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],Z=3960,W=3980,v={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,390,768,1024,1280,1440,1540,1920]},z=t=>$.some(e=>t==e),D=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),H=t=>{try{return new URL(t).searchParams.get("alt")||""}catch{return""}},T=t=>{try{const e=new URL(t);return e.searchParams.delete("alt"),e.toString()}catch{return t}},X=p.default.forwardRef(({imgClassName:t="",source:e="",quality:r=2,deviceSizes:m=[375,390,767,1023,1024,1279,1440,1439,1539,1919,1920],className:a,loading:A="lazy",alt:h="",...w},I)=>{const M=s=>(v?.domains||[]).some(i=>s.includes(i)),g=(0,p.useCallback)(({src:s,width:o})=>{const i=o,c=T(s);try{const n=new URL(c);if(!z(n.hostname))return c;const l=n.pathname.split("/").pop()||"";if(D(l))return c?.split("/")?.map(f=>{if(M(c)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(f)&&/_[0-9]{2,4}x/.test(c)===!1){const P=f.split(".");return P.map((b,E)=>E===P.length-2?`${b}_${i<3960?i:3980}x`:b).join(".")}return f}).join("/")}catch{return c}},[]),S=(0,p.useCallback)(({srcArr:s,width:o})=>{const i=o*r,c=g({src:s[0][0],width:i}),n=s.filter(([,l])=>l&&parseInt(l,10)>=o).map(([l])=>g({src:l,width:i})).pop();return(0,u.jsx)("source",{srcSet:n||c,media:`(max-width: ${o}px)`},o)},[g,r]),_=(0,p.useMemo)(()=>{if(typeof e!="string"||!e)return[];const s=e.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(n=>n.split(" ").filter(Boolean)),o=h||s.map(n=>n[0]).filter(Boolean).map(H).find(Boolean)||"",i=m.map(n=>S({srcArr:s,width:n})),c=g({src:s[0][0],width:1920*r});return[...i,(0,u.jsx)("img",{src:c,className:`w-full ${t}`,loading:A,alt:o,...w},"default")]},[m,t,g,r,e,S,h]);return(0,u.jsxs)("picture",{ref:I,className:`block overflow-hidden ${a}`,children:[_,w.children]})});var B=X;
+"use strict";"use client";var L=Object.create;var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var R=(t,e)=>{for(var r in e)f(t,r,{get:e[r],enumerable:!0})},A=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of F(e))!j.call(t,a)&&a!==r&&f(t,a,{get:()=>e[a],enumerable:!(l=x(e,a))||l.enumerable});return t};var k=(t,e,r)=>(r=t!=null?L(U(t)):{},A(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t)),N=t=>A(f({},"__esModule",{value:!0}),t);var C={};R(C,{default:()=>B});module.exports=N(C);var u=require("react/jsx-runtime"),p=k(require("react"));const $=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],Z=3960,W=3980,v={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,390,768,1024,1280,1440,1540,1920]},z=t=>$.some(e=>t==e),D=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),H=t=>{try{return new URL(t).searchParams.get("alt")||""}catch{return""}},T=t=>{try{const e=new URL(t);return e.searchParams.delete("alt"),e.toString()}catch{return t}},X=p.default.forwardRef(({imgClassName:t="",source:e="",quality:r=2,deviceSizes:l=[375,390,767,1023,1024,1279,1440,1439,1539,1919,1920],className:a,loading:h="lazy",alt:w="",...S},I)=>{const M=s=>(v?.domains||[]).some(i=>s.includes(i)),g=(0,p.useCallback)(({src:s,width:o})=>{const i=o,c=T(s);try{const n=new URL(c);if(!z(n.hostname))return c;const m=n.pathname.split("/").pop()||"";if(D(m))return c?.split("/")?.map(d=>{if(M(c)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(d)&&/_[0-9]{2,4}x/.test(c)===!1){const b=d.split(".");return b.map((y,E)=>E===b.length-2?`${y}_${i<3960?i:3980}x`:y).join(".")}return d}).join("/")}catch{return c}},[]),P=(0,p.useCallback)(({srcArr:s,width:o})=>{const i=o*r,c=g({src:s[0][0],width:i}),n=s.filter(([,m])=>m&&parseInt(m,10)>=o).map(([m])=>g({src:m,width:i})).pop();return(0,u.jsx)("source",{srcSet:n||c,media:`(max-width: ${o}px)`},o)},[g,r]),_=(0,p.useMemo)(()=>{if(typeof e!="string"||!e)return[];const s=e.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(n=>n.split(" ").filter(Boolean)),o=w||s.map(n=>n[0]).filter(Boolean).map(H).find(Boolean)||"",i=l.map(n=>P({srcArr:s,width:n})),c=g({src:s[0][0],width:1920*r});return[...i,(0,u.jsx)("img",{src:c,className:`w-full ${t}`,loading:h,alt:o,...S},"default")]},[l,t,g,r,e,P,w,h]);return(0,u.jsxs)("picture",{ref:I,className:`block overflow-hidden ${a}`,children:[_,S.children]})});var B=X;
 //# sourceMappingURL=picture.js.map

package/dist/cjs/components/picture.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt, loading])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
   "names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg"]
 }

package/dist/esm/biz-components/Category/SwiperCategory.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var M=o;export{M as default};
+"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w},m)=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var y=o;export{y as default};
 //# sourceMappingURL=SwiperCategory.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n  }\n  pagination?: any\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n  return (\n    <Swiper\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      pagination={{\n        clickable: true,\n        dynamicBullets: false,\n      }}\n      className=\"!overflow-visible\"\n      modules={[FreeMode, Mousewheel, Pagination]}\n      breakpoints={{\n        0: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        376: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        767: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 4,\n          slidesPerGroup: 4,\n        },\n        1441: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: Math.min(6, data?.list?.length),\n          slidesPerGroup: Math.min(6, data?.list?.length),\n        },\n      }}\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n          <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
-  "mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAe,CAAE,GAAGJ,GAAM,cAAe,MAAOK,CAAO,EAAG,GAD7DH,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
-  "names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "item", "jIndex", "SwiperCategory_default"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n  }\n  pagination?: any\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n  return (\n    <Swiper\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      pagination={{\n        clickable: true,\n        dynamicBullets: false,\n      }}\n      className=\"!overflow-visible\"\n      modules={[FreeMode, Mousewheel, Pagination]}\n      breakpoints={{\n        0: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        376: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        767: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 4,\n          slidesPerGroup: 4,\n        },\n        1441: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: Math.min(6, data?.list?.length),\n          slidesPerGroup: Math.min(6, data?.list?.length),\n        },\n      }}\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n          <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
+  "mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,EAAGC,IAEjGZ,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,IACtBd,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOQ,EAAQR",
+  "names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "ref", "item", "jIndex", "SwiperCategory_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as n}from"react/jsx-runtime";import{formatPrice as u}from"../../utils/index.js";import{useAiuiContext as f}from"../../../AiuiProvider/index.js";import{Text as r}from"../../../../components/index.js";import{cn as t}from"../../../../helpers/index.js";import{ShippingMethodMode as g}from"./type.js";const v=({item:e,index:a,active:d,toggleShipping:p,currencyCode:i,metafields:x,className:s=""})=>{const{trackingData:m,locale:c="us"}=f(),b=m?.common?.copywriting;return n("div",{role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&p(e,a)},className:t("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":d},s),onClick:()=>p(e,a),children:[n("div",{className:"relative",children:[o(r,{className:t("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),o(r,{className:t("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),o(r,{className:t("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?u({amount:e.price,currencyCode:i,locale:c,removeTrailingZeros:!0}):b?.free}),e.mode!==g.FREE&&o("div",{className:t("bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:x?.memberOnly})]})};var w=v;export{w as default};
+import{jsx as o,jsxs as l}from"react/jsx-runtime";import{formatPrice as u}from"../../utils/index.js";import{useAiuiContext as f}from"../../../AiuiProvider/index.js";import{Text as r}from"../../../../components/index.js";import{cn as t}from"../../../../helpers/index.js";import{ShippingMethodMode as g}from"./type.js";const y=({item:e,index:a,active:i,toggleShipping:p,currencyCode:d,metafields:s,className:x=""})=>{const{trackingData:m,locale:c="us"}=f(),b=m?.common?.copywriting;return l("div",{role:"button",tabIndex:0,onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&p(e,a)},className:t("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer  justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":i},x),onClick:()=>p(e,a),children:[l("div",{className:"relative",children:[o(r,{className:t("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),o(r,{className:t("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),o(r,{className:t("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?u({amount:e.price,currencyCode:d,locale:c,removeTrailingZeros:!0}):b?.free}),e.mode!==g.FREE&&o("div",{className:t("bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:s?.memberOnly})]})};var k=y;export{k as default};
 //# sourceMappingURL=ShippingMethod.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingMethod.tsx"],
-  "sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n  item,\n  index,\n  active,\n  toggleShipping,\n  currencyCode,\n  metafields,\n  className = '',\n}: {\n  item: any\n  index: number\n  active: boolean\n  toggleShipping: (item: any, index: number) => void\n  currencyCode: string\n  metafields: any\n  className?: string\n}) => {\n  const { trackingData, locale = 'us' } = useAiuiContext()\n  const shopCommon = trackingData?.common?.copywriting\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          toggleShipping(item, index)\n        }\n      }}\n      className={cn(\n        'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n        {\n          'cursor-not-allowed opacity-60': item.disabled,\n          'border-brand': active,\n        },\n        className\n      )}\n      onClick={() => toggleShipping(item, index)}\n    >\n      <div className=\"relative\">\n        <Text\n          className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n          as=\"p\"\n          html={item.title}\n        />\n        <Text\n          className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n          as=\"p\"\n          html={item.subtitle}\n        />\n      </div>\n\n      <Text\n        className={cn('relative my-auto h-fit text-xl font-bold', {})}\n        as=\"p\"\n        html={\n          item.price\n            ? formatPrice({\n                amount: item.price,\n                currencyCode,\n                locale,\n                removeTrailingZeros: true,\n              })\n            : shopCommon?.free\n        }\n      />\n      {item.mode !== ShippingMethodMode.FREE && (\n        <div\n          className={cn(\n            'bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n          )}\n        >\n          {metafields?.memberOnly}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ShippingMethod\n"],
-  "mappings": "AA6CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA7CN,OAAS,eAAAC,MAAmB,uBAC5B,OAAS,kBAAAC,MAAsB,iCAC/B,OAAS,QAAAC,MAAY,kCACrB,OAAS,MAAAC,MAAU,+BACnB,OAAS,sBAAAC,MAA0B,YAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAS,IAAK,EAAIb,EAAe,EACjDc,EAAaF,GAAc,QAAQ,YAEzC,OACEd,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWiB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCP,EAAeH,EAAMC,CAAK,CAE9B,EACA,UAAWJ,EACT,iJACA,CACE,gCAAiCG,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,UAAAR,EAAC,OAAI,UAAU,WACb,UAAAD,EAACI,EAAA,CACC,UAAWC,EAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMG,EAAK,MACb,EACAR,EAACI,EAAA,CACC,UAAWC,EAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMG,EAAK,SACb,GACF,EAEAR,EAACI,EAAA,CACC,UAAWC,EAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEG,EAAK,MACDN,EAAY,CACV,OAAQM,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDC,GAAY,KAEpB,EACCT,EAAK,OAASF,EAAmB,MAChCN,EAAC,OACC,UAAWK,EACT,wIACF,EAEC,SAAAQ,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOM,EAAQZ",
+  "sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n  item,\n  index,\n  active,\n  toggleShipping,\n  currencyCode,\n  metafields,\n  className = '',\n}: {\n  item: any\n  index: number\n  active: boolean\n  toggleShipping: (item: any, index: number) => void\n  currencyCode: string\n  metafields: any\n  className?: string\n}) => {\n  const { trackingData, locale = 'us' } = useAiuiContext()\n  const shopCommon = trackingData?.common?.copywriting\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          toggleShipping(item, index)\n        }\n      }}\n      className={cn(\n        'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer  justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n        {\n          'cursor-not-allowed opacity-60': item.disabled,\n          'border-brand': active,\n        },\n        className\n      )}\n      onClick={() => toggleShipping(item, index)}\n    >\n      <div className=\"relative\">\n        <Text\n          className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n          as=\"p\"\n          html={item.title}\n        />\n        <Text\n          className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n          as=\"p\"\n          html={item.subtitle}\n        />\n      </div>\n\n      <Text\n        className={cn('relative my-auto h-fit text-xl font-bold', {})}\n        as=\"p\"\n        html={\n          item.price\n            ? formatPrice({\n                amount: item.price,\n                currencyCode,\n                locale,\n                removeTrailingZeros: true,\n              })\n            : shopCommon?.free\n        }\n      />\n      {item.mode !== ShippingMethodMode.FREE && (\n        <div\n          className={cn(\n            'bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n          )}\n        >\n          {metafields?.memberOnly}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ShippingMethod\n"],
+  "mappings": "AA6CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA7CN,OAAS,eAAAC,MAAmB,uBAC5B,OAAS,kBAAAC,MAAsB,iCAC/B,OAAS,QAAAC,MAAY,kCACrB,OAAS,MAAAC,MAAU,+BACnB,OAAS,sBAAAC,MAA0B,YAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAS,IAAK,EAAIb,EAAe,EACjDc,EAAaF,GAAc,QAAQ,YAEzC,OACEd,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWiB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCP,EAAeH,EAAMC,CAAK,CAE9B,EACA,UAAWJ,EACT,kKACA,CACE,gCAAiCG,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,UAAAR,EAAC,OAAI,UAAU,WACb,UAAAD,EAACI,EAAA,CACC,UAAWC,EAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMG,EAAK,MACb,EACAR,EAACI,EAAA,CACC,UAAWC,EAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMG,EAAK,SACb,GACF,EAEAR,EAACI,EAAA,CACC,UAAWC,EAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEG,EAAK,MACDN,EAAY,CACV,OAAQM,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDC,GAAY,KAEpB,EACCT,EAAK,OAASF,EAAmB,MAChCN,EAAC,OACC,UAAWK,EACT,wIACF,EAEC,SAAAQ,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOM,EAAQZ",
   "names": ["jsx", "jsxs", "formatPrice", "useAiuiContext", "Text", "cn", "ShippingMethodMode", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "trackingData", "locale", "shopCommon", "e", "ShippingMethod_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as l,Link as r}from"../../../../components/index.js";import{Dialog as g,DialogContent as x}from"../../../../components/index.js";import"react";const b=({data:i,onClose:o,open:a})=>e(g,{open:a,onOpenChange:o,children:t(x,{className:"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden border-none",children:[e(l,{className:"text-[32px] font-bold leading-[1.2] md:text-[20px]",html:i?.title}),t("div",{className:"mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingCoupon?.title}),e("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]",children:i?.shippingCoupon?.list.map((p,s)=>t("li",{className:"text-[16px]",children:[t("span",{children:[s+1,"."]}),e("span",{className:"ml-[4px]",children:p})]},s))}),t("div",{className:"mt-[24px] md:mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingService?.title}),e("div",{className:"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:i?.shippingService?.list.map((p,s)=>t("div",{className:"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]",children:[e(l,{as:"p",className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:p.title}),e("div",{className:"mt-[12px] grid grid-flow-row gap-[4px]",children:p.list.map((n,m)=>e(l,{as:"p",className:"text-[16px] font-semibold leading-[1.2]",children:n},m))})]},s))})]}),e(r,{className:"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline",href:`${i?.terms?.url}`,children:i?.terms?.text})]})]})});export{b as ShippingPolicyModal};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as l,Link as r}from"../../../../components/index.js";import{Dialog as g,DialogContent as d}from"../../../../components/index.js";import"react";const b=({data:i,onClose:o,open:a})=>e(g,{open:a,onOpenChange:o,children:t(d,{className:"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden rounded-lg border-none",children:[e(l,{className:"text-[32px] font-bold leading-[1.2] md:text-[20px]",html:i?.title}),t("div",{className:"mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingCoupon?.title}),e("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]",children:i?.shippingCoupon?.list.map((p,s)=>t("li",{className:"text-[16px]",children:[t("span",{children:[s+1,"."]}),e("span",{className:"ml-[4px]",children:p})]},s))}),t("div",{className:"mt-[24px] md:mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingService?.title}),e("div",{className:"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:i?.shippingService?.list.map((p,s)=>t("div",{className:"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]",children:[e(l,{as:"p",className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:p.title}),e("div",{className:"mt-[12px] grid grid-flow-row gap-[4px]",children:p.list.map((n,m)=>e(l,{as:"p",className:"text-[16px] font-semibold leading-[1.2]",children:n},m))})]},s))})]}),e(r,{className:"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline",href:`${i?.terms?.url}`,children:i?.terms?.text})]})]})});export{b as ShippingPolicyModal};
 //# sourceMappingURL=ShippingPolicyModal.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
-  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../../../components/index.js'\nimport { useMemo } from 'react'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent className=\"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden border-none\">\n        <Text className=\"text-[32px] font-bold leading-[1.2] md:text-[20px]\" html={data?.title} />\n        <div className=\"mt-[16px]\">\n          <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingCoupon?.title} />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"text-[16px]\" key={index}>\n                <span>{index + 1}.</span>\n                <span className=\"ml-[4px]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingService?.title} />\n            <div className=\"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]\" key={index}>\n                  <Text as=\"p\" className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={item.title} />\n                  <div className=\"mt-[12px] grid grid-flow-row gap-[4px]\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-[16px] font-semibold leading-[1.2]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAoCQ,cAAAA,EAMQ,QAAAC,MANR,oBApCR,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,MAA+D,kCAChF,MAAwB,QA8BjB,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDT,EAACI,EAAA,CAAO,KAAMK,EAAM,aAAcD,EAChC,SAAAP,EAACI,EAAA,CAAc,UAAU,gFACvB,UAAAL,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,MAAO,EACxFN,EAAC,OAAI,UAAU,YACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,gBAAgB,MAAO,EACxGP,EAAC,MAAG,UAAU,gEACX,SAAAO,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCV,EAAC,MAAG,UAAU,cACZ,UAAAA,EAAC,QAAM,UAAAU,EAAQ,EAAE,KAAC,EAClBX,EAAC,QAAK,UAAU,WAAY,SAAAU,EAAK,IAFFC,CAGjC,CACD,EACH,EACAV,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,iBAAiB,MAAO,EACzGP,EAAC,OAAI,UAAU,8DACZ,SAAAO,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCV,EAAC,OAAI,UAAU,mDACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qDAAqD,KAAMQ,EAAK,MAAO,EAC9FV,EAAC,OAAI,UAAU,yCACZ,SAAAU,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBb,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,0CACpB,SAAAU,GADmEC,CAEtE,CACD,EACH,IARqEF,CASvE,CACD,EACH,GACF,EAEAX,EAACG,EAAA,CACC,UAAU,oEACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
+  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../../../components/index.js'\nimport { useMemo } from 'react'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent className=\"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden rounded-lg border-none\">\n        <Text className=\"text-[32px] font-bold leading-[1.2] md:text-[20px]\" html={data?.title} />\n        <div className=\"mt-[16px]\">\n          <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingCoupon?.title} />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"text-[16px]\" key={index}>\n                <span>{index + 1}.</span>\n                <span className=\"ml-[4px]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingService?.title} />\n            <div className=\"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]\" key={index}>\n                  <Text as=\"p\" className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={item.title} />\n                  <div className=\"mt-[12px] grid grid-flow-row gap-[4px]\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-[16px] font-semibold leading-[1.2]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAoCQ,cAAAA,EAMQ,QAAAC,MANR,oBApCR,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,MAA+D,kCAChF,MAAwB,QA8BjB,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDT,EAACI,EAAA,CAAO,KAAMK,EAAM,aAAcD,EAChC,SAAAP,EAACI,EAAA,CAAc,UAAU,2FACvB,UAAAL,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,MAAO,EACxFN,EAAC,OAAI,UAAU,YACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,gBAAgB,MAAO,EACxGP,EAAC,MAAG,UAAU,gEACX,SAAAO,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCV,EAAC,MAAG,UAAU,cACZ,UAAAA,EAAC,QAAM,UAAAU,EAAQ,EAAE,KAAC,EAClBX,EAAC,QAAK,UAAU,WAAY,SAAAU,EAAK,IAFFC,CAGjC,CACD,EACH,EACAV,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,iBAAiB,MAAO,EACzGP,EAAC,OAAI,UAAU,8DACZ,SAAAO,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCV,EAAC,OAAI,UAAU,mDACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qDAAqD,KAAMQ,EAAK,MAAO,EAC9FV,EAAC,OAAI,UAAU,yCACZ,SAAAU,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBb,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,0CACpB,SAAAU,GADmEC,CAEtE,CACD,EACH,IARqEF,CASvE,CACD,EACH,GACF,EAEAX,EAACG,EAAA,CACC,UAAU,oEACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
   "names": ["jsx", "jsxs", "Text", "Link", "Dialog", "DialogContent", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js CHANGED Viewed

@@ -1,2 +1,6 @@
-import{jsx as e,jsxs as c}from"react/jsx-runtime";import{Text as m,Picture as w,Button as y,Dialog as N,DialogContent as C,DialogTrigger as T}from"../../../../../../components/index.js";import{Content as h,List as E,Root as D,Trigger as H}from"@radix-ui/react-tabs";import{useCallback as x,useEffect as P,useMemo as I,useRef as b,useState as f}from"react";import{cn as L}from"../../../../../../helpers/index.js";import{useBizProductContext as _}from"../../../../BizProductProvider.js";import{withLayout as A}from"../../../../../../shared/Styles.js";import{gaTrack as R}from"../../../../../../shared/track.js";const z=()=>{const{product:l,variant:a}=_(),[g,n]=f(!1),o=I(()=>l?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[l?.payload]),[s,d]=f(o?.ksp?.[0]),i=x(t=>{R({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${a.sku}`,position:o?.title||"",button_name:t||o?.view||""}})},[o?.title,o?.view,a.sku]);return c("div",{className:"ipc-product-detail-highlight",children:[c("div",{className:"flex items-center justify-between",children:[o?.title&&e(m,{size:3,className:"font-bold leading-[1.2]",html:o?.title}),c(N,{open:g,onOpenChange:n,children:[e(T,{asChild:!0,children:e(y,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>i(),children:o?.view})}),e(B,{ksp:o?.ksp||[],clickActiveKspItem:s,gaTrackEvent:i})]})]}),e("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:o?.ksp?.map(t=>e("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:e(m,{size:3,onClick:()=>{d(t),n(!0),i(t?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:t?.title})},t?.title))})]})},B=({ksp:l,clickActiveKspItem:a,gaTrackEvent:g})=>{const n=b([]),o=b(null),[s,d]=f(null),i=x(t=>{const p=l.findIndex(u=>u.title===t?.title),r=n.current[p];if(r&&o.current){const u=o.current,v=r,k=v.offsetLeft-u.offsetWidth/2+v.offsetWidth/2;u.scrollTo({left:k,behavior:"smooth"})}},[a,l]);return P(()=>{a&&(d(a),setTimeout(()=>{i(s)},100))},[a,i]),e(C,{className:"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4",children:c(D,{defaultValue:s?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(h,{value:t.title,children:e(w,{source:`${t?.mobileImg}, ${t?.img} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),c("div",{className:"desktop:py-6 w-full overflow-visible py-4",children:[e("div",{ref:o,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:e("div",{className:"w-fit rounded-full bg-[#EAEAEC]",children:e(E,{className:"flex w-max p-1",children:l.map((t,p)=>e(H,{ref:r=>{r&&(n.current[p]=r)},className:L("lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]",t.title===s?.title&&"bg-white"),onClick:()=>{i(t),d(t),g(t?.title)},value:t.title,children:e(m,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},p))})})}),e("div",{className:"desktop:px-6 mt-4 px-4",children:l.map(t=>e(h,{value:t.title,className:"desktop:text-[18px] text-base font-bold",children:t.description}))})]})]})})};var V=A(z);export{V as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Text as f,Picture as y,Button as w,Dialog as N,DialogContent as C,DialogTrigger as T}from"../../../../../../components/index.js";import{Content as x,List as E,Root as D,Trigger as H}from"@radix-ui/react-tabs";import{useCallback as h,useEffect as P,useMemo as I,useRef as k,useState as m}from"react";import{cn as L}from"../../../../../../helpers/index.js";import{useBizProductContext as _}from"../../../../BizProductProvider.js";import{withLayout as A}from"../../../../../../shared/Styles.js";import{gaTrack as R}from"../../../../../../shared/track.js";const z=()=>{const{product:l,variant:a}=_(),[u,c]=m(!1),o=I(()=>l?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[l?.payload]),[n,d]=m(o?.ksp?.[0]),i=h(t=>{R({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${a.sku}`,position:o?.title||"",button_name:t||o?.view||""}})},[o?.title,o?.view,a.sku]);return r("div",{className:"ipc-product-detail-highlight",children:[r("div",{className:"flex items-center justify-between",children:[o?.title&&e(f,{size:3,className:"font-bold leading-[1.2]",html:o?.title}),r(N,{open:u,onOpenChange:c,children:[e(T,{asChild:!0,children:e(w,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>i(),children:o?.view})}),e(B,{ksp:o?.ksp||[],clickActiveKspItem:n,gaTrackEvent:i})]})]}),e("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:o?.ksp?.map(t=>e("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:e(f,{size:3,onClick:()=>{d(t),c(!0),i(t?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:t?.title})},t?.title))})]})},B=({ksp:l,clickActiveKspItem:a,gaTrackEvent:u})=>{const c=k([]),o=k(null),[n,d]=m(null),i=h(t=>{const s=l.findIndex(g=>g.title===t?.title),p=c.current[s];if(p&&o.current){const g=o.current,v=p,b=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:b,behavior:"smooth"})}},[a,l]);return P(()=>{a&&(d(a),setTimeout(()=>{i(n)},100))},[a,i]),r(C,{className:"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4",children:[e("style",{children:`
+        .dialog-close-icon {
+          color: ${n?.closeColor};
+        }
+      `}),r(D,{value:n?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(x,{value:t.title,children:e(y,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),r("div",{className:"desktop:py-6 w-full overflow-visible py-4",children:[e("div",{ref:o,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:e("div",{className:"w-fit rounded-full bg-[#EAEAEC]",children:e(E,{className:"flex w-max p-1",children:l?.map((t,s)=>e(H,{ref:p=>{p&&(c.current[s]=p)},className:L("lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]",t.title===n?.title&&"bg-white"),onClick:()=>{i(t),d(t),u(t?.title)},value:t.title,children:e(f,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},s+t.title))})})}),e("div",{className:"desktop:px-6 mt-4 px-4",children:l?.map((t,s)=>e(x,{value:t.title,className:"desktop:text-[18px] text-[14px] font-bold",children:t.description},s+t.title))})]})]})]})};var q=A(z);export{q as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport {\n  Text,\n  Picture,\n  Button,\n  Heading,\n  Dialog,\n  DialogContent,\n  DialogTrigger,\n} from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            clickActiveKspItem={activeKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  clickActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  clickActiveKspItem: any\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [clickActiveKspItem, ksp]\n  )\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4\">\n      <Root defaultValue={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.mobileImg}, ${item?.img} 767`}\n              className=\"desktop:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"desktop:py-6 w-full overflow-visible py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"desktop:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"desktop:px-6 mt-4 px-4\">\n            {ksp.map(item => (\n              <Content value={item.title} className=\"desktop:text-[18px] text-base font-bold\">\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport {\n  Text,\n  Picture,\n  Button,\n  Heading,\n  Dialog,\n  DialogContent,\n  DialogTrigger,\n} from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            clickActiveKspItem={activeKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  clickActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  clickActiveKspItem: any\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [clickActiveKspItem, ksp]\n  )\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"desktop:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"desktop:py-6 w-full overflow-visible py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"desktop:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"desktop:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"desktop:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "AA8CU,cAAAA,EAEF,QAAAC,MAFE,oBA7CV,OACE,QAAAC,EACA,WAAAC,EACA,UAAAC,EAEA,UAAAC,EACA,iBAAAC,EACA,iBAAAC,MACK,wCACP,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,UAAAC,EAAQ,YAAAC,MAAgB,QAClE,OAAS,MAAAC,MAAU,qCACnB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,cAAAC,MAAkB,qCAC3B,OAAS,WAAAC,MAAe,oCAExB,MAAMC,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAQ,EAAIL,EAAqB,EAC5C,CAACM,EAAMC,CAAO,EAAIT,EAAS,EAAK,EAEhCU,EAAuBZ,EAAQ,IAC5BQ,GAAS,SAAS,YAAY,KAAMK,GAAcA,EAAK,eAAiB,kBAAkB,GAAG,MAAQ,CAAC,EAC5G,CAACL,GAAS,OAAO,CAAC,EAEf,CAACM,EAAeC,CAAgB,EAAIb,EAASU,GAAsB,MAAM,CAAC,CAAC,EAE3EI,EAAelB,EAClBmB,GAAwB,CACvBX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,WAAY,sBAAsBG,EAAQ,GAAG,GAC7C,SAAUG,GAAsB,OAAS,GACzC,YAAaK,GAAcL,GAAsB,MAAQ,EAC3D,CACF,CAAC,CACH,EACA,CAACA,GAAsB,MAAOA,GAAsB,KAAMH,EAAQ,GAAG,CACvE,EAEA,OACEtB,EAAC,OAAI,UAAU,+BACb,UAAAA,EAAC,OAAI,UAAU,oCACZ,UAAAyB,GAAsB,OACrB1B,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMwB,GAAsB,MAAO,EAExFzB,EAACI,EAAA,CAAO,KAAMmB,EAAM,aAAcC,EAChC,UAAAzB,EAACO,EAAA,CAAc,QAAO,GACpB,SAAAP,EAACI,EAAA,CAAO,QAAQ,OAAO,UAAU,2BAA2B,QAAS,IAAM0B,EAAa,EACrF,SAAAJ,GAAsB,KACzB,EACF,EACA1B,EAACgC,EAAA,CACC,IAAKN,GAAsB,KAAO,CAAC,EACnC,mBAAoBE,EACpB,aAAcE,EAChB,GACF,GACF,EACA9B,EAAC,OAAI,UAAU,4CACZ,SAAA0B,GAAsB,KAAK,IAAKC,GAC/B3B,EAAC,OAEC,UAAU,gKAEV,SAAAA,EAACE,EAAA,CACC,KAAM,EACN,QAAS,IAAM,CACb2B,EAAiBF,CAAI,EACrBF,EAAQ,EAAI,EACZK,EAAaH,GAAM,KAAK,CAC1B,EACA,UAAU,qGACV,KAAMA,GAAM,MACd,GAZKA,GAAM,KAab,CACD,EACH,GACF,CAEJ,EAEMK,EAAwB,CAAC,CAC7B,IAAAC,EACA,mBAAAC,EACA,aAAAJ,CACF,IAIM,CACJ,MAAMK,EAAepB,EAA4B,CAAC,CAAC,EAC7CqB,EAAqBrB,EAAuB,IAAI,EAChD,CAACa,EAAeC,CAAgB,EAAIb,EAAc,IAAI,EAEtDqB,EAAyBzB,EAC5BgB,GAAuB,CACtB,MAAMU,EAAWL,EAAI,UAAUN,GAAQA,EAAK,QAAUC,GAAe,KAAK,EACpEW,EAASJ,EAAa,QAAQG,CAAQ,EAE5C,GAAIC,GAAUH,EAAmB,QAAS,CACxC,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,CAACR,EAAoBD,CAAG,CAC1B,EAEA,OAAApB,EAAU,IAAM,CACTqB,IACLL,EAAiBK,CAAkB,EAGnC,WAAW,IAAM,CACfG,EAAuBT,CAAa,CACtC,EAAG,GAAG,EACR,EAAG,CAACM,EAAoBG,CAAsB,CAAC,EAG7CpC,EAACK,EAAA,CAAc,UAAU,qLACvB,UAAAN,EAAC,SAAO;AAAA;AAAA,mBAEK4B,GAAe,UAAU;AAAA;AAAA,QAEpC,EACF3B,EAACS,EAAA,CAAK,MAAOkB,GAAe,MAAO,UAAU,yBAC1C,UAAAK,GAAK,IAAIN,GACR3B,EAACQ,EAAA,CAAQ,MAAOmB,EAAK,MACnB,SAAA3B,EAACG,EAAA,CACC,OAAQ,GAAGwB,GAAM,GAAG,KAAKA,GAAM,SAAS,OACxC,UAAU,qCACV,IAAKA,EAAK,IAAI,IACd,aAAa,sBACf,GAN+BA,EAAK,KAOtC,CACD,EACD1B,EAAC,OAAI,UAAU,4CACb,UAAAD,EAAC,OACC,IAAKoC,EACL,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,UAAU,oCAEV,SAAApC,EAAC,OAAI,UAAU,kCACb,SAAAA,EAACS,EAAA,CAAK,UAAU,iBACb,SAAAwB,GAAK,IAAI,CAACN,EAAMgB,IACf3C,EAACW,EAAA,CACC,IAAKiC,GAAM,CACLA,IACFT,EAAa,QAAQQ,CAAK,EAAIC,EAElC,EACA,UAAW3B,EACT,qEACAU,EAAK,QAAUC,GAAe,OAAS,UACzC,EACA,QAAS,IAAM,CACbS,EAAuBV,CAAI,EAC3BE,EAAiBF,CAAI,EACrBG,EAAaH,GAAM,KAAK,CAC1B,EAEA,MAAOA,EAAK,MAEZ,SAAA3B,EAACE,EAAA,CAAK,KAAMyB,EAAK,MAAO,UAAU,sCAAsC,GAHnEgB,EAAQhB,EAAK,KAIpB,CACD,EACH,EACF,EACF,EACA3B,EAAC,OAAI,UAAU,yBACZ,SAAAiC,GAAK,IAAI,CAACN,EAAMgB,IACf3C,EAACQ,EAAA,CACC,MAAOmB,EAAK,MAEZ,UAAU,4CAET,SAAAA,EAAK,aAHDgB,EAAQhB,EAAK,KAIpB,CACD,EACH,GACF,GACF,GACF,CAEJ,EAEA,IAAOkB,EAAQ1B,EAAWE,CAAgB",
   "names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useCallback", "useEffect", "useMemo", "useRef", "useState", "cn", "useBizProductContext", "withLayout", "gaTrack", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as g,useState as b}from"react";import{Dialog as v,DialogTrigger as N,DialogContent as C,DialogHeader as y,DialogTitle as E,Grid as p,GridItem as s,Text as D}from"../../../../../../components/index.js";import{useBizProductContext as h}from"../../../../BizProductProvider.js";import G from"./Select.js";import{useAiuiContext as I}from"../../../../../AiuiProvider/index.js";import{formatPrice as w}from"../../../../utils/index.js";import{ShopifyColorOption as k}from"./ShopifyColorOption.js";const P=()=>{const{locale:f="us"}=I(),{compareData:r,product:u}=h(),[d,x]=b();g(()=>{x(r?.availableCompareList[0]?.handle)},[r?.availableCompareList]);const c=[r?.currentProductCompareData?.product,r?.availableCompareList.find(t=>t.handle===d)?.product].filter(Boolean);return r?.specificationKeys?o(v,{children:[e(N,{children:e("button",{className:"text-base font-bold leading-[1.4]",children:"Compare"})}),o(C,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[e(y,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:e(E,{className:"text-sm text-[#6D6D6F]",children:"Compare"})}),o(p,{className:"laptop:gap-8 laptop:py-8 grid-cols-3 py-6",children:[e(s,{span:1}),c.map((t,i)=>e(s,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"size-[200px]",role:"presentation"})},i))]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(s,{span:1,children:e(D,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:r.currentProductCompareData?.shortName||u.title})}),d&&e(s,{span:1,children:e(G,{value:d,onChange:t=>{x(t)},list:r.options})})]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),c.map((t,i)=>{const l=t.variants[0],m=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(s,{span:1,className:"flex h-full",children:o("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:w({locale:f,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),m?.length&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:m.map(a=>e(k,{label:a,className:"size-[16px]"},a))})]})]})},i)})]}),e(p,{className:"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:r.specificationKeys?.map(t=>o(s,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),c.map((i,l)=>{let a=i.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var F=P;export{F as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as v,useState as b}from"react";import{Dialog as N,DialogTrigger as y,DialogContent as C,DialogHeader as E,DialogTitle as D,Grid as p,GridItem as i,Text as h}from"../../../../../../components/index.js";import{useBizProductContext as G}from"../../../../BizProductProvider.js";import I from"./Select.js";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{formatPrice as k}from"../../../../utils/index.js";import{ShopifyColorOption as P}from"./ShopifyColorOption.js";const z=()=>{const{locale:u="us",copyWriting:x}=w(),{compareData:r,product:g}=G(),[c,f]=b();v(()=>{f(r?.availableCompareList[0]?.handle)},[r?.availableCompareList]);const d=[r?.currentProductCompareData?.product,r?.availableCompareList.find(t=>t.handle===c)?.product].filter(Boolean);return r?.specificationKeys?o(N,{children:[e(y,{className:"text-base font-bold leading-[1.4]",children:x?.compare}),o(C,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[e(E,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:e(D,{className:"text-sm text-[#6D6D6F]",children:x?.compare})}),o(p,{className:"laptop:gap-8 laptop:py-8 grid-cols-3 py-6",children:[e(i,{span:1}),d.map((t,s)=>e(i,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"size-[200px]",role:"presentation"})},s))]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(i,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(i,{span:1,children:e(h,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:r.currentProductCompareData?.shortName||g.title})}),c&&e(i,{span:1,children:e(I,{value:c,onChange:t=>{f(t)},list:r.options})})]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(i,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),d.map((t,s)=>{const l=t.variants[0],m=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(i,{span:1,className:"flex h-full",children:o("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:k({locale:u,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),m?.length&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:m.map(a=>e(P,{label:a,className:"size-[16px]"},a))})]})]})},s)})]}),e(p,{className:"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:r.specificationKeys?.map(t=>o(i,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),d.map((s,l)=>{let a=s.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var K=z;export{K as default};
 //# sourceMappingURL=CompareModal.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base font-bold leading-[1.4]\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 grid-cols-3 py-6\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img src={product.images[0].url} alt={product.title} className=\"size-[200px]\" role=\"presentation\" />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"size-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">{copyWriting?.compare}</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 grid-cols-3 py-6\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img src={product.images[0].url} alt={product.title} className=\"size-[200px]\" role=\"presentation\" />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"size-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Dialog as i,DialogTrigger as p,DialogContent as r,DialogHeader as g,DialogTitle as c,Grid as d,GridItem as n,Text as a}from"../../../../../../components/index.js";import{useBizProductContext as m}from"../../../../BizProductProvider.js";const D=()=>{const{product:l}=m();return t(i,{children:[o(p,{children:o("button",{className:"text-base font-bold leading-[1.4]",children:"Specs"})}),t(r,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[o(g,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:o(c,{className:"text-sm text-[#6D6D6F]",children:"Specs"})}),o(d,{className:"laptop:gap-8 laptop:py-8 py-6",children:l.metafields?.global?.specifications?.map(({key:s,value:e})=>t(n,{span:6,className:"flex flex-col gap-1",children:[o(a,{className:"text-[16px] font-bold",children:s}),o(a,{className:"text-[16px] font-bold text-[#86868C]",html:e?.trim().toLowerCase()==="true"?"\u2714\uFE0F":e?.trim().toLowerCase()==="false"?"\u274C":e})]}))})]})]})};export{D as SpecsModal};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useAiuiContext as p}from"../../../../../AiuiProvider/index.js";import{Dialog as r,DialogTrigger as c,DialogContent as g,DialogHeader as n,DialogTitle as d,Grid as m,GridItem as x,Text as i}from"../../../../../../components/index.js";import{useBizProductContext as f}from"../../../../BizProductProvider.js";const N=()=>{const{product:s}=f(),{copyWriting:a}=p();return t(r,{children:[o(c,{className:"text-base font-bold leading-[1.4]",children:a?.specs}),t(g,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[o(n,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:o(d,{className:"text-sm text-[#6D6D6F]",children:a?.specs})}),o(m,{className:"laptop:gap-8 laptop:py-8 py-6",children:s.metafields?.global?.specifications?.map(({key:l,value:e})=>t(x,{span:6,className:"flex flex-col gap-1",children:[o(i,{className:"text-[16px] font-bold",children:l}),o(i,{className:"text-[16px] font-bold text-[#86868C]",html:e?.trim().toLowerCase()==="true"?"\u2714\uFE0F":e?.trim().toLowerCase()==="false"?"\u274C":e})]},l))})]})]})};export{N as SpecsModal};
 //# sourceMappingURL=SpecsModal.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
-  "sourcesContent": ["import {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base font-bold leading-[1.4]\">Specs</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">Specs</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={6} className=\"flex flex-col gap-1\">\n              <Text className=\"text-[16px] font-bold\">{key}</Text>\n              <Text\n                className=\"text-[16px] font-bold text-[#86868C]\"\n                html={\n                  value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n                }\n              />\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAkBQ,cAAAA,EAWI,QAAAC,MAXJ,oBAlBR,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,wCACP,OAAS,wBAAAC,MAA4B,oCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EAEzC,OACET,EAACC,EAAA,CACC,UAAAF,EAACG,EAAA,CACC,SAAAH,EAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,EACAC,EAACG,EAAA,CACC,iBAAiB,UACjB,UAAU,8QAEV,UAAAJ,EAACK,EAAA,CAAa,UAAU,8DACtB,SAAAL,EAACM,EAAA,CAAY,UAAU,yBAAyB,iBAAK,EACvD,EACAN,EAACO,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,IAC7Db,EAACO,EAAA,CAAS,KAAM,EAAG,UAAU,sBAC3B,UAAAR,EAACS,EAAA,CAAK,UAAU,wBAAyB,SAAAI,EAAI,EAC7Cb,EAACS,EAAA,CACC,UAAU,uCACV,KACEK,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,GACF,CACD,EACH,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "key", "value"]
+  "sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n  const { copyWriting } = useAiuiContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">{copyWriting?.specs}</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n              <Text className=\"text-[16px] font-bold\">{key}</Text>\n              <Text\n                className=\"text-[16px] font-bold text-[#86868C]\"\n                html={\n                  value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n                }\n              />\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAmBM,cAAAA,EAUM,QAAAC,MAVN,oBAnBN,OAAS,kBAAAC,MAAsB,uCAC/B,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,wCACP,OAAS,wBAAAC,MAA4B,oCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EACnC,CAAE,YAAAG,CAAY,EAAIZ,EAAe,EAEvC,OACED,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAc,UAAU,oCAAqC,SAAAU,GAAa,MAAM,EACjFb,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,8QAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,8DACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,yBAA0B,SAAAO,GAAa,MAAM,EACtE,EACAd,EAACQ,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,IAC7Df,EAACQ,EAAA,CAAS,KAAM,EAAa,UAAU,sBACrC,UAAAT,EAACU,EAAA,CAAK,UAAU,wBAAyB,SAAAK,EAAI,EAC7Cf,EAACU,EAAA,CACC,UAAU,uCACV,KACEM,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,IAPsBD,CAQxB,CACD,EACH,GACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "useAiuiContext", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "copyWriting", "key", "value"]
 }