npm - @anker-in/headless-ui - Versions diffs - 1.1.9-alpha.1764146057632 → 1.1.9-alpha.1764154320530 - Mend

@anker-in/headless-ui 1.1.9-alpha.1764146057632 → 1.1.9-alpha.1764154320530

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

package/dist/cjs/biz-components/BrandEquity/BrandEquity.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var B=Object.create;var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of I(t))!P.call(e,s)&&s!==o&&d(e,s,{get:()=>t[s],enumerable:!(a=D(t,s))||a.enumerable});return e};var b=(e,t,o)=>(o=e!=null?B(j(e)):{},g(t||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),L=e=>g(d({},"__esModule",{value:!0}),e);var Q={};T(Q,{default:()=>F});module.exports=L(Q);var r=require("react/jsx-runtime"),i=require("react"),l=require("../../helpers/utils.js"),f=b(require("../../components/picture.js")),h=require("../../shared/Styles.js"),w=require("react-responsive"),N=require("../../hooks/useExposure.js"),m=require("swiper/react"),p=require("swiper/modules"),E=b(require("../Title/index.js"));const A="copy",H="store_benefits",z=(e,t)=>{const o=[];for(let a=0;a<e.length;a+=t)o.push(e.slice(a,a+t));return o},R=(0,i.forwardRef)(({data:{items:e=[],title:t},className:o},a)=>{const[s,q]=(0,i.useState)(!1),x=(0,w.useMediaQuery)({query:"(max-width: 768px)"}),y=(0,i.useRef)(null),u=(0,i.useRef)(null);(0,i.useImperativeHandle)(a,()=>u.current),(0,N.useExposure)(u,{componentType:A,componentName:H}),(0,i.useEffect)(()=>{q(x)},[x]);const M=s?z(e,3):e;return(0,r.jsxs)("div",{ref:u,className:(0,l.cn)("brand-equity-wrapper w-full",o),children:[t&&(0,r.jsx)(E.default,{data:{title:t}}),s?(0,r.jsxs)(m.Swiper,{className:(0,l.cn)(o),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:y.current},breakpoints:{0:{spaceBetween:12}},children:[M?.map((n,c)=>(0,r.jsx)(m.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((S,v)=>(0,r.jsx)(k,{data:S,index:v},v))},"SwiperSlide"+c)),(0,r.jsx)("div",{ref:y,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,c)=>(0,r.jsx)(k,{data:n,index:c},c))})]})}),k=({data:e,index:t})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(t)},"rounded-box"),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex -space-x-2",children:e?.avatarList?.map((o,a)=>(0,r.jsx)("div",{className:(0,l.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,r.jsx)(f.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},a))}):(0,r.jsx)(f.default,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var F=(0,h.withLayout)(R);
+"use strict";"use client";var B=Object.create;var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var T=(e,t)=>{for(var o in t)d(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of I(t))!P.call(e,l)&&l!==o&&d(e,l,{get:()=>t[l],enumerable:!(a=D(t,l))||a.enumerable});return e};var b=(e,t,o)=>(o=e!=null?B(j(e)):{},g(t||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),L=e=>g(d({},"__esModule",{value:!0}),e);var Q={};T(Q,{default:()=>z});module.exports=L(Q);var r=require("react/jsx-runtime"),i=require("react"),s=require("../../helpers/utils.js"),f=b(require("../../components/picture.js")),k=require("../../shared/Styles.js"),w=require("react-responsive"),N=require("../../hooks/useExposure.js"),m=require("swiper/react"),p=require("swiper/modules"),E=b(require("../Title/index.js"));const A="copy",H="store_benefits",R=(e,t)=>{const o=[];for(let a=0;a<e.length;a+=t)o.push(e.slice(a,a+t));return o},F=(0,i.forwardRef)(({data:{items:e=[],title:t},className:o},a)=>{const[l,q]=(0,i.useState)(!1),x=(0,w.useMediaQuery)({query:"(max-width: 768px)"}),y=(0,i.useRef)(null),u=(0,i.useRef)(null);(0,i.useImperativeHandle)(a,()=>u.current),(0,N.useExposure)(u,{componentType:A,componentName:H}),(0,i.useEffect)(()=>{q(x)},[x]);const M=l?R(e,3):e;return(0,r.jsxs)("div",{ref:u,className:(0,s.cn)("brand-equity-wrapper w-full",o),children:[t&&(0,r.jsx)(E.default,{data:{title:t}}),l?(0,r.jsxs)(m.Swiper,{className:(0,s.cn)(o),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:y.current},breakpoints:{0:{spaceBetween:12}},children:[M?.map((n,c)=>(0,r.jsx)(m.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((S,v)=>(0,r.jsx)(h,{data:S,index:v},v))},"SwiperSlide"+c)),(0,r.jsx)("div",{ref:y,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,s.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,c)=>(0,r.jsx)(h,{data:n,index:c},c))})]})}),h=({data:e,index:t})=>(0,r.jsxs)("div",{className:(0,s.cn)("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(t)},"rounded-box"),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex -space-x-2",children:e?.avatarList?.map((o,a)=>(0,r.jsx)("div",{className:(0,s.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,r.jsx)(f.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},a))}):(0,r.jsx)(f.default,{className:"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var z=(0,k.withLayout)(F);
 //# sourceMappingURL=BrandEquity.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const itemsArray = isMobile ? chunkArray(items, 3) : items\n  return (\n    <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isMobile ? (\n        <Swiper\n          className={cn(className)}\n          modules={[FreeMode, Mousewheel, Pagination]}\n          freeMode={true}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n          pagination={{\n            clickable: true,\n            el: paginationRef.current,\n          }}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n            },\n          }}\n        >\n          {itemsArray?.map((item, jIndex) => (\n            <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n              {Array.isArray(item) &&\n                item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n            </SwiperSlide>\n          ))}\n          <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n        </Swiper>\n      ) : (\n        <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n          {items.map((item, index) => (\n            <BrandEquityItem key={index} data={item} index={index} />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'box-border flex w-full flex-col bg-white p-4',\n        'desktop:p-6 justify-between',\n        'laptop:col-span-3 lg-desktop:p-8',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        'rounded-box'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                  'relative inline-block',\n                  'lg-desktop:size-[36px]'\n                )}\n              >\n                <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withLayout(BrandEquity)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const itemsArray = isMobile ? chunkArray(items, 3) : items\n  return (\n    <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isMobile ? (\n        <Swiper\n          className={cn(className)}\n          modules={[FreeMode, Mousewheel, Pagination]}\n          freeMode={true}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n          pagination={{\n            clickable: true,\n            el: paginationRef.current,\n          }}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n            },\n          }}\n        >\n          {itemsArray?.map((item, jIndex) => (\n            <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n              {Array.isArray(item) &&\n                item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n            </SwiperSlide>\n          ))}\n          <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n        </Swiper>\n      ) : (\n        <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n          {items.map((item, index) => (\n            <BrandEquityItem key={index} data={item} index={index} />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'box-border flex w-full flex-col bg-white p-4',\n        'desktop:p-6 justify-between',\n        'laptop:col-span-3 lg-desktop:p-8',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        'rounded-box'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                  'relative inline-block',\n                  'lg-desktop:size-[36px]'\n                )}\n              >\n                <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withLayout(BrandEquity)\n"],
+  "mappings": "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",
   "names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "title", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "Title", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
 }

package/dist/cjs/biz-components/ImageWithText/ImageWithText.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var xe=Object.create;var M=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,he=Object.prototype.hasOwnProperty;var ge=(l,c)=>{for(var h in c)M(l,h,{get:c[h],enumerable:!0})},Y=(l,c,h,_)=>{if(c&&typeof c=="object"||typeof c=="function")for(let g of fe(c))!he.call(l,g)&&g!==h&&M(l,g,{get:()=>c[g],enumerable:!(_=ue(c,g))||_.enumerable});return l};var _e=(l,c,h)=>(h=l!=null?xe(ve(l)):{},Y(c||!l||!l.__esModule?M(h,"default",{value:l,enumerable:!0}):h,l)),be=l=>Y(M({},"__esModule",{value:!0}),l);var Ne={};ge(Ne,{default:()=>ke});module.exports=be(Ne);var e=require("react/jsx-runtime"),i=_e(require("react")),r=require("../../components/index.js"),m=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),y=require("framer-motion"),w=require("./types.js");const we="image",ye="image_with_text",Z=i.default.forwardRef(({data:l,className:c},h)=>{const{title:_,subtitle:g,desc:I,descIcon:z,image:k,padImage:H,mobileImage:j,theme:ae="dark",items:W=[],layout:oe="left",mediaType:le="image",datalist:d=[],video:R,padVideo:A,mobVideo:q,cols:V=w.Cols.One,button:N,textAlign:s="left"}=l,x=oe,E=(0,i.useRef)(null),P=(0,i.useRef)(null),S=(0,i.useRef)(null),D=(0,i.useRef)(null),$=(0,i.useRef)(null),[u,se]=(0,i.useState)(0),B=(0,i.useRef)([]),[C,re]=(0,i.useState)({left:0,width:0}),[b,F]=(0,i.useState)(""),[O,G]=(0,i.useState)(""),[J,K]=(0,i.useState)(""),p=d.length>0,T=le==="video";(0,te.useExposure)(E,{componentType:we,componentName:ye,componentTitle:_,componentDescription:g}),(0,i.useImperativeHandle)(h,()=>E.current),(0,i.useEffect)(()=>{if(d.length>0){const t=B.current[u];if(t){const{offsetLeft:o,offsetWidth:a}=t;re({left:o,width:a})}}},[u,d.length]);const[Q,me]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)($,{once:!0,threshold:.01,callback:()=>{me(!0)}}),(0,i.useEffect)(()=>{if(!Q||!T)return;let t="",o="",a="";if(p&&d[u]){const f=d[u];t=f.video?.url||"",o=f.padVideo?.url||t,a=f.mobVideo?.url||t}else t=R?.url||"",o=A?.url||t,a=q?.url||t;t&&F(t),o&&G(o),a&&K(a),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},200)},[Q,T,p,u,d,R?.url,A?.url,q?.url]);const de=(t,o)=>{if(se(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&p&&d[t]){const a=d[t];a.video?.url&&F(a.video.url),a.padVideo?.url&&G(a.padVideo.url),a.mobVideo?.url&&K(a.mobVideo.url),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},300)}},ne=()=>!L||!N?.text?null:(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":s==="center","flex justify-start":s==="left"}),children:(0,e.jsx)(r.Button,{as:"a",href:N.link,variant:N.variant||"secondary",size:"base",className:"image-with-text__button",children:N.text})}),n=W.length>0,L=!!N,U=()=>{if(p&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return k?`${k?.url},${H?.url||k?.url} 1024, ${j?.url||k?.url} 768`:""},X=()=>{if(p){const f=d[u],v=f.image?.url,ce=f.imgPad?.url||v,pe=f.imageMob?.url||v;return(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:v,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=k?.url,o=H?.url||t,a=j?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:E,"data-ui-component-id":"ImageWithText",className:(0,m.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&(x==="top"||x==="bottom"),"items-center":x==="left"||x==="right","flex-col laptop:flex-row":!p&&(x==="left"||x==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"aiui-dark":ae==="dark"},c),children:[p&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":s==="left","text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:_,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:I,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":s==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:C.left,width:C.width}}),d.map((t,o)=>(0,e.jsx)("div",{ref:a=>{B.current[o]=a},onClick:a=>de(o,a),className:(0,m.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===o?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!p&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":n,"items-start":s==="left","items-center":s==="center","text-left":s==="left","text-center":s==="center","laptop:order-1":x==="left"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__main-content",{"flex flex-col":L}),children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:_,className:(0,m.cn)("image-with-text__title",{"w-full":n,"text-left":n&&s==="left","text-center":n&&s==="center"})}),g&&(0,e.jsx)(r.Text,{as:"p",size:n?4:3,html:g,className:(0,m.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!n,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":n,"text-left":n&&s==="left","text-center":n&&s==="center"})}),!n&&(I||z)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[z&&(0,e.jsx)("img",{src:z,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),I&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:I,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),n&&(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":x==="top"||x==="bottom","grid-cols-1":V===w.Cols.One,"grid-cols-2":V===w.Cols.Two,"grid-cols-3":V===w.Cols.Three,"grid-cols-4":V===w.Cols.Four}),children:W.map((t,o)=>(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item",{"text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":s==="center","justify-start":s==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]"})]},o))})]}),ne()]}),(0,e.jsx)("div",{ref:$,className:(0,m.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":x==="left"||x==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":n,"laptop:basis-[63%] desktop:basis-[57%]":n&&x==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":p}),children:p?T?X():(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:U(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?X():(0,e.jsx)(r.Picture,{source:U(),className:(0,m.cn)("image-with-text__image",{"rounded-box laptop:rounded-box":!n})})})]})});Z.displayName="ImageWithText";var ke=(0,ee.withLayout)(Z);
+"use strict";"use client";var xe=Object.create;var M=Object.defineProperty;var ue=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,he=Object.prototype.hasOwnProperty;var ge=(l,n)=>{for(var h in n)M(l,h,{get:n[h],enumerable:!0})},Y=(l,n,h,_)=>{if(n&&typeof n=="object"||typeof n=="function")for(let g of fe(n))!he.call(l,g)&&g!==h&&M(l,g,{get:()=>n[g],enumerable:!(_=ue(n,g))||_.enumerable});return l};var _e=(l,n,h)=>(h=l!=null?xe(ve(l)):{},Y(n||!l||!l.__esModule?M(h,"default",{value:l,enumerable:!0}):h,l)),be=l=>Y(M({},"__esModule",{value:!0}),l);var Ne={};ge(Ne,{default:()=>ke});module.exports=be(Ne);var e=require("react/jsx-runtime"),i=_e(require("react")),r=require("../../components/index.js"),m=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),y=require("framer-motion"),w=require("./types.js");const we="image",ye="image_with_text",Z=i.default.forwardRef(({data:l,className:n},h)=>{const{title:_,subtitle:g,desc:I,descIcon:z,image:k,padImage:H,mobileImage:j,theme:ae="dark",items:W=[],layout:oe="left",mediaType:le="image",datalist:d=[],video:R,padVideo:A,mobVideo:q,cols:V=w.Cols.One,button:N,textAlign:s="left"}=l,x=oe,E=(0,i.useRef)(null),P=(0,i.useRef)(null),S=(0,i.useRef)(null),D=(0,i.useRef)(null),$=(0,i.useRef)(null),[u,se]=(0,i.useState)(0),B=(0,i.useRef)([]),[C,re]=(0,i.useState)({left:0,width:0}),[b,F]=(0,i.useState)(""),[O,G]=(0,i.useState)(""),[J,K]=(0,i.useState)(""),c=d.length>0,T=le==="video";(0,te.useExposure)(E,{componentType:we,componentName:ye,componentTitle:_,componentDescription:g}),(0,i.useImperativeHandle)(h,()=>E.current),(0,i.useEffect)(()=>{if(d.length>0){const t=B.current[u];if(t){const{offsetLeft:o,offsetWidth:a}=t;re({left:o,width:a})}}},[u,d.length]);const[Q,me]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)($,{once:!0,threshold:.01,callback:()=>{me(!0)}}),(0,i.useEffect)(()=>{if(!Q||!T)return;let t="",o="",a="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",o=f.padVideo?.url||t,a=f.mobVideo?.url||t}else t=R?.url||"",o=A?.url||t,a=q?.url||t;t&&F(t),o&&G(o),a&&K(a),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},200)},[Q,T,c,u,d,R?.url,A?.url,q?.url]);const de=(t,o)=>{if(se(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&c&&d[t]){const a=d[t];a.video?.url&&F(a.video.url),a.padVideo?.url&&G(a.padVideo.url),a.mobVideo?.url&&K(a.mobVideo.url),setTimeout(()=>{[P.current?.querySelector("video"),S.current?.querySelector("video"),D.current?.querySelector("video")].forEach(v=>{v&&(v.load(),v.play().catch(()=>{}))})},300)}},ne=()=>!L||!N?.text?null:(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":s==="center","flex justify-start":s==="left"}),children:(0,e.jsx)(r.Button,{as:"a",href:N.link,variant:N.variant||"secondary",size:"base",className:"image-with-text__button",children:N.text})}),p=W.length>0,L=!!N,U=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return k?`${k?.url},${H?.url||k?.url} 1024, ${j?.url||k?.url} 768`:""},X=()=>{if(c){const f=d[u],v=f.image?.url,ce=f.imgPad?.url||v,pe=f.imageMob?.url||v;return(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:v,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=k?.url,o=H?.url||t,a=j?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:P,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:b,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:S,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:O||b,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:D,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:J||b,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:E,"data-ui-component-id":"ImageWithText",className:(0,m.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(x==="top"||x==="bottom"),"items-center":x==="left"||x==="right","flex-col laptop:flex-row":!c&&(x==="left"||x==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":ae==="dark"},n),children:[c&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":s==="left","text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:_,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:I,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":s==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:C.left,width:C.width}}),d.map((t,o)=>(0,e.jsx)("div",{ref:a=>{B.current[o]=a},onClick:a=>de(o,a),className:(0,m.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===o?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!c&&(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":p,"items-start":s==="left","items-center":s==="center","text-left":s==="left","text-center":s==="center","laptop:order-1":x==="left"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__main-content",{"flex flex-col":L}),children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:_,className:(0,m.cn)("image-with-text__title",{"w-full":p,"text-left":p&&s==="left","text-center":p&&s==="center"})}),g&&(0,e.jsx)(r.Text,{as:"p",size:p?4:3,html:g,className:(0,m.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!p,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":p,"text-left":p&&s==="left","text-center":p&&s==="center"})}),!p&&(I||z)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[z&&(0,e.jsx)("img",{src:z,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),I&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:I,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),p&&(0,e.jsx)("div",{className:(0,m.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":x==="top"||x==="bottom","grid-cols-1":V===w.Cols.One,"grid-cols-2":V===w.Cols.Two,"grid-cols-3":V===w.Cols.Three,"grid-cols-4":V===w.Cols.Four}),children:W.map((t,o)=>(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item",{"text-center":s==="center"}),children:[(0,e.jsxs)("div",{className:(0,m.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":s==="center","justify-start":s==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]"})]},o))})]}),ne()]}),(0,e.jsx)("div",{ref:$,className:(0,m.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":x==="left"||x==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":p,"laptop:basis-[63%] desktop:basis-[57%]":p&&x==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c}),children:c?T?X():(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:U(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?X():(0,e.jsx)(r.Picture,{source:U(),className:(0,m.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Z.displayName="ImageWithText";var ke=(0,ee.withLayout)(Z);
 //# sourceMappingURL=ImageWithText.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    cols = Cols.One,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n        })}\n      >\n        <Button\n          as=\"a\"\n          href={button.link}\n          variant={button.variant || 'secondary'}\n          size=\"base\"\n          className=\"image-with-text__button\"\n        >\n          {button.text}\n        </Button>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <Heading\n              as={'h2'}\n              size={4}\n              html={title}\n              className={cn('image-with-text__title', {\n                'w-full': hasItems,\n                'text-left': hasItems && textAlign === 'left',\n                'text-center': hasItems && textAlign === 'center',\n              })}\n            />\n            {subtitle && (\n              <Text\n                as={'p'}\n                size={hasItems ? 4 : 3}\n                html={subtitle}\n                className={cn(\n                  'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                  {\n                    'laptop:mt-[16px]': !hasItems,\n                    'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  }\n                )}\n              />\n            )}\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  'grid-cols-1': cols === Cols.One,\n                  'grid-cols-2': cols === Cols.Two,\n                  'grid-cols-3': cols === Cols.Three,\n                  'grid-cols-4': cols === Cols.Four,\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-box laptop:rounded-box': !hasItems,\n            })}\n          />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\nimport { Cols } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    cols = Cols.One,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n        })}\n      >\n        <Button\n          as=\"a\"\n          href={button.link}\n          variant={button.variant || 'secondary'}\n          size=\"base\"\n          className=\"image-with-text__button\"\n        >\n          {button.text}\n        </Button>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <Heading\n              as={'h2'}\n              size={4}\n              html={title}\n              className={cn('image-with-text__title', {\n                'w-full': hasItems,\n                'text-left': hasItems && textAlign === 'left',\n                'text-center': hasItems && textAlign === 'center',\n              })}\n            />\n            {subtitle && (\n              <Text\n                as={'p'}\n                size={hasItems ? 4 : 3}\n                html={subtitle}\n                className={cn(\n                  'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                  {\n                    'laptop:mt-[16px]': !hasItems,\n                    'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  }\n                )}\n              />\n            )}\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  'grid-cols-1': cols === Cols.One,\n                  'grid-cols-2': cols === Cols.Two,\n                  'grid-cols-3': cols === Cols.Three,\n                  'grid-cols-4': cols === Cols.Four,\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
   "names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "import_framer_motion", "import_types", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "cols", "button", "textAlign", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el"]
 }

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var re=Object.create;var S=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var fe=(t,n)=>{for(var i in n)S(t,i,{get:n[i],enumerable:!0})},W=(t,n,i,f)=>{if(n&&typeof n=="object"||typeof n=="function")for(let p of ce(n))!ue.call(t,p)&&p!==i&&S(t,p,{get:()=>n[p],enumerable:!(f=pe(n,p))||f.enumerable});return t};var P=(t,n,i)=>(i=t!=null?re(de(t)):{},W(n||!t||!t.__esModule?S(i,"default",{value:t,enumerable:!0}):i,t)),me=t=>W(S({},"__esModule",{value:!0}),t);var ve={};fe(ve,{default:()=>he});module.exports=me(ve);var e=require("react/jsx-runtime"),s=require("../../../../../components/index.js"),u=P(require("./ProductBenefitsTabs/index.js")),E=require("../../../BizProductProvider.js"),q=require("../../../hooks/useBenefits.js"),g=require("../../../utils/index.js"),F=require("../../../utils/textFormat.js"),r=require("react"),G=require("../../../../AiuiProvider/index.js"),Y=P(require("../../../../../hooks/useCountDown.js")),K=P(require("../../../hooks/useCopy.js")),v=require("../../../../../helpers/index.js"),J=P(require("./ProductBenefitsTabs/ModalContainer.js")),Q=require("../../../../../shared/Styles.js");const be={couponCode:"Code",copyCode:"Copy Code",copied:"Copied",expired:"Expired",offCoupon:"{discount} off coupon",offMemberOnly:"{amount} off Member Only",loginNow:"Login now",selectFreeGift:"You can select the free gift below.",bundleSaveUpTo:"Bundle purchases save extra up to",bundleOffer:"We offer {count} bundle for you",creditsTitle:"Soundcore credits for cash",creditsDesc:"100 Soundcore credits=$1",off:" off",memberBenefitsNotLogin:"You will enjoy a {amount} member discount after logging in.",memberBenefitsNotLoginText:"Sign Up to Get Benefits Below",forNewMember:"{amount} off for New Member",expressShipping:"Express Shipping Method",creditsAfterActivation:"You will get soundcoreCredits after activation. ",active:"Active",flexibleInstallment:"Flexible installment payment "},ge=({item:t,textConfig:n,benefitPayloadData:i})=>{const{trackingData:f}=(0,G.useAiuiContext)(),{copied:p,copy:y}=(0,K.default)(),[k,N]=(0,r.useState)(!1),c=f?.common?.coupon,{days:B,hours:A,minutes:H,seconds:w}=(0,Y.default)({endTime:t?.ends_at||""}),{openModal:V}=(0,E.useBizProductContext)();return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{jsx:!0,children:`
+"use strict";var ce=Object.create;var S=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var be=(t,n)=>{for(var i in n)S(t,i,{get:n[i],enumerable:!0})},q=(t,n,i,f)=>{if(n&&typeof n=="object"||typeof n=="function")for(let p of ue(n))!me.call(t,p)&&p!==i&&S(t,p,{get:()=>n[p],enumerable:!(f=de(n,p))||f.enumerable});return t};var P=(t,n,i)=>(i=t!=null?ce(fe(t)):{},q(n||!t||!t.__esModule?S(i,"default",{value:t,enumerable:!0}):i,t)),ge=t=>q(S({},"__esModule",{value:!0}),t);var Be={};be(Be,{default:()=>ye});module.exports=ge(Be);var e=require("react/jsx-runtime"),s=require("../../../../../components/index.js"),u=P(require("./ProductBenefitsTabs/index.js")),G=require("../../../BizProductProvider.js"),Y=require("../../../hooks/useBenefits.js"),g=require("../../../utils/index.js"),F=require("../../../utils/textFormat.js"),l=require("react"),j=require("../../../../AiuiProvider/index.js"),K=P(require("../../../../../hooks/useCountDown.js")),J=P(require("../../../hooks/useCopy.js")),x=require("../../../../../helpers/index.js"),Q=P(require("./ProductBenefitsTabs/ModalContainer.js")),X=require("../../../../../shared/Styles.js");const xe={couponCode:"Code",copyCode:"Copy Code",copied:"Copied",expired:"Expired",offCoupon:"{discount} off coupon",offMemberOnly:"{amount} off Member Only",loginNow:"Login now",selectFreeGift:"You can select the free gift below.",bundleSaveUpTo:"Bundle purchases save extra up to",bundleOffer:"We offer {count} bundle for you",creditsTitle:"Soundcore credits for cash",creditsDesc:"100 Soundcore credits=$1",off:" off",memberBenefitsNotLogin:"You will enjoy a {amount} member discount after logging in.",memberBenefitsNotLoginText:"Sign Up to Get Benefits Below",forNewMember:"{amount} off for New Member",expressShipping:"Express Shipping Method",creditsAfterActivation:"You will get soundcoreCredits after activation. ",active:"Active",flexibleInstallment:"Flexible installment payment "},Ce=({item:t,textConfig:n,benefitPayloadData:i})=>{const{trackingData:f}=(0,j.useAiuiContext)(),{copied:p,copy:y}=(0,J.default)(),[k,N]=(0,l.useState)(!1),c=f?.common?.coupon,{days:B,hours:A,minutes:H,seconds:w}=(0,K.default)({endTime:t?.ends_at||""}),{openModal:V}=(0,G.useBizProductContext)();return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{jsx:!0,children:`
         .coupon-card {
           /* \u4F7F\u7528mask\u521B\u5EFA\u5185\u5207\u5706\u89D2 */
           mask:
@@ -14,7 +14,7 @@
             bottom left;
           mask-repeat: no-repeat;
         }
-      `}),(0,e.jsxs)("div",{style:{background:t.couponBgColor||"white"},className:(0,v.cn)("laptop:h-[112px] lg-desktop:h-[130px] relative h-[100px] overflow-hidden p-3",t.borderStyle==="inset"?"coupon-card ":"rounded-[8px]"),...t.useAble&&{role:"button",tabIndex:0,onClick:()=>{t?.onUseChange?.(k)!==!1&&N(!k)}},children:[t?.bgImage?.url&&(0,e.jsx)(s.Picture,{source:t.bgImage.url,alt:t.bgImage.alt,className:"absolute bottom-0 right-0 w-auto",imgClassName:"object-contain"}),(0,e.jsxs)("div",{className:"z-1 relative ",children:[(0,e.jsxs)("div",{className:"flex items-center justify-start",children:[t.useAble&&(0,e.jsx)(s.Checkbox,{size:"lg",className:"data-[state=checked]:border-primary mr-2 rounded-full border-[1.6px] border-[#D1D1D1]",checked:t?.isAutoUse}),(0,e.jsx)(s.Text,{html:t.title,className:"laptop:text-[20px] lg-desktop:text-[24px] text-[16px] font-bold leading-[1.2]"})]}),t.description&&(0,e.jsx)(s.Text,{...typeof t.description=="string"?{html:t.description}:{},as:"p",className:"lg-desktop:text-[16px] mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F]",children:t.description}),t.code&&(0,e.jsxs)("div",{className:"desktop:mt-2 flex items-center gap-2",children:[(0,e.jsx)(s.Text,{html:`${i?.couponBenefitData?.commonCoupon?.couponCode}: ${t.code}`,className:"lg-desktop:text-[16px] text-[14px] font-bold text-[#3D3D3F]"}),(0,e.jsx)(s.Link,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:D=>{D.preventDefault(),D.stopPropagation(),y(t.code||"")},children:p?c?.copied||i?.couponBenefitData?.commonCoupon?.copied:c?.copy||i?.couponBenefitData?.commonCoupon?.copyCode})]}),t.ends_at&&(0,e.jsx)("button",{onClick:()=>{c?.modal&&V(c?.modal)},className:"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 lg-desktop:text-[16px] md-l:hidden mt-[14px] text-left text-[14px] font-bold text-[#1F2021]",children:Number(B)<Number(c?.hurry?.daysLeft)?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{children:c?.ends}),(0,e.jsx)("span",{className:"font-bold",children:` ${B} ${A.toString().padStart(2,"0")}:${H.toString().padStart(2,"0")}:${w.toString().padStart(2,"0")}`})]}):c?.hurry?.label||i?.couponBenefitData?.commonCoupon?.expired})]})]})]})},xe=({coupons:t,className:n,textConfig:i,benefitPayloadData:f})=>(0,e.jsx)("div",{className:(0,v.cn)("laptop:grid laptop:grid-cols-2 desktop:grid-cols-1 flex flex-col gap-3",n),children:t?.map((p,y)=>(0,e.jsx)(ge,{item:p,textConfig:i,benefitPayloadData:f},y))}),Ce=({textConfig:t})=>{const{profile:n,variant:i,renderInstallments:f,onUseCouponChange:p,onUseMemberDiscountChange:y,discount:k,savingDetail:N,openModal:c,openSignInPopup:B,openAuthCodePopup:A,openSignUpPopup:H,product:w,creditsRedemption:V}=(0,E.useBizProductContext)(),{usedPoints:D=0,availablePoints:ye=0}=V??{},m=(0,r.useMemo)(()=>w?.payload?.components?.find(o=>o.componentKey==="ProductBenefits")?.data||{},[w?.payload]),[X,j]=(0,r.useState)(!1),ee=(0,q.useBenefits)({variant:i}),{locale:x="us",copyWriting:te}=(0,G.useAiuiContext)(),z=(0,r.useRef)(null),oe={...be,...t},{activated:ne=!1}=n||{},{memberDiscount:C,commonCoupon:b,creditsRedemption:T,freeGift:O,bundle:R,paidShipping:ae,fullGift:_,levelDiscount:U}=ee,a=(0,r.useMemo)(()=>{const o=m?.benefitTabs?.find(d=>d?.value==="coupon")??{},l=m?.benefitTabs?.find(d=>d?.value==="membership")??{},M=m?.benefitTabs?.find(d=>d?.value==="installment")??{},L=m?.benefitTabs?.find(d=>d?.value==="pay")??{};return{couponBenefitData:o,membershipBenefitData:l,installmentBenefitData:M,payBenefitData:L}},[m]),h=[b?.enable?{...b.config,isAutoUse:N?.coupon>0,useAble:!0,borderStyle:"rounded",code:b?.config?.title??"",description:b?.config?.desc??"",onUseChange:o=>{const l=o?k?.codeSavings??0:0;p?.(l)},title:(0,F.replaceTemplate)(a?.couponBenefitData?.commonCoupon?.offCoupon,{discount:b?.config?.value_type=="percentage"?Math.abs(Number(b?.config?.value||0))+"%":(0,g.formatPrice)({amount:Math.abs(Number(b?.config?.fixed_value||0)),currencyCode:i.price.currencyCode,locale:x})})}:null,C.enable?{useAble:!0,isAutoUse:!!n?.email&&!!N?.member,title:(0,F.replaceTemplate)(a?.couponBenefitData?.member?.offMemberOnly,{amount:(0,g.formatPrice)({amount:C?.config?.amount??0,currencyCode:i.price.currencyCode,locale:x})}),description:(0,e.jsxs)(e.Fragment,{children:[n?.email?a?.couponBenefitData?.member?.memberDiscounts:a?.membershipBenefitData?.memberBenefitsNotLogin?.replace("{amount}",(0,g.formatPrice)({amount:C?.config?.amount??0,currencyCode:i.price.currencyCode,locale:x}))??""," ",n?.email?"":(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:()=>B?.(),className:"underline",children:a?.couponBenefitData?.member?.loginNow})]}),borderStyle:"rounded",onUseChange:o=>{if(n?.email){const l=o?C?.config?.amount??0:0;return y?.(l),!0}else return B?.(),!1}}:null,U.enable?{title:U?.config?.title??"",description:U?.config?.tag??"",borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.levelDiscount?.bgImage}}:null,O.enable?{title:O?.config?.title??"",description:a?.couponBenefitData?.freeGift?.selectFreeGift,borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.freeGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,R.enable?{title:`${a?.couponBenefitData?.bundle?.bundleSaveUpTo} ${(0,g.formatPrice)({amount:Math.max(...R?.config?.bundleList?.map(o=>o.savings??0)??[]),currencyCode:i.price.currencyCode,locale:x})}`,borderStyle:"inset",description:a?.couponBenefitData?.bundle?.bundleOffer.replace("{count}",R?.config?.bundleList?.length?.toString()??""),bgImage:{url:a?.couponBenefitData?.bundle?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,_.enable?{title:_?.config?.title??"",description:_?.config?.desc??"",borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.fullGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,T.enable?{title:a?.couponBenefitData?.creditsRedemption?.creditsTitle,description:a?.couponBenefitData?.creditsRedemption?.creditsDesc,borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.creditsRedemption?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null].filter(Boolean);(0,r.useEffect)(()=>{Z(h?.length?"coupon":"membership")},[h?.length]);const[$,Z]=(0,r.useState)("coupon"),se=()=>{A?.()};if(!u.default)return null;const ie=(o,l)=>{if(Z(l),z.current){const M=z.current,L=o.currentTarget,d=L.offsetLeft-M.offsetWidth/2+L.offsetWidth/2;M.scrollTo({left:d,behavior:"smooth"})}},le=(0,r.useMemo)(()=>m?.benefitTabs?.map(o=>o?.value==="coupon"&&!h?.length?null:o).filter(Boolean),[m,h]);return(0,e.jsxs)(u.default,{className:"relative",onValueChange:o=>Z(o),value:$,children:[(0,e.jsx)("div",{className:"absolute right-0 top-0 z-[1] h-[40px] w-[25px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]"}),(0,e.jsx)(u.default.List,{ref:z,children:le?.map(o=>(0,e.jsx)(u.default.Trigger,{className:(0,v.cn)($===o.value&&"text-[#1D1D1F]"),value:o.value,onClick:l=>ie(l,o?.value),children:o.label},o?.value))}),(0,e.jsx)("style",{global:!0,jsx:!0,children:`
+      `}),(0,e.jsxs)("div",{style:{background:t.couponBgColor||"white"},className:(0,x.cn)("laptop:h-[112px] lg-desktop:h-[130px] relative h-[100px] overflow-hidden p-3",t.borderStyle==="inset"?"coupon-card ":"rounded-[8px]"),...t.useAble&&{role:"button",tabIndex:0,onClick:()=>{t?.onUseChange?.(k)!==!1&&N(!k)}},children:[t?.bgImage?.url&&(0,e.jsx)(s.Picture,{source:t.bgImage.url,alt:t.bgImage.alt,className:"absolute bottom-0 right-0 w-auto",imgClassName:"object-contain"}),(0,e.jsxs)("div",{className:"z-1 relative ",children:[(0,e.jsxs)("div",{className:"flex items-center justify-start",children:[t.useAble&&(0,e.jsx)(s.Checkbox,{size:"lg",className:"data-[state=checked]:border-primary mr-2 rounded-full border-[1.6px] border-[#D1D1D1]",checked:t?.isAutoUse}),(0,e.jsx)(s.Text,{html:t.title,className:"laptop:text-[20px] lg-desktop:text-[24px] text-[16px] font-bold leading-[1.2]"})]}),t.description&&(0,e.jsx)(s.Text,{...typeof t.description=="string"?{html:t.description}:{},as:"p",className:"lg-desktop:text-[16px] mt-2 pr-8 text-[14px] font-bold text-[#3D3D3F]",children:t.description}),t.code&&(0,e.jsxs)("div",{className:"desktop:mt-2 flex items-center gap-2",children:[(0,e.jsx)(s.Text,{html:`${i?.couponBenefitData?.commonCoupon?.couponCode}: ${t.code}`,className:"lg-desktop:text-[16px] text-[14px] font-bold text-[#3D3D3F]"}),(0,e.jsx)(s.Link,{className:"lg-desktop:text-[16px] text-[14px] font-bold underline",role:"button",tabIndex:0,onClick:D=>{D.preventDefault(),D.stopPropagation(),y(t.code||"")},children:p?c?.copied||i?.couponBenefitData?.commonCoupon?.copied:c?.copy||i?.couponBenefitData?.commonCoupon?.copyCode})]}),t.ends_at&&(0,e.jsx)("button",{onClick:()=>{c?.modal&&V(c?.modal)},className:"lg-desktop:mt-[24px] text-brand-0 desktop:mt-4 lg-desktop:text-[16px] md-l:hidden mt-[14px] text-left text-[14px] font-bold text-[#1F2021]",children:Number(B)<Number(c?.hurry?.daysLeft)?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{children:c?.ends}),(0,e.jsx)("span",{className:"font-bold",children:` ${B} ${A.toString().padStart(2,"0")}:${H.toString().padStart(2,"0")}:${w.toString().padStart(2,"0")}`})]}):c?.hurry?.label||i?.couponBenefitData?.commonCoupon?.expired})]})]})]})},he=({coupons:t,className:n,textConfig:i,benefitPayloadData:f})=>(0,e.jsx)("div",{className:(0,x.cn)("laptop:grid laptop:grid-cols-2 desktop:grid-cols-1 flex flex-col gap-3",n),children:t?.map((p,y)=>(0,e.jsx)(Ce,{item:p,textConfig:i,benefitPayloadData:f},y))}),ve=({textConfig:t})=>{const{profile:n,variant:i,renderInstallments:f,onUseCouponChange:p,onUseMemberDiscountChange:y,discount:k,savingDetail:N,openModal:c,openSignInPopup:B,openAuthCodePopup:A,openSignUpPopup:H,product:w,creditsRedemption:V}=(0,G.useBizProductContext)(),{usedPoints:D=0,availablePoints:ke=0}=V??{},[ee,z]=(0,l.useState)(!1),m=(0,l.useMemo)(()=>w?.payload?.components?.find(o=>o.componentKey==="ProductBenefits")?.data||{},[w?.payload]),[te,O]=(0,l.useState)(!1),oe=(0,Y.useBenefits)({variant:i}),{locale:C="us",copyWriting:ne}=(0,j.useAiuiContext)(),R=(0,l.useRef)(null),ae={...xe,...t},{activated:se=!1}=n||{},{memberDiscount:h,commonCoupon:b,creditsRedemption:T,freeGift:$,bundle:_,paidShipping:ie,fullGift:U,levelDiscount:Z}=oe,a=(0,l.useMemo)(()=>{const o=m?.benefitTabs?.find(d=>d?.value==="coupon")??{},r=m?.benefitTabs?.find(d=>d?.value==="membership")??{},M=m?.benefitTabs?.find(d=>d?.value==="installment")??{},L=m?.benefitTabs?.find(d=>d?.value==="pay")??{};return{couponBenefitData:o,membershipBenefitData:r,installmentBenefitData:M,payBenefitData:L}},[m]),v=[b?.enable?{...b.config,isAutoUse:N?.coupon>0,useAble:!0,borderStyle:"rounded",code:b?.config?.title??"",description:b?.config?.desc??"",onUseChange:o=>{const r=o?k?.codeSavings??0:0;p?.(r)},title:(0,F.replaceTemplate)(a?.couponBenefitData?.commonCoupon?.offCoupon,{discount:b?.config?.value_type=="percentage"?Math.abs(Number(b?.config?.value||0))+"%":(0,g.formatPrice)({amount:Math.abs(Number(b?.config?.fixed_value||0)),currencyCode:i.price.currencyCode,locale:C})})}:null,h.enable?{useAble:!0,isAutoUse:!!n?.email&&!!N?.member,title:(0,F.replaceTemplate)(a?.couponBenefitData?.member?.offMemberOnly,{amount:(0,g.formatPrice)({amount:h?.config?.amount??0,currencyCode:i.price.currencyCode,locale:C})}),description:(0,e.jsxs)(e.Fragment,{children:[n?.email?a?.couponBenefitData?.member?.memberDiscounts:a?.membershipBenefitData?.memberBenefitsNotLogin?.replace("{amount}",(0,g.formatPrice)({amount:h?.config?.amount??0,currencyCode:i.price.currencyCode,locale:C}))??""," ",n?.email?"":(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:()=>B?.(),className:"underline",children:a?.couponBenefitData?.member?.loginNow})]}),borderStyle:"rounded",onUseChange:o=>{if(n?.email){const r=o?h?.config?.amount??0:0;return y?.(r),!0}else return B?.(),!1}}:null,Z.enable?{title:Z?.config?.title??"",description:Z?.config?.tag??"",borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.levelDiscount?.bgImage}}:null,$.enable?{title:$?.config?.title??"",description:a?.couponBenefitData?.freeGift?.selectFreeGift,borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.freeGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,_.enable?{title:`${a?.couponBenefitData?.bundle?.bundleSaveUpTo} ${(0,g.formatPrice)({amount:Math.max(..._?.config?.bundleList?.map(o=>o.savings??0)??[]),currencyCode:i.price.currencyCode,locale:C})}`,borderStyle:"inset",description:a?.couponBenefitData?.bundle?.bundleOffer.replace("{count}",_?.config?.bundleList?.length?.toString()??""),bgImage:{url:a?.couponBenefitData?.bundle?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,U.enable?{title:U?.config?.title??"",description:U?.config?.desc??"",borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.fullGift?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null,T.enable?{title:a?.couponBenefitData?.creditsRedemption?.creditsTitle,description:a?.couponBenefitData?.creditsRedemption?.creditsDesc,borderStyle:"inset",bgImage:{url:a?.couponBenefitData?.creditsRedemption?.bgImage},couponBgColor:"linear-gradient(94deg, rgba(215, 245, 254, 0.24) 4.2%, rgba(215, 245, 254, 0.80) 99.11%), #FFF"}:null].filter(Boolean);(0,l.useEffect)(()=>{E(v?.length?"coupon":"membership")},[v?.length]),(0,l.useEffect)(()=>{z(!1)},[i?.id]);const[W,E]=(0,l.useState)("coupon"),le=()=>{A?.()},re=(o,r)=>{if(E(r),R.current){const M=R.current,L=o.currentTarget,d=L.offsetLeft-M.offsetWidth/2+L.offsetWidth/2;M.scrollTo({left:d,behavior:"smooth"})}},pe=(0,l.useMemo)(()=>m?.benefitTabs?.map(o=>o?.value==="coupon"&&!v?.length?null:o).filter(Boolean),[m,v]);return u.default?(0,e.jsxs)(u.default,{className:"relative",onValueChange:o=>{E(o),z(o==="installment")},value:W,children:[(0,e.jsx)("div",{className:"absolute right-0 top-0 z-[1] h-[40px] w-[25px] rounded-xl bg-gradient-to-r from-transparent to-[#EAEAEC]"}),(0,e.jsx)(u.default.List,{ref:R,children:pe?.map(o=>(0,e.jsx)(u.default.Trigger,{className:(0,x.cn)(W===o.value&&"text-[#1D1D1F]"),value:o.value,onClick:r=>re(r,o?.value),children:o.label},o?.value))}),(0,e.jsx)("style",{global:!0,jsx:!0,children:`
           .benefits-tabs-content::-webkit-scrollbar {
             width: 4px; /* \u6EDA\u52A8\u6761\u5BBD\u5EA6 */
             height: 64px; /* \u6A2A\u5411\u6EDA\u52A8\u6761\u9AD8\u5EA6 */
@@ -32,8 +32,8 @@
           .benefits-tabs-content::-webkit-scrollbar-thumb:hover {
             background-color: rgba(100, 100, 100, 0.6);
           }
-        `}),h?.length?(0,e.jsx)(u.default.Content,{value:"coupon",className:"benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto",children:(0,e.jsx)("div",{className:"lg-desktop:p-4 p-3",children:(0,e.jsx)(xe,{coupons:h,textConfig:oe,benefitPayloadData:a})})}):null,(0,e.jsx)(u.default.Content,{value:"membership",className:(0,v.cn)("benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px]",{"overflow-y-auto":n?.email}),children:(0,e.jsxs)("div",{className:"lg-desktop:p-4 p-3",children:[(0,e.jsxs)("div",{className:(0,v.cn)("rounded-lg",{"benefits-tabs-content lg-desktop:h-[calc(240px-100px)] desktop:h-[calc(196px-80px)] laptop:h-[calc(220px-72px)] h-[calc(180px-73px)] overflow-y-auto":!n?.email}),children:[!n?.email&&(0,e.jsx)("h3",{className:"desktop:mb-2 mb-1 text-left text-lg font-bold !leading-[1.3]",children:a?.membershipBenefitData?.memberBenefitsNotLoginText}),(0,e.jsxs)("ul",{className:`desktop:[&_li]:py-4 list-none
+        `}),v?.length?(0,e.jsx)(u.default.Content,{value:"coupon",className:"benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto",children:(0,e.jsx)("div",{className:"lg-desktop:p-4 p-3",children:(0,e.jsx)(he,{coupons:v,textConfig:ae,benefitPayloadData:a})})}):null,(0,e.jsx)(u.default.Content,{value:"membership",className:(0,x.cn)("benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px]",{"overflow-y-auto":n?.email}),children:(0,e.jsxs)("div",{className:"lg-desktop:p-4 p-3",children:[(0,e.jsxs)("div",{className:(0,x.cn)("rounded-lg",{"benefits-tabs-content lg-desktop:h-[calc(240px-100px)] desktop:h-[calc(196px-80px)] laptop:h-[calc(220px-72px)] h-[calc(180px-73px)] overflow-y-auto":!n?.email}),children:[!n?.email&&(0,e.jsx)("h3",{className:"desktop:mb-2 mb-1 text-left text-lg font-bold !leading-[1.3]",children:a?.membershipBenefitData?.memberBenefitsNotLoginText}),(0,e.jsxs)("ul",{className:`desktop:[&_li]:py-4 list-none
               [&_li:first-child]:rounded-t-lg [&_li:last-child]:rounded-b-lg [&_li:last-child]:last:border-b-0 [&_li]:flex
               [&_li]:items-center [&_li]:gap-2 [&_li]:border-b [&_li]:border-b-[#E4E5E6] [&_li]:bg-white [&_li]:px-4 [&_li]:py-[10px]
-              [&_li]:text-left`,children:[C.enable&&(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"desktop:size-6 size-4",viewBox:"0 0 24 24",fill:"none",children:(0,e.jsx)("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:(0,F.replaceTemplate)(a?.membershipBenefitData?.forNewMember,{amount:(0,g.formatPrice)({amount:C?.config?.amount??0,currencyCode:i.price.currencyCode,locale:x})})})]}),!!n?.email&&(0,e.jsx)(I,{})]}),a?.membershipBenefitData?.equities?.map((o,l)=>o.modalText?(0,e.jsxs)("li",{className:"justify-between gap-2",children:[(0,e.jsxs)("button",{onClick:()=>c?.({title:o.label,content:o.modalText}),className:"flex justify-between",children:[(0,e.jsx)(s.Picture,{source:o.icon,alt:o.text,className:"desktop:size-6 size-4 shrink-0"}),(0,e.jsx)(s.Text,{className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:o.text})]},l),!!n?.email&&(0,e.jsx)(I,{})]},l):(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:o.icon,alt:o.text,className:"desktop:size-6 size-4 shrink-0"}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:o.label})]}),!!n?.email&&(0,e.jsx)(I,{})]},l)),ae.enable?(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{className:"desktop:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z",fill:"#1D1D1F"})}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:a?.membershipBenefitData?.expressShipping})]}),!!n?.email&&(0,e.jsx)(I,{})]}):null,T.enable?(0,e.jsxs)("li",{children:[(0,e.jsx)("svg",{className:"desktop:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z",fill:"#1D1D1F"})}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:!ne&&n?.email?(0,e.jsxs)(e.Fragment,{children:[a?.membershipBenefitData?.creditsAfterActivation,(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:()=>se(),className:"underline",children:a?.membershipBenefitData?.active})]}):T?.config?.label?.replace("{{amount}}",(0,g.formatPrice)({amount:T?.config?.amount??0,currencyCode:i.price.currencyCode,locale:x}))})]}):null]})]}),!n?.email&&(0,e.jsx)("div",{className:"desktop:pt-4 pt-2",children:(0,e.jsx)(s.Button,{variant:"primary",className:"w-full",onClick:()=>H?.(),children:te?.signUp})})]})}),(0,e.jsxs)(u.default.Content,{value:"pay",className:"benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",children:[(0,e.jsxs)("div",{className:"lg-desktop:p-4 p-3",children:[(0,e.jsx)(s.Heading,{size:2,className:"mb-2 text-left text-lg font-bold",children:a?.payBenefitData?.payMethod}),(0,e.jsxs)("div",{className:"lg-desktop:p-4 flex items-center justify-between gap-2 rounded-lg bg-white p-3",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:a?.payBenefitData?.icon,className:"desktop:size-[70px] desktop:h-[34px] size-[40px] h-[20px] shrink-0"}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",html:a?.payBenefitData?.withCheckout})]}),(0,e.jsx)("button",{className:"hover:text-brand-0 desktop:text-[16px] whitespace-nowrap text-sm font-bold underline",onClick:()=>j(!0),children:a?.payBenefitData?.learnMore})]})]}),(0,e.jsx)(J.default,{showModal:X,closeModal:()=>j(!1),children:(0,e.jsx)(s.Picture,{source:a?.payBenefitData?.payImage})})]}),(0,e.jsx)(u.default.Content,{value:"installment",className:"benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",children:(0,e.jsxs)("div",{className:"lg-desktop:p-4 p-3",children:[(0,e.jsx)(s.Heading,{size:2,className:"mb-2 text-left text-lg font-bold",children:a?.installmentBenefitData?.flexibleInstallment}),(0,e.jsx)("div",{className:"lg-desktop:p-4 overflow-hidden rounded-lg bg-white p-3",children:f})]})})]})},I=t=>(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...t,children:(0,e.jsx)("path",{d:"M4 9.19472L8.51935 13.667L16.2668 6.00024",stroke:"#2BBC4F",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})});var he=(0,Q.withLayout)(Ce);
+              [&_li]:text-left`,children:[T.enable?(0,e.jsxs)("li",{children:[(0,e.jsx)("svg",{className:"desktop:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM17 13C17.5523 13 18 13.4477 18 14C18 14.5523 17.5523 15 17 15H9.41406L9.70703 15.293C10.0976 15.6835 10.0976 16.3165 9.70703 16.707C9.31651 17.0976 8.68349 17.0976 8.29297 16.707L6.29297 14.707C6.00697 14.421 5.92139 13.9909 6.07617 13.6172C6.23098 13.2436 6.59558 13 7 13H17ZM14.293 7.29297C14.6835 6.90244 15.3165 6.90244 15.707 7.29297L17.707 9.29297C17.993 9.57897 18.0786 10.0091 17.9238 10.3828C17.769 10.7564 17.4044 11 17 11H7C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9H14.5859L14.293 8.70703C13.9024 8.31651 13.9024 7.68349 14.293 7.29297Z",fill:"#1D1D1F"})}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:!se&&n?.email?(0,e.jsxs)(e.Fragment,{children:[a?.membershipBenefitData?.creditsAfterActivation,(0,e.jsx)("span",{role:"button",tabIndex:0,onClick:()=>le(),className:"underline",children:a?.membershipBenefitData?.active})]}):T?.config?.label?.replace("{{amount}}",(0,g.formatPrice)({amount:T?.config?.amount??0,currencyCode:i.price.currencyCode,locale:C}))})]}):null,h.enable&&(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:"desktop:size-6 size-4",viewBox:"0 0 24 24",fill:"none",children:(0,e.jsx)("path",{d:"M20 3.5C21.6569 3.5 23 4.84315 23 6.5V9.65625C23 10.0791 22.7342 10.4566 22.3359 10.5986C21.6665 10.8372 21.1816 11.4844 21.1816 12.25C21.1816 13.0156 21.6665 13.6628 22.3359 13.9014C22.7342 14.0434 23 14.4209 23 14.8438V18C23 19.6569 21.6569 21 20 21H4C2.34315 21 1 19.6569 1 18V14.8438L1.01172 14.6875C1.06803 14.3301 1.31557 14.0256 1.66406 13.9014C2.33345 13.6628 2.81836 13.0156 2.81836 12.25C2.81836 11.4844 2.33345 10.8372 1.66406 10.5986C1.26583 10.4566 1 10.0791 1 9.65625V6.5C1 4.84315 2.34315 3.5 4 3.5H20ZM4 5.5C3.44772 5.5 3 5.94772 3 6.5V9.03125C4.08987 9.68678 4.81836 10.8833 4.81836 12.25C4.81836 13.6165 4.08963 14.8122 3 15.4678V18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18V15.4678C19.9104 14.8122 19.1816 13.6165 19.1816 12.25C19.1816 10.8833 19.9101 9.68677 21 9.03125V6.5C21 5.94772 20.5523 5.5 20 5.5H4ZM15.793 6.79297C16.1835 6.40244 16.8165 6.40244 17.207 6.79297C17.5976 7.18349 17.5976 7.81651 17.207 8.20703L8.20703 17.207C7.81651 17.5976 7.18349 17.5976 6.79297 17.207C6.40244 16.8165 6.40244 16.1835 6.79297 15.793L15.793 6.79297ZM15.25 13.25C16.3546 13.25 17.25 14.1454 17.25 15.25C17.25 16.3546 16.3546 17.25 15.25 17.25C14.1454 17.25 13.25 16.3546 13.25 15.25C13.25 14.1454 14.1454 13.25 15.25 13.25ZM15.25 14.75C14.9739 14.75 14.75 14.9739 14.75 15.25C14.75 15.5261 14.9739 15.75 15.25 15.75C15.5261 15.75 15.75 15.5261 15.75 15.25C15.75 14.9739 15.5261 14.75 15.25 14.75ZM8.75 6.75C9.85457 6.75 10.75 7.64543 10.75 8.75C10.75 9.85457 9.85457 10.75 8.75 10.75C7.64543 10.75 6.75 9.85457 6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75ZM8.75 8.25C8.47386 8.25 8.25 8.47386 8.25 8.75C8.25 9.02614 8.47386 9.25 8.75 9.25C9.02614 9.25 9.25 9.02614 9.25 8.75C9.25 8.47386 9.02614 8.25 8.75 8.25Z",fill:"#1D1D1F"})}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:(0,F.replaceTemplate)(a?.membershipBenefitData?.forNewMember,{amount:(0,g.formatPrice)({amount:h?.config?.amount??0,currencyCode:i.price.currencyCode,locale:C})})})]}),!!n?.email&&(0,e.jsx)(I,{})]}),a?.membershipBenefitData?.equities?.map((o,r)=>o.modalText?(0,e.jsxs)("li",{className:"justify-between gap-2",children:[(0,e.jsxs)("button",{onClick:()=>c?.({title:o.label,content:o.modalText}),className:"flex justify-between",children:[(0,e.jsx)(s.Picture,{source:o.icon,alt:o.text,className:"desktop:size-6 size-4 shrink-0"}),(0,e.jsx)(s.Text,{className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:o.text})]},r),!!n?.email&&(0,e.jsx)(I,{})]},r):(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:o.icon,alt:o.text,className:"desktop:size-6 size-4 shrink-0"}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-wrap text-left text-[16px] font-bold",children:o.label})]}),!!n?.email&&(0,e.jsx)(I,{})]},r)),ie.enable?(0,e.jsxs)("li",{className:"justify-between",children:[(0,e.jsxs)("div",{className:"flex gap-2",children:[(0,e.jsx)("svg",{className:"desktop:size-6 size-4",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M19 3C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H10V16H21C21.5523 16 22 16.4477 22 17C22 17.5523 21.5523 18 21 18H19.9961C19.9961 19.6559 18.6547 21 16.998 21C15.3414 21 14 19.6559 14 18H10C10 19.6568 8.65684 21 7 21C5.34317 21 4 19.6568 4 18H2C1.44772 18 1 17.5523 1 17V10.6738L1.00488 10.5771C1.02632 10.3554 1.12145 10.146 1.27637 9.9834L4.77637 6.31055L4.84961 6.24023C5.02993 6.08586 5.26042 6 5.5 6H8V5C8 3.89544 8.89541 3 10 3H19ZM6.00488 18.1025C6.05622 18.6067 6.48234 19 7 19C7.51766 19 7.94378 18.6067 7.99512 18.1025L8 18H6L6.00488 18.1025ZM16.0049 18.1025C16.0561 18.6074 16.4823 19 16.998 19C17.5138 19 17.94 18.6074 17.9912 18.1025L17.9961 18H16L16.0049 18.1025ZM3 11.0723V16H8V8H5.92773L3 11.0723ZM21.6621 6.8252C22.0348 6.41765 22.6676 6.38902 23.0752 6.76172C23.4827 7.13443 23.5104 7.76725 23.1377 8.1748L18.0518 13.7363C17.6625 14.162 17.003 14.1954 16.5732 13.8105L13.333 10.9092C12.9216 10.5408 12.8865 9.90853 13.2549 9.49707C13.6232 9.08565 14.2555 9.05066 14.667 9.41895L17.208 11.6943L21.6621 6.8252Z",fill:"#1D1D1F"})}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",children:a?.membershipBenefitData?.expressShipping})]}),!!n?.email&&(0,e.jsx)(I,{})]}):null]})]}),!n?.email&&(0,e.jsx)("div",{className:"desktop:pt-4 pt-2",children:(0,e.jsx)(s.Button,{variant:"primary",className:"w-full",onClick:()=>H?.(),children:ne?.signUp})})]})}),(0,e.jsxs)(u.default.Content,{value:"pay",className:"benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",children:[(0,e.jsxs)("div",{className:"lg-desktop:p-4 p-3",children:[(0,e.jsx)(s.Heading,{size:2,className:"mb-2 text-left text-lg font-bold",children:a?.payBenefitData?.payMethod}),(0,e.jsxs)("div",{className:"lg-desktop:p-4 flex items-center justify-between gap-2 rounded-lg bg-white p-3",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:a?.payBenefitData?.icon,className:"desktop:size-[70px] desktop:h-[34px] size-[40px] h-[20px] shrink-0"}),(0,e.jsx)(s.Text,{as:"p",className:"x:text-[14px] text-left text-[16px] font-bold",html:a?.payBenefitData?.withCheckout})]}),(0,e.jsx)("button",{className:"hover:text-brand-0 desktop:text-[16px] whitespace-nowrap text-sm font-bold underline",onClick:()=>O(!0),children:a?.payBenefitData?.learnMore})]})]}),(0,e.jsx)(Q.default,{showModal:te,closeModal:()=>O(!1),children:(0,e.jsx)(s.Picture,{source:a?.payBenefitData?.payImage})})]}),(0,e.jsx)(u.default.Content,{value:"installment",forceMount:!0,className:(0,x.cn)("benefits-tabs-content lg-desktop:h-[240px] desktop:h-[196px] laptop:h-[220px] h-[180px] overflow-y-auto ",ee?"block":"hidden"),children:(0,e.jsxs)("div",{className:"lg-desktop:p-4 p-3",children:[(0,e.jsx)(s.Heading,{size:2,className:"mb-2 text-left text-lg font-bold",children:a?.installmentBenefitData?.flexibleInstallment}),(0,e.jsx)("div",{className:"lg-desktop:p-4 overflow-hidden rounded-lg bg-white p-3",children:f})]})})]}):null},I=t=>(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...t,children:(0,e.jsx)("path",{d:"M4 9.19472L8.51935 13.667L16.2668 6.00024",stroke:"#2BBC4F",strokeWidth:"1.67",strokeLinecap:"round",strokeLinejoin:"round"})});var ye=(0,X.withLayout)(ve);
 //# sourceMappingURL=BenefitsTab.js.map