@anker-in/headless-ui 1.0.9-temp-dataimg → 1.0.9-temp-swiper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef } from 'react'\nimport { useGSAP } from '@gsap/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 { useInView } from 'react-intersection-observer'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme } = data\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  const { ref: inViewRef, inView } = useInView({\n    threshold: 0.1,\n  })\n\n  useGSAP(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div ref={inViewRef} className={cn('mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkEQ,IAAAI,EAAA,6BAjERC,EAAyC,oBACzCA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA0B,uCAE1B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EAEjD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,CAC3C,UAAW,EACb,CAAC,EAED,oBAAQ,IAAM,CACZ,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASC,GAAa,CACpB,GAAI,CAACJ,EAAS,QAAS,OACvB,MAAMK,EAASL,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMM,EAAQL,EAAkB,QAAQ,MACxC,OAAK,IAAIK,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASN,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWK,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXH,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASgB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAACd,CAAM,CAAC,EAGTL,MACE,OAAC,OAAI,IAAKI,EAAW,aAAW,MAAG,sBAAuBL,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACpG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOX,KAAQ,cAAWW,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_react_intersection_observer", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef } 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 { useInView } from 'react-intersection-observer'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme } = data\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  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div ref={inViewRef} className={cn('mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEQ,IAAAI,EAAA,6BAhERC,EAAyC,oBACzCC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA0B,uCAE1B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,sBAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASC,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,EAGTN,MACE,OAAC,OAAI,IAAKK,EAAW,aAAW,MAAG,sBAAuBN,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACpG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOX,KAAQ,cAAWW,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_react_intersection_observer", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
 }

package/dist/cjs/biz-components/WhyChoose/WhyChoose.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var u=Object.create;var a=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var C=(e,s)=>{for(var i in s)a(e,i,{get:s[i],enumerable:!0})},d=(e,s,i,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of v(s))!N.call(e,l)&&l!==i&&a(e,l,{get:()=>s[l],enumerable:!(r=w(s,l))||r.enumerable});return e};var n=(e,s,i)=>(i=e!=null?u(y(e)):{},d(s||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),P=e=>d(a({},"__esModule",{value:!0}),e);var b={};C(b,{WhyChooseItem:()=>m,default:()=>W});module.exports=P(b);var o=require("react/jsx-runtime"),t=n(require("react")),p=require("../../components/index.js"),h=require("../../helpers/index.js"),f=require("../../shared/Styles.js"),x=n(require("../SwiperBox/index.js"));const c=t.default.forwardRef(({data:e,className:s},i)=>{const r=(0,t.useRef)(null);return(0,t.useImperativeHandle)(i,()=>r.current),(0,o.jsx)("div",{ref:r,className:(0,h.cn)(s),children:(0,o.jsx)(x.default,{className:"!overflow-visible [&_.swiper-wrapper]:flex [&_.swiper-wrapper]:gap-[16px]",data:{list:e?.productData||[],configuration:{shape:"card",isTab:!0}},Slide:m,breakpoints:{0:{slidesPerView:1},374:{slidesPerView:1.2},768:{slidesPerView:2.3},1025:{slidesPerView:4}},id:""})})});c.displayName="WhyChoose";const m=({data:e})=>(0,o.jsxs)("div",{className:"  laptop:p-[24px] laptop:shrink w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]",children:[(0,o.jsx)(p.Picture,{source:e.img.url,className:"w-[36px]"}),(0,o.jsxs)("div",{className:"py-[16px]",children:[(0,o.jsx)(p.Text,{html:e?.title,className:"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]"}),(0,o.jsx)("div",{className:"mt-[8px]",children:(0,o.jsx)(p.Text,{html:e?.desc,className:"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]"})})]})]});m.displayName="WhyChooseItem";var W=(0,f.withLayout)(c);
+"use strict";"use client";var x=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var P=(e,s)=>{for(var i in s)a(e,i,{get:s[i],enumerable:!0})},d=(e,s,i,p)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of v(s))!N.call(e,r)&&r!==i&&a(e,r,{get:()=>s[r],enumerable:!(p=u(s,r))||p.enumerable});return e};var n=(e,s,i)=>(i=e!=null?x(y(e)):{},d(s||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),C=e=>d(a({},"__esModule",{value:!0}),e);var W={};P(W,{WhyChooseItem:()=>m,default:()=>B});module.exports=C(W);var t=require("react/jsx-runtime"),o=n(require("react")),l=require("../../components/index.js"),w=require("../../helpers/index.js"),h=require("../../shared/Styles.js"),f=n(require("../SwiperBox/index.js"));const c=o.default.forwardRef(({data:e,className:s},i)=>{const p=(0,o.useRef)(null);return(0,o.useImperativeHandle)(i,()=>p.current),(0,t.jsx)("div",{ref:p,className:(0,w.cn)(s),children:(0,t.jsx)(f.default,{className:"!overflow-visible [&_.swiper-wrapper]:flex [&_.swiper-wrapper]:gap-[16px]",data:{list:e?.productData||[],configuration:{shape:"card",isTab:!0}},Slide:m,breakpoints:{0:{slidesPerView:1,spaceBetween:12},374:{slidesPerView:1.2,spaceBetween:12},768:{slidesPerView:2.3,spaceBetween:16},1025:{slidesPerView:4,spaceBetween:16},1440:{slidesPerView:4,spaceBetween:16},1920:{slidesPerView:4,spaceBetween:16}},id:""})})});c.displayName="WhyChoose";const m=({data:e})=>(0,t.jsxs)("div",{className:"  laptop:p-[24px] laptop:shrink w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]",children:[(0,t.jsx)(l.Picture,{source:e.img.url,className:"w-[36px]"}),(0,t.jsxs)("div",{className:"py-[16px]",children:[(0,t.jsx)(l.Text,{html:e?.title,className:"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]"}),(0,t.jsx)("div",{className:"mt-[8px]",children:(0,t.jsx)(l.Text,{html:e?.desc,className:"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]"})})]})]});m.displayName="WhyChooseItem";var B=(0,h.withLayout)(c);
 //# sourceMappingURL=WhyChoose.js.map

package/dist/cjs/biz-components/WhyChoose/WhyChoose.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/WhyChoose/WhyChoose.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n// import { withStyles } from '../../shared/Styles.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nconst WhyChoose = React.forwardRef<HTMLDivElement, WhyChooseProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <SwiperBox\n        className=\"!overflow-visible [&_.swiper-wrapper]:flex [&_.swiper-wrapper]:gap-[16px]\"\n        data={{\n          list: data?.productData || [],\n          configuration: { shape: 'card', isTab: true },\n        }}\n        Slide={WhyChooseItem}\n        breakpoints={{\n          0: { slidesPerView: 1 },\n          374: { slidesPerView: 1.2 },\n          768: { slidesPerView: 2.3 },\n          1025: {\n            slidesPerView: 4,\n          },\n        }}\n        id={''}\n      />\n    </div>\n  )\n})\n\nWhyChoose.displayName = 'WhyChoose'\n\nconst WhyChooseItem = ({ data }: { data: ItemType }) => {\n  return (\n    <div className=\"  laptop:p-[24px] laptop:shrink w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]\">\n      <Picture source={data.img.url} className=\"w-[36px]\" />\n      <div className=\"py-[16px]\">\n        <Text\n          html={data?.title}\n          className=\"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]\"\n        />\n        <div className=\"mt-[8px]\">\n          <Text\n            html={data?.desc}\n            className=\"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nWhyChooseItem.displayName = 'WhyChooseItem'\n\nexport default withLayout(WhyChoose)\nexport { WhyChooseItem }\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAeM,IAAAK,EAAA,6BAdNC,EAAmD,oBAEnDC,EAA8B,qCAC9BC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAAsB,oCAEtB,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC/F,MAAMC,KAAW,UAAuB,IAAI,EAC5C,gCAAoBD,EAAK,IAAMC,EAAS,OAAQ,KAG9C,OAAC,OAAI,IAAKA,EAAU,aAAW,MAAGF,CAAS,EACzC,mBAAC,EAAAG,QAAA,CACC,UAAU,4EACV,KAAM,CACJ,KAAMJ,GAAM,aAAe,CAAC,EAC5B,cAAe,CAAE,MAAO,OAAQ,MAAO,EAAK,CAC9C,EACA,MAAOX,EACP,YAAa,CACX,EAAG,CAAE,cAAe,CAAE,EACtB,IAAK,CAAE,cAAe,GAAI,EAC1B,IAAK,CAAE,cAAe,GAAI,EAC1B,KAAM,CACJ,cAAe,CACjB,CACF,EACA,GAAI,GACN,EACF,CAEJ,CAAC,EAEDS,EAAU,YAAc,YAExB,MAAMT,EAAgB,CAAC,CAAE,KAAAW,CAAK,OAE1B,QAAC,OAAI,UAAU,uFACb,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,WAAW,KACpD,QAAC,OAAI,UAAU,YACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,iFACZ,KACA,OAAC,OAAI,UAAU,WACb,mBAAC,QACC,KAAMA,GAAM,KACZ,UAAU,iFACZ,EACF,GACF,GACF,EAIJX,EAAc,YAAc,gBAE5B,IAAOC,KAAQ,cAAWQ,CAAS",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n// import { withStyles } from '../../shared/Styles.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nconst WhyChoose = React.forwardRef<HTMLDivElement, WhyChooseProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <SwiperBox\n        className=\"!overflow-visible [&_.swiper-wrapper]:flex [&_.swiper-wrapper]:gap-[16px]\"\n        data={{\n          list: data?.productData || [],\n          configuration: { shape: 'card', isTab: true },\n        }}\n        Slide={WhyChooseItem}\n        breakpoints={{\n          0: { slidesPerView: 1, spaceBetween: 12 },\n          374: { slidesPerView: 1.2, spaceBetween: 12 },\n          768: { slidesPerView: 2.3, spaceBetween: 16 },\n          1025: { slidesPerView: 4, spaceBetween: 16 },\n          1440: { slidesPerView: 4, spaceBetween: 16 },\n          1920: { slidesPerView: 4, spaceBetween: 16 },\n        }}\n        id={''}\n      />\n    </div>\n  )\n})\n\nWhyChoose.displayName = 'WhyChoose'\n\nconst WhyChooseItem = ({ data }: { data: ItemType }) => {\n  return (\n    <div className=\"  laptop:p-[24px] laptop:shrink w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]\">\n      <Picture source={data.img.url} className=\"w-[36px]\" />\n      <div className=\"py-[16px]\">\n        <Text\n          html={data?.title}\n          className=\"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]\"\n        />\n        <div className=\"mt-[8px]\">\n          <Text\n            html={data?.desc}\n            className=\"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nWhyChooseItem.displayName = 'WhyChooseItem'\n\nexport default withLayout(WhyChoose)\nexport { WhyChooseItem }\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAeM,IAAAK,EAAA,6BAdNC,EAAmD,oBAEnDC,EAA8B,qCAC9BC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAAsB,oCAEtB,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC/F,MAAMC,KAAW,UAAuB,IAAI,EAC5C,gCAAoBD,EAAK,IAAMC,EAAS,OAAQ,KAG9C,OAAC,OAAI,IAAKA,EAAU,aAAW,MAAGF,CAAS,EACzC,mBAAC,EAAAG,QAAA,CACC,UAAU,4EACV,KAAM,CACJ,KAAMJ,GAAM,aAAe,CAAC,EAC5B,cAAe,CAAE,MAAO,OAAQ,MAAO,EAAK,CAC9C,EACA,MAAOX,EACP,YAAa,CACX,EAAG,CAAE,cAAe,EAAG,aAAc,EAAG,EACxC,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,CAC7C,EACA,GAAI,GACN,EACF,CAEJ,CAAC,EAEDS,EAAU,YAAc,YAExB,MAAMT,EAAgB,CAAC,CAAE,KAAAW,CAAK,OAE1B,QAAC,OAAI,UAAU,uFACb,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,WAAW,KACpD,QAAC,OAAI,UAAU,YACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,iFACZ,KACA,OAAC,OAAI,UAAU,WACb,mBAAC,QACC,KAAMA,GAAM,KACZ,UAAU,iFACZ,EACF,GACF,GACF,EAIJX,EAAc,YAAc,gBAE5B,IAAOC,KAAQ,cAAWQ,CAAS",
   "names": ["WhyChoose_exports", "__export", "WhyChooseItem", "WhyChoose_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "import_SwiperBox", "WhyChoose", "React", "data", "className", "ref", "innerRef", "SwiperBox"]
 }