npm - @anker-in/headless-ui - Versions diffs - 1.3.24 → 1.3.25 - Mend

@anker-in/headless-ui 1.3.24 → 1.3.25

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

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var j=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var n in t)I(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!O.call(e,c)&&c!==n&&I(e,c,{get:()=>t[c],enumerable:!(d=A(t,c))||d.enumerable});return e};var h=(e,t,n)=>(n=e!=null?j(P(e)):{},E(t||!e||!e.__esModule?I(n,"default",{value:e,enumerable:!0}):n,e)),W=e=>E(I({},"__esModule",{value:!0}),e);var F={};V(F,{default:()=>U});module.exports=W(F);var i=require("react/jsx-runtime"),H=h(require("../Title/index.js")),o=require("../../helpers/utils.js"),y=h(require("../../components/picture.js")),L=h(require("../../components/button.js")),C=h(require("../SwiperBox/index.js")),D=require("../../shared/Styles.js"),r=h(require("react")),R=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js"),S=h(require("../../shared/throttle.js")),x=require("../../components/heading.js");const a="image",m="scene_banner",q=({item:e,idx:t,itemShape:n,hoverIndex:d,getRef:c,handleSwiperItemClick:T,contentWidth:p,primaryButton:u,event:f,data:b,accordionRef:N})=>{const k=d===t,w=k?8:1;return(0,R.useExposure)({current:N.current[t]},{componentType:a,componentName:m,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{style:{flex:`${w} 1 0%`,transition:"all 0.6s"},ref:$=>{$&&c(t,$)},className:(0,o.cn)("relative cursor-pointer overflow-hidden",n==="round"?"rounded-2xl":""),onMouseEnter:()=>T(t),onClick:()=>{T(t)},children:[e?.imgLink?(0,i.jsx)("a",{href:(0,g.trackUrlRef)(e.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,i.jsx)(y.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}):(0,i.jsx)(y.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),(0,i.jsxs)("div",{style:{width:p},className:(0,o.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",k&&p?"opacity-100":"opacity-0"),children:[(0,i.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,i.jsx)(x.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",html:e?.title}),(0,i.jsx)(x.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",html:e?.subTitle})]}),u&&(0,i.jsxs)(L.default,{className:(0,o.cn)("mb-1.5 font-bold"),as:"a",href:(0,g.trackUrlRef)(e?.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>f?.primaryButton?.(b,t),children:[u,(0,i.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},J=({data:e,configuration:t})=>{const n=(0,r.useRef)(null);return(0,R.useExposure)(n,{componentType:a,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{ref:n,className:(0,o.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[e?.imgLink?(0,i.jsx)("a",{href:(0,g.trackUrlRef)(e.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:(0,i.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}):(0,i.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),(0,i.jsxs)("div",{className:(0,o.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,i.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,i.jsx)(x.Heading,{as:"h3",className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",html:e?.title}),(0,i.jsx)(x.Heading,{as:"h4",className:"text-info-primary line-clamp-2 text-sm font-bold",html:e?.subTitle})]}),t?.primaryButton&&(0,i.jsx)(L.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,o.cn)("text-info-primary text-sm font-bold"),href:(0,g.trackUrlRef)(e.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},B=r.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:n="",event:d,...c},T)=>{const[p,u]=(0,r.useState)(0),f=(0,r.useRef)(0),b=(0,r.useRef)([]),[N,k]=(0,r.useState)(0),w=(0,r.useRef)(null);(0,r.useImperativeHandle)(T,()=>w.current);const $=(l,s)=>{s&&(b.current[l]=s)};(0,r.useEffect)(()=>{const l=()=>{b.current[f.current]&&k(b.current[f.current].offsetWidth)};l();const s=(0,S.default)(l,300);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const M=(0,r.useCallback)(l=>{p!==l&&(u(l),f.current=l)},[e?.products,p]);return(0,r.useEffect)(()=>{let l;return t?.enabled&&(l=setInterval(()=>{u(s=>{const _=s??0;let v;if(t.loop!==!1)v=(_+1)%e?.products?.length;else if(v=_+1,v>=e?.products?.length)return v=e?.products?.length-1,l&&clearInterval(l),_;return f.current=v,v})},t?.interval)),()=>{l&&clearInterval(l)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,M]),(0,i.jsxs)("div",{...c,ref:w,children:[e?.title&&(0,i.jsx)(H.default,{data:{title:e?.title}}),(0,i.jsx)("div",{className:(0,o.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)("div",{className:(0,o.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",n),children:e?.products?.map((l,s)=>(0,i.jsx)(q,{item:l,idx:s,itemShape:e?.itemShape,hoverIndex:p,getRef:$,handleSwiperItemClick:M,contentWidth:N,primaryButton:e?.primaryButton,event:d,data:e,accordionRef:b},s))})}),(0,i.jsx)("div",{className:(0,o.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)(C.default,{className:(0,o.cn)("h-[400px] !overflow-visible",n),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:d,title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});B.displayName="AccordionCards";var U=(0,D.withLayout)(B);
+"use strict";"use client";var j=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var o in t)I(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!O.call(e,c)&&c!==o&&I(e,c,{get:()=>t[c],enumerable:!(d=A(t,c))||d.enumerable});return e};var h=(e,t,o)=>(o=e!=null?j(P(e)):{},E(t||!e||!e.__esModule?I(o,"default",{value:e,enumerable:!0}):o,e)),W=e=>E(I({},"__esModule",{value:!0}),e);var F={};V(F,{default:()=>U});module.exports=W(F);var i=require("react/jsx-runtime"),H=h(require("../Title/index.js")),l=require("../../helpers/utils.js"),g=h(require("../../components/picture.js")),L=h(require("../../components/button.js")),C=h(require("../SwiperBox/index.js")),D=require("../../shared/Styles.js"),n=h(require("react")),R=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js"),S=h(require("../../shared/throttle.js")),x=require("../../components/heading.js");const a="image",m="scene_banner",q=({item:e,idx:t,itemShape:o,hoverIndex:d,getRef:c,handleSwiperItemClick:T,contentWidth:p,primaryButton:u,event:f,data:b,accordionRef:N})=>{const k=d===t,w=k?8:1;return(0,R.useExposure)({current:N.current[t]},{componentType:a,componentName:m,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{style:{flex:`${w} 1 0%`,transition:"all 0.6s"},ref:$=>{$&&c(t,$)},className:(0,l.cn)("rounded-box relative cursor-pointer overflow-hidden"),onMouseEnter:()=>T(t),onClick:()=>{T(t)},children:[e?.imgLink?(0,i.jsx)("a",{href:(0,y.trackUrlRef)(e.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,i.jsx)(g.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}):(0,i.jsx)(g.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),(0,i.jsxs)("div",{style:{width:p},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",k&&p?"opacity-100":"opacity-0"),children:[(0,i.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,i.jsx)(x.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",html:e?.title}),(0,i.jsx)(x.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",html:e?.subTitle})]}),u&&(0,i.jsxs)(L.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,y.trackUrlRef)(e?.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>f?.primaryButton?.(b,t),children:[u,(0,i.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},J=({data:e,configuration:t})=>{const o=(0,n.useRef)(null);return(0,R.useExposure)(o,{componentType:a,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{ref:o,className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid","rounded-box"),children:[e?.imgLink?(0,i.jsx)("a",{href:(0,y.trackUrlRef)(e.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:(0,i.jsx)(g.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}):(0,i.jsx)(g.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),(0,i.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,i.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,i.jsx)(x.Heading,{as:"h3",className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",html:e?.title}),(0,i.jsx)(x.Heading,{as:"h4",className:"text-info-primary line-clamp-2 text-sm font-bold",html:e?.subTitle})]}),t?.primaryButton&&(0,i.jsx)(L.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,l.cn)("text-info-primary text-sm font-bold"),href:(0,y.trackUrlRef)(e.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},B=n.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:o="",event:d,...c},T)=>{const[p,u]=(0,n.useState)(0),f=(0,n.useRef)(0),b=(0,n.useRef)([]),[N,k]=(0,n.useState)(0),w=(0,n.useRef)(null);(0,n.useImperativeHandle)(T,()=>w.current);const $=(r,s)=>{s&&(b.current[r]=s)};(0,n.useEffect)(()=>{const r=()=>{b.current[f.current]&&k(b.current[f.current].offsetWidth)};r();const s=(0,S.default)(r,300);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const M=(0,n.useCallback)(r=>{p!==r&&(u(r),f.current=r)},[e?.products,p]);return(0,n.useEffect)(()=>{let r;return t?.enabled&&(r=setInterval(()=>{u(s=>{const _=s??0;let v;if(t.loop!==!1)v=(_+1)%e?.products?.length;else if(v=_+1,v>=e?.products?.length)return v=e?.products?.length-1,r&&clearInterval(r),_;return f.current=v,v})},t?.interval)),()=>{r&&clearInterval(r)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,M]),(0,i.jsxs)("div",{...c,ref:w,children:[e?.title&&(0,i.jsx)(H.default,{data:{title:e?.title}}),(0,i.jsx)("div",{className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",o),children:e?.products?.map((r,s)=>(0,i.jsx)(q,{item:r,idx:s,itemShape:e?.itemShape,hoverIndex:p,getRef:$,handleSwiperItemClick:M,contentWidth:N,primaryButton:e?.primaryButton,event:d,data:e,accordionRef:b},s))})}),(0,i.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)(C.default,{className:(0,l.cn)("h-[400px] !overflow-visible",o),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:d,title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});B.displayName="AccordionCards";var U=(0,D.withLayout)(B);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: Img\n  mobileImg?: Img\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n  imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /**\n   * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n   */\n  autoplay?: {\n    /**\n     * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n     */\n    enabled: boolean\n    /**\n     * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n     */\n    loop?: boolean\n    /**\n     * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n     */\n    interval?: number\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n}\n\nconst AccordionCardsPcItem = ({\n  item,\n  idx,\n  itemShape,\n  hoverIndex,\n  getRef,\n  handleSwiperItemClick,\n  contentWidth,\n  primaryButton,\n  event,\n  data,\n  accordionRef,\n}: {\n  item: ItemType\n  idx: number\n  itemShape: 'round' | 'square' | undefined\n  hoverIndex: number | null\n  getRef: (_idx: number, _el: HTMLDivElement) => void\n  handleSwiperItemClick: (_idx: number) => void\n  contentWidth: number\n  primaryButton: string | undefined\n  event: any\n  data: AccordionCardsType['data']\n  accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n  const isExpanded = hoverIndex === idx\n  const flexValue = isExpanded ? 8 : 1\n\n  useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n    componentType,\n    componentName,\n    componentTitle: item?.title,\n    position: idx + 1,\n    componentDescription: item?.subTitle,\n  })\n\n  return (\n    <div\n      key={idx}\n      style={{\n        flex: `${flexValue} 1 0%`,\n        transition: 'all 0.6s',\n      }}\n      ref={(el: HTMLDivElement | null) => {\n        if (el) getRef(idx, el)\n      }}\n      className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n      onMouseEnter={() => handleSwiperItemClick(idx)}\n      onClick={() => {\n        handleSwiperItemClick(idx)\n      }}\n    >\n      {item?.imgLink ? (\n        <a\n          href={trackUrlRef(item.imgLink, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n        >\n          <Picture\n            source={item?.img?.url}\n            className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n            alt={item?.img?.alt || ''}\n          />\n        </a>\n      ) : (\n        <Picture\n          source={item?.img?.url}\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          alt={item?.img?.alt || ''}\n        />\n      )}\n      <div\n        style={{\n          width: contentWidth,\n        }}\n        className={cn(\n          'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n          isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n        )}\n      >\n        <div className=\"mr-16 flex-1 overflow-hidden\">\n          <Heading\n            as=\"h3\"\n            className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n            html={item?.title}\n          />\n          <Heading\n            as=\"h4\"\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n            html={item?.subTitle}\n          />\n        </div>\n        {primaryButton && (\n          <Button\n            className={cn('mb-1.5 font-bold')}\n            as=\"a\"\n            href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n            onClick={() => event?.primaryButton?.(data, idx)}\n          >\n            {primaryButton}\n            <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.subTitle,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      {data?.imgLink ? (\n        <a\n          href={trackUrlRef(data.imgLink, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n          data-headless-nav-position={`''#${configuration?.index + 1}`}\n        >\n          <Picture\n            className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n            source={data?.mobileImg?.url || ''}\n            alt={data?.mobileImg?.alt || ''}\n          />\n        </a>\n      ) : (\n        <Picture\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          source={data?.mobileImg?.url || ''}\n          alt={data?.mobileImg?.alt || ''}\n        />\n      )}\n      <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n        <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n          <Heading\n            as=\"h3\"\n            className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n            html={data?.title}\n          />\n          <Heading as=\"h4\" className=\"text-info-primary line-clamp-2 text-sm font-bold\" html={data?.subTitle} />\n        </div>\n\n        {configuration?.primaryButton && (\n          <Button\n            as=\"a\"\n            variant=\"secondary\"\n            aria-label={data?.title ?? data?.subTitle}\n            className={cn('text-info-primary text-sm font-bold')}\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-nav-position={`''#${configuration?.index + 1}`}\n            data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n  ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n    const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n    const hoverIndexRef = useRef<number>(0)\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const [contentWidth, setContentWidth] = useState<number>(0)\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n      if (el) {\n        accordionRef.current[index] = el\n      }\n    }\n\n    useEffect(() => {\n      const handleResize = () => {\n        if (accordionRef.current[hoverIndexRef.current]) {\n          setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n        }\n      }\n      handleResize()\n      const throttleResize = throttle(handleResize, 300)\n      window.addEventListener('resize', throttleResize)\n      return () => window.removeEventListener('resize', throttleResize)\n    }, [])\n\n    const handleSwiperItemClick = useCallback(\n      (idx: number) => {\n        if (hoverIndex === idx) return\n        // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n        setHoverIndex(idx)\n        hoverIndexRef.current = idx\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [data?.products, hoverIndex]\n    )\n\n    useEffect(() => {\n      let autoPlayTimer: NodeJS.Timeout\n      if (autoplay?.enabled) {\n        autoPlayTimer = setInterval(() => {\n          setHoverIndex(prev => {\n            const currentIndex = prev ?? 0\n            let nextIndex: number\n\n            if (autoplay.loop !== false) {\n              // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n              nextIndex = (currentIndex + 1) % data?.products?.length\n            } else {\n              // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n              nextIndex = currentIndex + 1\n              if (nextIndex >= data?.products?.length) {\n                nextIndex = data?.products?.length - 1\n                // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n                if (autoPlayTimer) {\n                  clearInterval(autoPlayTimer)\n                }\n                return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n              }\n            }\n\n            hoverIndexRef.current = nextIndex\n            return nextIndex\n          })\n        }, autoplay?.interval)\n      }\n      return () => {\n        if (autoPlayTimer) {\n          clearInterval(autoPlayTimer)\n        }\n      }\n    }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n    return (\n      <div {...rest} ref={innerRef}>\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n          <div\n            className={cn(\n              'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n              className\n            )}\n          >\n            {data?.products?.map((item, idx) => (\n              <AccordionCardsPcItem\n                key={idx}\n                item={item}\n                idx={idx}\n                itemShape={data?.itemShape}\n                hoverIndex={hoverIndex}\n                getRef={getRef}\n                handleSwiperItemClick={handleSwiperItemClick}\n                contentWidth={contentWidth}\n                primaryButton={data?.primaryButton}\n                event={event}\n                data={data}\n                accordionRef={accordionRef}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n          <SwiperBox\n            className={cn('h-[400px] !overflow-visible', className)}\n            id={'AccordionCards' + data?.key}\n            data={{\n              list: data?.products,\n              configuration: {\n                shape: data?.shape,\n                itemShape: data?.itemShape,\n                primaryButton: data?.primaryButton,\n                event: event,\n                title: data?.title,\n              },\n            }}\n            Slide={MobileItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: Img\n  mobileImg?: Img\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n  imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /**\n   * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n   */\n  autoplay?: {\n    /**\n     * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n     */\n    enabled: boolean\n    /**\n     * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n     */\n    loop?: boolean\n    /**\n     * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n     */\n    interval?: number\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n}\n\nconst AccordionCardsPcItem = ({\n  item,\n  idx,\n  itemShape,\n  hoverIndex,\n  getRef,\n  handleSwiperItemClick,\n  contentWidth,\n  primaryButton,\n  event,\n  data,\n  accordionRef,\n}: {\n  item: ItemType\n  idx: number\n  itemShape: 'round' | 'square' | undefined\n  hoverIndex: number | null\n  getRef: (_idx: number, _el: HTMLDivElement) => void\n  handleSwiperItemClick: (_idx: number) => void\n  contentWidth: number\n  primaryButton: string | undefined\n  event: any\n  data: AccordionCardsType['data']\n  accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n  const isExpanded = hoverIndex === idx\n  const flexValue = isExpanded ? 8 : 1\n\n  useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n    componentType,\n    componentName,\n    componentTitle: item?.title,\n    position: idx + 1,\n    componentDescription: item?.subTitle,\n  })\n\n  return (\n    <div\n      key={idx}\n      style={{\n        flex: `${flexValue} 1 0%`,\n        transition: 'all 0.6s',\n      }}\n      ref={(el: HTMLDivElement | null) => {\n        if (el) getRef(idx, el)\n      }}\n      className={cn('rounded-box relative cursor-pointer overflow-hidden')}\n      onMouseEnter={() => handleSwiperItemClick(idx)}\n      onClick={() => {\n        handleSwiperItemClick(idx)\n      }}\n    >\n      {item?.imgLink ? (\n        <a\n          href={trackUrlRef(item.imgLink, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n        >\n          <Picture\n            source={item?.img?.url}\n            className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n            alt={item?.img?.alt || ''}\n          />\n        </a>\n      ) : (\n        <Picture\n          source={item?.img?.url}\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          alt={item?.img?.alt || ''}\n        />\n      )}\n      <div\n        style={{\n          width: contentWidth,\n        }}\n        className={cn(\n          'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n          isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n        )}\n      >\n        <div className=\"mr-16 flex-1 overflow-hidden\">\n          <Heading\n            as=\"h3\"\n            className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n            html={item?.title}\n          />\n          <Heading\n            as=\"h4\"\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n            html={item?.subTitle}\n          />\n        </div>\n        {primaryButton && (\n          <Button\n            className={cn('mb-1.5 font-bold')}\n            as=\"a\"\n            href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n            onClick={() => event?.primaryButton?.(data, idx)}\n          >\n            {primaryButton}\n            <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.subTitle,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n        'rounded-box'\n      )}\n    >\n      {data?.imgLink ? (\n        <a\n          href={trackUrlRef(data.imgLink, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n          data-headless-nav-position={`''#${configuration?.index + 1}`}\n        >\n          <Picture\n            className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n            source={data?.mobileImg?.url || ''}\n            alt={data?.mobileImg?.alt || ''}\n          />\n        </a>\n      ) : (\n        <Picture\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          source={data?.mobileImg?.url || ''}\n          alt={data?.mobileImg?.alt || ''}\n        />\n      )}\n      <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n        <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n          <Heading\n            as=\"h3\"\n            className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n            html={data?.title}\n          />\n          <Heading as=\"h4\" className=\"text-info-primary line-clamp-2 text-sm font-bold\" html={data?.subTitle} />\n        </div>\n\n        {configuration?.primaryButton && (\n          <Button\n            as=\"a\"\n            variant=\"secondary\"\n            aria-label={data?.title ?? data?.subTitle}\n            className={cn('text-info-primary text-sm font-bold')}\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-nav-position={`''#${configuration?.index + 1}`}\n            data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n  ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n    const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n    const hoverIndexRef = useRef<number>(0)\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const [contentWidth, setContentWidth] = useState<number>(0)\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n      if (el) {\n        accordionRef.current[index] = el\n      }\n    }\n\n    useEffect(() => {\n      const handleResize = () => {\n        if (accordionRef.current[hoverIndexRef.current]) {\n          setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n        }\n      }\n      handleResize()\n      const throttleResize = throttle(handleResize, 300)\n      window.addEventListener('resize', throttleResize)\n      return () => window.removeEventListener('resize', throttleResize)\n    }, [])\n\n    const handleSwiperItemClick = useCallback(\n      (idx: number) => {\n        if (hoverIndex === idx) return\n        // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n        setHoverIndex(idx)\n        hoverIndexRef.current = idx\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [data?.products, hoverIndex]\n    )\n\n    useEffect(() => {\n      let autoPlayTimer: NodeJS.Timeout\n      if (autoplay?.enabled) {\n        autoPlayTimer = setInterval(() => {\n          setHoverIndex(prev => {\n            const currentIndex = prev ?? 0\n            let nextIndex: number\n\n            if (autoplay.loop !== false) {\n              // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n              nextIndex = (currentIndex + 1) % data?.products?.length\n            } else {\n              // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n              nextIndex = currentIndex + 1\n              if (nextIndex >= data?.products?.length) {\n                nextIndex = data?.products?.length - 1\n                // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n                if (autoPlayTimer) {\n                  clearInterval(autoPlayTimer)\n                }\n                return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n              }\n            }\n\n            hoverIndexRef.current = nextIndex\n            return nextIndex\n          })\n        }, autoplay?.interval)\n      }\n      return () => {\n        if (autoPlayTimer) {\n          clearInterval(autoPlayTimer)\n        }\n      }\n    }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n    return (\n      <div {...rest} ref={innerRef}>\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n          <div\n            className={cn(\n              'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n              className\n            )}\n          >\n            {data?.products?.map((item, idx) => (\n              <AccordionCardsPcItem\n                key={idx}\n                item={item}\n                idx={idx}\n                itemShape={data?.itemShape}\n                hoverIndex={hoverIndex}\n                getRef={getRef}\n                handleSwiperItemClick={handleSwiperItemClick}\n                contentWidth={contentWidth}\n                primaryButton={data?.primaryButton}\n                event={event}\n                data={data}\n                accordionRef={accordionRef}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n          <SwiperBox\n            className={cn('h-[400px] !overflow-visible', className)}\n            id={'AccordionCards' + data?.key}\n            data={{\n              list: data?.products,\n              configuration: {\n                shape: data?.shape,\n                itemShape: data?.itemShape,\n                primaryButton: data?.primaryButton,\n                event: event,\n                title: data?.title,\n              },\n            }}\n            Slide={MobileItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
+  "mappings": "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",
   "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var T=Object.create;var m=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(e,i)=>{for(var r in i)m(e,r,{get:i[r],enumerable:!0})},v=(e,i,r,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of I(i))!D.call(e,n)&&n!==r&&m(e,n,{get:()=>i[n],enumerable:!(o=E(i,n))||o.enumerable});return e};var h=(e,i,r)=>(r=e!=null?T(j(e)):{},v(i||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),q=e=>v(m({},"__esModule",{value:!0}),e);var W={};H(W,{default:()=>Q});module.exports=q(W);var t=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=h(require("../../components/picture.js")),L=require("../../shared/Styles.js"),N=require("react-responsive"),C=require("../../hooks/useExposure.js"),M=require("../AiuiProvider/index.js"),c=require("swiper/react"),a=require("swiper/modules"),G=require("../Title/index.js"),S=h(require("../../components/link.js"));const z="copy",R="store_benefits",F=(e,i)=>{const r=[];for(let o=0;o<e.length;o+=i)r.push(e.slice(o,o+i));return r},w=(0,s.forwardRef)(({data:{items:e=[],itemShape:i},className:r},o)=>{const[n,B]=(0,s.useState)(!1),f=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,s.useRef)(null),u=(0,s.useRef)(null),{locale:k="us"}=(0,M.useAiuiContext)();(0,s.useImperativeHandle)(o,()=>u.current),(0,C.useExposure)(u,{componentType:z,componentName:R}),(0,s.useEffect)(()=>{B(f)},[f]);const A=n?F(e,3):e;return(0,t.jsx)("div",{ref:u,className:(0,l.cn)("brand-equity-wrapper w-full",r),children:n?(0,t.jsxs)(c.Swiper,{className:(0,l.cn)(r),modules:[a.FreeMode,a.Mousewheel,a.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:x.current},breakpoints:{0:{spaceBetween:12}},children:[A?.map((p,d)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((P,g)=>(0,t.jsx)(b,{data:P,itemShape:i,index:g,locale:k},g))},"SwiperSlide"+d)),(0,t.jsx)("div",{ref:x,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,l.cn)("laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3"),children:e.map((p,d)=>(0,t.jsx)(b,{data:p,itemShape:i,index:d,locale:k},d))})})}),b=({data:e,itemShape:i,index:r,locale:o})=>(0,t.jsxs)("div",{className:(0,l.cn)("brand-equity-item","lg-desktop:p-8 desktop:p-6 p-4","box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]",i==="round"?"rounded-box":"rounded-none"),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),(0,t.jsx)("div",{className:"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsxs)("div",{className:"box-border overflow-hidden",children:[(0,t.jsx)("p",{title:e.description||"",className:"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]",children:e.description||""}),(0,t.jsxs)(S.default,{href:(0,l.getLocalizedPath)(e?.link||"",o),asChild:!e?.link,className:"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline",children:[(0,t.jsx)("span",{className:"link-item-text laptop:text-base text-sm",children:e?.linkText}),(0,t.jsx)("div",{className:"size-6",children:(0,t.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,t.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})]});w.displayName="BrandCardLink";var Q=(0,L.withLayout)(w);
+"use strict";"use client";var T=Object.create;var d=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(e,i)=>{for(var r in i)d(e,r,{get:i[r],enumerable:!0})},h=(e,i,r,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of I(i))!D.call(e,l)&&l!==r&&d(e,l,{get:()=>i[l],enumerable:!(o=E(i,l))||o.enumerable});return e};var v=(e,i,r)=>(r=e!=null?T(j(e)):{},h(i||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),q=e=>h(d({},"__esModule",{value:!0}),e);var W={};H(W,{default:()=>Q});module.exports=q(W);var t=require("react/jsx-runtime"),s=require("react"),n=require("../../helpers/utils.js"),y=v(require("../../components/picture.js")),L=require("../../shared/Styles.js"),N=require("react-responsive"),S=require("../../hooks/useExposure.js"),C=require("../AiuiProvider/index.js"),c=require("swiper/react"),a=require("swiper/modules"),G=require("../Title/index.js"),M=v(require("../../components/link.js"));const z="copy",R="store_benefits",F=(e,i)=>{const r=[];for(let o=0;o<e.length;o+=i)r.push(e.slice(o,o+i));return r},w=(0,s.forwardRef)(({data:{items:e=[],itemShape:i},className:r},o)=>{const[l,B]=(0,s.useState)(!1),f=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,s.useRef)(null),u=(0,s.useRef)(null),{locale:k="us"}=(0,C.useAiuiContext)();(0,s.useImperativeHandle)(o,()=>u.current),(0,S.useExposure)(u,{componentType:z,componentName:R}),(0,s.useEffect)(()=>{B(f)},[f]);const A=l?F(e,3):e;return(0,t.jsx)("div",{ref:u,className:(0,n.cn)("brand-equity-wrapper w-full",r),children:l?(0,t.jsxs)(c.Swiper,{className:(0,n.cn)(r),modules:[a.FreeMode,a.Mousewheel,a.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:x.current},breakpoints:{0:{spaceBetween:12}},children:[A?.map((p,m)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((P,g)=>(0,t.jsx)(b,{data:P,itemShape:i,index:g,locale:k},g))},"SwiperSlide"+m)),(0,t.jsx)("div",{ref:x,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,n.cn)("laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3"),children:e.map((p,m)=>(0,t.jsx)(b,{data:p,itemShape:i,index:m,locale:k},m))})})}),b=({data:e,itemShape:i,index:r,locale:o})=>(0,t.jsxs)("div",{className:(0,n.cn)("brand-equity-item","lg-desktop:p-8 desktop:p-6 p-4","box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]","rounded-box"),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),(0,t.jsx)("div",{className:"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsxs)("div",{className:"box-border overflow-hidden",children:[(0,t.jsx)("p",{title:e.description||"",className:"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]",children:e.description||""}),(0,t.jsxs)(M.default,{href:(0,n.getLocalizedPath)(e?.link||"",o),asChild:!e?.link,className:"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline",children:[(0,t.jsx)("span",{className:"link-item-text laptop:text-base text-sm",children:e?.linkText}),(0,t.jsx)("div",{className:"size-6",children:(0,t.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,t.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})]});w.displayName="BrandCardLink";var Q=(0,L.withLayout)(w);
 //# sourceMappingURL=BrandCardLink.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandCardLink/BrandCardLink.tsx"],
-  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandCardLinkProps, BrandCardLinkItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\nimport Link from '../../components/link.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandCardLinkItemProps[], 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 BrandCardLink = forwardRef<HTMLDivElement, BrandCardLinkProps>(\n  ({ data: { items = [], itemShape }, 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    const { locale = 'us' } = useAiuiContext()\n\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        {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) => (\n                    <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3')}>\n            {items.map((item, index) => (\n              <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandCardLinkItem = ({\n  data,\n  itemShape,\n  index,\n  locale,\n}: {\n  data: BrandCardLinkItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n  locale: string\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'lg-desktop:p-8 desktop:p-6 p-4',\n        // 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        'box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]',\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3\">\n        <h3 className=\"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n          {data.title}\n        </h3>\n        <div className=\"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0\">\n          <Picture\n            className=\"size-full object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      </div>\n      <div className=\"box-border overflow-hidden\">\n        <p\n          title={data.description || ''}\n          className=\"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]\"\n        >\n          {data.description || ''}\n        </p>\n        <Link\n          href={getLocalizedPath(data?.link || '', locale)}\n          asChild={!data?.link}\n          className=\"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline\"\n        >\n          <span className=\"link-item-text laptop:text-base text-sm\">{data?.linkText}</span>\n          <div className=\"size-6\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n              ></path>\n            </svg>\n          </div>\n        </Link>\n      </div>\n    </div>\n  )\n}\n\nBrandCardLink.displayName = 'BrandCardLink'\n\nexport default withLayout(BrandCardLink)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandCardLinkProps, BrandCardLinkItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\nimport Link from '../../components/link.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandCardLinkItemProps[], 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 BrandCardLink = forwardRef<HTMLDivElement, BrandCardLinkProps>(\n  ({ data: { items = [], itemShape }, 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    const { locale = 'us' } = useAiuiContext()\n\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        {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) => (\n                    <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('laptop:gap-4 tablet:grid-cols-2 laptop:grid-cols-4 grid grid-cols-1 gap-3')}>\n            {items.map((item, index) => (\n              <BrandCardLinkItem key={index} data={item} itemShape={itemShape} index={index} locale={locale} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandCardLinkItem = ({\n  data,\n  itemShape,\n  index,\n  locale,\n}: {\n  data: BrandCardLinkItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n  locale: string\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'lg-desktop:p-8 desktop:p-6 p-4',\n        // 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        'box-border flex w-full flex-col justify-between overflow-hidden bg-[#DAE7F2]',\n        'rounded-box'\n      )}\n    >\n      <div className=\"lg-desktop:h-[50px] flex h-10 items-center justify-between gap-3\">\n        <h3 className=\"link-item-title lg-desktop:text-[18px] desktop:text-[16px] line-clamp-2 flex-1 text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n          {data.title}\n        </h3>\n        <div className=\"link-item-img lg-desktop:size-[36px] size-[30px] shrink-0\">\n          <Picture\n            className=\"size-full object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      </div>\n      <div className=\"box-border overflow-hidden\">\n        <p\n          title={data.description || ''}\n          className=\"link-item-description lg-desktop:text-[24px] line-clamp-4 text-[20px] font-semibold leading-[1.2] tracking-[-0.04em] text-[#767880]\"\n        >\n          {data.description || ''}\n        </p>\n        <Link\n          href={getLocalizedPath(data?.link || '', locale)}\n          asChild={!data?.link}\n          className=\"desktop:mt-4 mt-2 flex items-center gap-0.5 no-underline hover:underline\"\n        >\n          <span className=\"link-item-text laptop:text-base text-sm\">{data?.linkText}</span>\n          <div className=\"size-6\">\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n              ></path>\n            </svg>\n          </div>\n        </Link>\n      </div>\n    </div>\n  )\n}\n\nBrandCardLink.displayName = 'BrandCardLink'\n\nexport default withLayout(BrandCardLink)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDU,IAAAI,EAAA,6BAlDVC,EAA6E,iBAE7EC,EAAqC,kCACrCC,EAAoB,0CACpBC,EAA2B,kCAI3BC,EAA8B,4BAC9BC,EAA4B,sCAC5BC,EAA+B,oCAE/BN,EAAoC,wBACpCO,EAAiD,0BACjDC,EAAkB,6BAClBC,EAAiB,uCAEjB,MAAMC,EAAgB,OAChBC,EAAgB,iBAEhBC,EAAa,CAACC,EAA+BC,IAAiB,CAClE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAI,OAAQG,GAAKF,EACnCC,EAAO,KAAKF,EAAI,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEpC,OAAOC,CACT,EAEME,KAAgB,cACpB,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,CAAU,EAAG,UAAAC,CAAU,EAAGC,IAAQ,CACvD,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAC1DC,KAAgB,UAAuB,IAAI,EAC3CC,KAAW,UAAuB,IAAI,EACtC,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,KAEzC,uBAAoBN,EAAK,IAAMK,EAAS,OAAyB,KACjE,eAAYA,EAAU,CACpB,cAAAhB,EACA,cAAAC,CACF,CAAC,KAED,aAAU,IAAM,CACdY,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,MAAMI,EAAaN,EAAWV,EAAWM,EAAO,CAAC,EAAIA,EACrD,SACE,OAAC,OAAI,IAAKQ,EAAU,aAAW,MAAG,8BAA+BN,CAAS,EACvE,SAAAE,KACC,QAAC,UACC,aAAW,MAAGF,CAAS,EACvB,QAAS,CAAC,WAAU,aAAY,YAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,GAAIK,EAAc,OACpB,EACA,YAAa,CACX,EAAG,CACD,aAAc,EAChB,CACF,EAEC,UAAAG,GAAY,IAAI,CAACC,EAAMC,OACtB,OAAC,eAAyC,UAAU,uBACjD,eAAM,QAAQD,CAAI,GACjBA,GAAM,IAAI,CAACA,EAAME,OACf,OAACC,EAAA,CAA8B,KAAMH,EAAM,UAAWV,EAAW,MAAOY,EAAO,OAAQJ,GAA/DI,CAAuE,CAChG,GAJa,cAAgBD,CAKlC,CACD,KACD,OAAC,OAAI,IAAKL,EAAe,UAAU,2BAA2B,GAChE,KAEA,OAAC,OAAI,aAAW,MAAG,2EAA2E,EAC3F,SAAAP,EAAM,IAAI,CAACW,EAAME,OAChB,OAACC,EAAA,CAA8B,KAAMH,EAAM,UAAWV,EAAW,MAAOY,EAAO,OAAQJ,GAA/DI,CAAuE,CAChG,EACH,EAEJ,CAEJ,CACF,EAEMC,EAAoB,CAAC,CACzB,KAAAC,EACA,UAAAd,EACA,MAAAY,EACA,OAAAJ,CACF,OAOI,QAAC,OACC,aAAW,MACT,oBACA,iCAEA,+EACA,aACF,EAEA,qBAAC,OAAI,UAAU,mEACb,oBAAC,MAAG,UAAU,uJACX,SAAAM,EAAK,MACR,KACA,OAAC,OAAI,UAAU,4DACb,mBAAC,EAAAC,QAAA,CACC,UAAU,yBACV,OAAQD,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,EACF,GACF,KACA,QAAC,OAAI,UAAU,6BACb,oBAAC,KACC,MAAOA,EAAK,aAAe,GAC3B,UAAU,sIAET,SAAAA,EAAK,aAAe,GACvB,KACA,QAAC,EAAAE,QAAA,CACC,QAAM,oBAAiBF,GAAM,MAAQ,GAAIN,CAAM,EAC/C,QAAS,CAACM,GAAM,KAChB,UAAU,2EAEV,oBAAC,QAAK,UAAU,0CAA2C,SAAAA,GAAM,SAAS,KAC1E,OAAC,OAAI,UAAU,SACb,mBAAC,OACC,MAAM,KACN,OAAO,KACP,UAAU,WACV,MAAM,6BACN,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,UAAU,iCACV,EAAE,0BACF,OAAO,OACP,YAAY,MACZ,cAAc,QACf,EACH,EACF,GACF,GACF,GACF,EAIJhB,EAAc,YAAc,gBAE5B,IAAOpB,KAAQ,cAAWoB,CAAa",
   "names": ["BrandCardLink_exports", "__export", "BrandCardLink_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_AiuiProvider", "import_modules", "import_Title", "import_link", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandCardLink", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "locale", "itemsArray", "item", "jIndex", "index", "BrandCardLinkItem", "data", "Picture", "Link"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var i in t)d(e,i,{get:t[i],enumerable:!0})},k=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!A.call(e,o)&&o!==i&&d(e,o,{get:()=>t[o],enumerable:!(a=P(t,o))||a.enumerable});return e};var h=(e,t,i)=>(i=e!=null?j(z(e)):{},k(t||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>k(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var r=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=h(require("../../components/picture.js")),q=require("../../shared/Styles.js"),E=require("react-responsive"),S=require("../../hooks/useExposure.js"),c=require("swiper/react"),n=require("swiper/modules"),M=h(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,t)=>{const i=[];for(let a=0;a<e.length;a+=t)i.push(e.slice(a,a+t));return i},N=(0,s.forwardRef)(({data:{items:e=[],itemShape:t,title:i,theme:a},className:o},u)=>{const[x,B]=(0,s.useState)(!1),v=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,S.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{B(v)},[v]);const T=x?$(e,3):e;return(0,r.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},o),children:[i&&(0,r.jsx)(M.default,{data:{title:i}}),x?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[n.FreeMode,n.Mousewheel,n.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[T?.map((p,m)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(p)&&p?.map((I,g)=>(0,r.jsx)(w,{data:I,itemShape:t,index:g,theme:a},g))},"SwiperSlide"+m)),(0,r.jsx)("div",{ref:b,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((p,m)=>(0,r.jsx)(w,{data:p,itemShape:t,index:m,theme:a},m))})]})}),w=({data:e,itemShape:t,index:i,theme:a})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col 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(i),"bg-container-primary":a==="dark"},t==="round"?"rounded-box":"rounded-none",e.className),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-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,r.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,r.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,r.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,r.jsx)(y.default,{className:"size-full 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] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});N.displayName="BrandEquity";var C=(0,q.withLayout)(N);
+"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var i in r)d(e,i,{get:r[i],enumerable:!0})},h=(e,r,i,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of L(r))!A.call(e,o)&&o!==i&&d(e,o,{get:()=>r[o],enumerable:!(a=P(r,o))||a.enumerable});return e};var k=(e,r,i)=>(i=e!=null?j(z(e)):{},h(r||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>h(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var t=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=k(require("../../components/picture.js")),q=require("../../shared/Styles.js"),E=require("react-responsive"),S=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),M=k(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,r)=>{const i=[];for(let a=0;a<e.length;a+=r)i.push(e.slice(a,a+r));return i},N=(0,s.forwardRef)(({data:{items:e=[],itemShape:r,title:i,theme:a},className:o},u)=>{const[x,B]=(0,s.useState)(!1),v=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,S.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{B(v)},[v]);const T=x?$(e,3):e;return(0,t.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},o),children:[i&&(0,t.jsx)(M.default,{data:{title:i}}),x?(0,t.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[T?.map((n,m)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((I,g)=>(0,t.jsx)(w,{data:I,itemShape:r,index:g,theme:a},g))},"SwiperSlide"+m)),(0,t.jsx)("div",{ref:b,className:"mt-3 flex justify-center"})]}):(0,t.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,m)=>(0,t.jsx)(w,{data:n,itemShape:r,index:m,theme:a},m))})]})}),w=({data:e,itemShape:r,index:i,theme:a})=>(0,t.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col 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(i),"bg-container-primary":a==="dark"},"rounded-box",e.className),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,t.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,t.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,t.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,t.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});N.displayName="BrandEquity";var C=(0,q.withLayout)(N);
 //# 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, Theme } 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>(\n  ({ data: { items = [], itemShape, title, theme }, 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', { 'aiui-dark': theme === 'dark' }, 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) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n                  ))}\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} itemShape={itemShape} index={index} theme={theme} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n  theme,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n  theme?: Theme\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        `brand-equity-item-${index + 1}`,\n        data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n        'bg-container-secondary-1 box-border flex w-full flex-col 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          'bg-container-primary': theme === 'dark',\n        },\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none',\n        data.className\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-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex shrink-0 -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n                  'relative inline-block shrink-0',\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          <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n            <Picture\n              className=\"size-full object-cover\"\n              source={data.icon?.url}\n              alt={data.icon?.alt}\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          </div>\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nBrandEquity.displayName = 'BrandEquity'\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, Theme } 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>(\n  ({ data: { items = [], itemShape, title, theme }, 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', { 'aiui-dark': theme === 'dark' }, 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) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} theme={theme} />\n                  ))}\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} itemShape={itemShape} index={index} theme={theme} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n  theme,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n  theme?: Theme\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        `brand-equity-item-${index + 1}`,\n        data.containerName ? `brand-equity-item--${data.containerName}` : undefined,\n        'bg-container-secondary-1 box-border flex w-full flex-col 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          'bg-container-primary': theme === 'dark',\n        },\n        'rounded-box',\n        data.className\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-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex shrink-0 -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'border-container-primary size-[30px] overflow-hidden rounded-full border-2',\n                  'relative inline-block shrink-0',\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          <div className=\"lg-desktop:size-[36px] size-[30px] shrink-0\">\n            <Picture\n              className=\"size-full object-cover\"\n              source={data.icon?.url}\n              alt={data.icon?.alt}\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          </div>\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nBrandEquity.displayName = 'BrandEquity'\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", "itemShape", "title", "theme", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "Title", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},k=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!S.call(e,n)&&n!==a&&d(e,n,{get:()=>t[n],enumerable:!(i=T(t,n))||i.enumerable});return e};var u=(e,t,a)=>(a=e!=null?L(M(e)):{},k(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),j=e=>k(d({},"__esModule",{value:!0}),e);var F={};D(F,{default:()=>z});module.exports=j(F);var o=require("react/jsx-runtime"),l=u(require("react")),r=require("../../helpers/utils.js"),h=u(require("../../components/picture.js")),N=require("../../shared/Styles.js"),_=u(require("../Title/index.js")),f=u(require("./SwiperCategory.js")),x=require("../../hooks/useExposure.js"),v=require("../../shared/trackUrlRef.js");const p="image",m="category_banner",g=5,H=3,P=(e,t)=>{const a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a},A=({data:e,configuration:t})=>{const a=(0,l.useRef)(null);return(0,x.useExposure)(a,{componentType:p,componentName:m,componentTitle:e?.name,position:t?.index+1}),(0,o.jsx)("div",{className:(0,r.cn)("relative max-h-[240px] overflow-hidden"),children:(0,o.jsx)("div",{className:(0,r.cn)("aspect-w-[167] aspect-h-[120]","tablet:aspect-w-[404] tablet:aspect-h-[240]","laptop:aspect-w-[212] laptop:aspect-h-[144]","desktop:aspect-w-[205] desktop:aspect-h-[192]","lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]"),children:(0,o.jsxs)("div",{ref:a,className:(0,r.cn)("tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between","bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("div",{className:"flex items-center justify-center transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{"aria-label":e?.name,href:(0,v.trackUrlRef)(e?.link,`${p}_${m}`),"data-headless-type-name":`${p}#${m}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(h.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,o.jsx)("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})})})},B=({data:e,configuration:t,index:a,isFirstItemLarger:i})=>{const n=(0,l.useRef)(null);(0,x.useExposure)(n,{componentType:p,componentName:m,componentTitle:e?.name,position:t?.index+1});const s=a===0;return(0,o.jsxs)("div",{ref:n,className:(0,r.cn)("bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",i?(0,r.cn)("p-4",s?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[(0,o.jsx)("a",{href:(0,v.trackUrlRef)(e?.link,`${p}_${m}`),"data-headless-type-name":`${p}#${m}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-position":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,o.jsx)(h.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,r.cn)("m-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",i?(0,r.cn)(s?"size-full max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,o.jsx)("p",{className:(0,r.cn)("text-info-primary w-full text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},R=({data:e,configuration:t})=>{const i=(t?.totalCategories??0)<=g;return(0,o.jsx)("div",{className:`gap-3 ${i?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((n,s)=>(0,o.jsx)(B,{index:s,data:n,configuration:t,isFirstItemLarger:i},s))})},C=l.default.forwardRef((e,t)=>{const{data:a,className:i="",key:n,event:s,...I}=e,c=(a?.isShowSelect?a?.products:a?.productData)||[],y=c.length>g,b=c.length,$=P(c,y?H:g),w=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>w.current),(0,o.jsxs)("div",{...I,ref:w,className:(0,r.cn)("w-full overflow-hidden",i,{"aiui-dark":a?.theme==="dark"}),children:[a?.title&&(0,o.jsx)(_.default,{data:{title:a?.title},className:"text-4xl"}),(0,o.jsx)("div",{className:"tablet:block hidden",children:(0,o.jsx)(f.default,{id:`Category${n}`,Slide:A,data:{list:c,configuration:{shape:a?.shape,event:s,title:a?.title,totalCategories:b}},paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),(0,o.jsx)("div",{className:"tablet:hidden block",children:(0,o.jsx)(f.default,{id:`Category1${n}`,Slide:R,data:{list:$,configuration:{shape:a?.shape,event:s,title:a?.title,totalCategories:b}},isHalf:y,paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),(0,o.jsx)("div",{className:"h-7"})]})});C.displayName="Category";var z=(0,N.withLayout)(C);
+"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},k=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of E(t))!S.call(e,n)&&n!==a&&d(e,n,{get:()=>t[n],enumerable:!(i=T(t,n))||i.enumerable});return e};var u=(e,t,a)=>(a=e!=null?L(M(e)):{},k(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),j=e=>k(d({},"__esModule",{value:!0}),e);var F={};D(F,{default:()=>z});module.exports=j(F);var o=require("react/jsx-runtime"),l=u(require("react")),r=require("../../helpers/utils.js"),f=u(require("../../components/picture.js")),N=require("../../shared/Styles.js"),_=u(require("../Title/index.js")),h=u(require("./SwiperCategory.js")),x=require("../../hooks/useExposure.js"),v=require("../../shared/trackUrlRef.js");const m="image",p="category_banner",g=5,H=3,P=(e,t)=>{const a=[];for(let i=0;i<e.length;i+=t)a.push(e.slice(i,i+t));return a},A=({data:e,configuration:t})=>{const a=(0,l.useRef)(null);return(0,x.useExposure)(a,{componentType:m,componentName:p,componentTitle:e?.name,position:t?.index+1}),(0,o.jsx)("div",{className:(0,r.cn)("relative max-h-[240px] overflow-hidden"),children:(0,o.jsx)("div",{className:(0,r.cn)("aspect-w-[167] aspect-h-[120]","tablet:aspect-w-[404] tablet:aspect-h-[240]","laptop:aspect-w-[212] laptop:aspect-h-[144]","desktop:aspect-w-[205] desktop:aspect-h-[192]","lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]"),children:(0,o.jsxs)("div",{ref:a,className:(0,r.cn)("tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between","bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300","rounded-box"),children:[(0,o.jsx)("div",{className:"flex items-center justify-center transition-all duration-300 group-hover:scale-110",children:(0,o.jsx)("a",{"aria-label":e?.name,href:(0,v.trackUrlRef)(e?.link,`${m}_${p}`),"data-headless-type-name":`${m}#${p}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:(0,o.jsx)(f.default,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),(0,o.jsx)("p",{className:"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4",children:e?.name})]})})})},B=({data:e,configuration:t,index:a,isFirstItemLarger:i})=>{const n=(0,l.useRef)(null);(0,x.useExposure)(n,{componentType:m,componentName:p,componentTitle:e?.name,position:t?.index+1});const s=a===0;return(0,o.jsxs)("div",{ref:n,className:(0,r.cn)("bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",i?(0,r.cn)("p-4",s?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4","rounded-box"),children:[(0,o.jsx)("a",{href:(0,v.trackUrlRef)(e?.link,`${m}_${p}`),"data-headless-type-name":`${m}#${p}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-position":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:(0,o.jsx)(f.default,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:(0,r.cn)("m-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain",i?(0,r.cn)(s?"size-full max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),(0,o.jsx)("p",{className:(0,r.cn)("text-info-primary w-full text-center text-sm font-bold",i?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},R=({data:e,configuration:t})=>{const i=(t?.totalCategories??0)<=g;return(0,o.jsx)("div",{className:`gap-3 ${i?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((n,s)=>(0,o.jsx)(B,{index:s,data:n,configuration:t,isFirstItemLarger:i},s))})},C=l.default.forwardRef((e,t)=>{const{data:a,className:i="",key:n,event:s,...I}=e,c=(a?.isShowSelect?a?.products:a?.productData)||[],y=c.length>g,b=c.length,$=P(c,y?H:g),w=(0,l.useRef)(null);return(0,l.useImperativeHandle)(t,()=>w.current),(0,o.jsxs)("div",{...I,ref:w,className:(0,r.cn)("w-full overflow-hidden",i,{"aiui-dark":a?.theme==="dark"}),children:[a?.title&&(0,o.jsx)(_.default,{data:{title:a?.title},className:"text-4xl"}),(0,o.jsx)("div",{className:"tablet:block hidden",children:(0,o.jsx)(h.default,{id:`Category${n}`,Slide:A,data:{list:c,configuration:{shape:a?.shape,event:s,title:a?.title,totalCategories:b}},paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),(0,o.jsx)("div",{className:"tablet:hidden block",children:(0,o.jsx)(h.default,{id:`Category1${n}`,Slide:R,data:{list:$,configuration:{shape:a?.shape,event:s,title:a?.title,totalCategories:b}},isHalf:y,paginationClassName:"[&_.swiper-pagination]:!-bottom-6"})}),(0,o.jsx)("div",{className:"h-7"})]})});C.displayName="Category";var z=(0,N.withLayout)(C);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: Img\n  name: string\n  link?: string\n}\n\nexport interface CategoryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E3B\u9898\u8272*/\n  data: {\n    isShowSelect: boolean\n    products: CategoryItem[]\n    productData: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n  key?: string\n}\n\nconst chunkArray = (arr: any[], 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 CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div className={cn('relative max-h-[240px] overflow-hidden')}>\n      <div\n        className={cn(\n          'aspect-w-[167] aspect-h-[120]',\n          'tablet:aspect-w-[404] tablet:aspect-h-[240]',\n          'laptop:aspect-w-[212] laptop:aspect-h-[144]',\n          'desktop:aspect-w-[205] desktop:aspect-h-[192]',\n          'lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]'\n        )}\n      >\n        <div\n          ref={ref}\n          className={cn(\n            'tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between',\n            'bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300',\n            configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n          )}\n        >\n          <div className=\"flex items-center justify-center transition-all duration-300 group-hover:scale-110\">\n            <a\n              aria-label={data?.name}\n              href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.name}`}\n              onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n            >\n              <Picture\n                alt={data?.image?.alt || ''}\n                source={data?.image?.url || ''}\n                className=\"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n              />\n            </a>\n          </div>\n          <p className=\"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4\">\n            {data?.name}\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n  data,\n  configuration,\n  index,\n  isFirstItemLarger,\n}: {\n  data: CategoryItem\n  configuration?: any\n  index: number\n  isFirstItemLarger: boolean\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  const isFirstItem = index === 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n        'hover:bg-info-white cursor-pointer duration-300',\n        // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n        isFirstItemLarger\n          ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n          : 'max-h-[126px] px-3 py-4',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.name}`}\n        data-headless-nav-position={`''#${configuration?.index + 1}`}\n        onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n      >\n        <Picture\n          source={data?.image?.url || ''}\n          alt={data?.image?.alt || ''}\n          className={cn(\n            'm-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain',\n            // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n            isFirstItemLarger\n              ? cn(isFirstItem ? 'size-full max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n              : 'size-[72px]'\n          )}\n        />\n      </a>\n      <p\n        className={cn(\n          'text-info-primary w-full text-center text-sm font-bold',\n          // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n          isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n        )}\n      >\n        {data?.name}\n      </p>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n  const totalCategories = configuration?.totalCategories ?? 0\n  // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n  const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n  return (\n    <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n      {data?.map((item, index) => (\n        <SingleMobileItem\n          key={index}\n          index={index}\n          data={item}\n          configuration={configuration}\n          isFirstItemLarger={isFirstItemLarger}\n        />\n      ))}\n    </div>\n  )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n  const { data, className = '', key, event, ...rest } = props\n  // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n  const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n  const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n  const totalCategories = currentData.length\n  const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  return (\n    <div\n      {...rest}\n      ref={innerRef}\n      className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}\n    >\n      {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n      <div className=\"tablet:block hidden\">\n        <SwiperBox\n          id={`Category${key}`}\n          Slide={CategoryPcItem}\n          data={{\n            list: currentData,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n          paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n        />\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          id={`Category1${key}`}\n          Slide={CategoryMobileItem}\n          data={{\n            list: mobileSlides,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n          isHalf={isCardShow}\n          paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n        />\n      </div>\n      <div className=\"h-7\" />\n    </div>\n  )\n})\n\nCategory.displayName = 'Category'\n\nexport default withLayout(Category)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from './SwiperCategory.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'category_banner'\nconst MOBILE_FULL_PAGE_CAPACITY = 5\nconst MOBILE_COMPACT_PAGE_SIZE = 3\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  image: Img\n  name: string\n  link?: string\n}\n\nexport interface CategoryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E3B\u9898\u8272*/\n  data: {\n    isShowSelect: boolean\n    products: CategoryItem[]\n    productData: CategoryItem[]\n    /** \u5361\u7247\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    title?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n  key?: string\n}\n\nconst chunkArray = (arr: any[], 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 CategoryPcItem = ({ data, configuration }: { data: CategoryItem; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div className={cn('relative max-h-[240px] overflow-hidden')}>\n      <div\n        className={cn(\n          'aspect-w-[167] aspect-h-[120]',\n          'tablet:aspect-w-[404] tablet:aspect-h-[240]',\n          'laptop:aspect-w-[212] laptop:aspect-h-[144]',\n          'desktop:aspect-w-[205] desktop:aspect-h-[192]',\n          'lg-desktop:aspect-w-[264] lg-desktop:aspect-h-[240]'\n        )}\n      >\n        <div\n          ref={ref}\n          className={cn(\n            'tablet:p-3 laptop:p-4 desktop:p-6 absolute inset-0 max-h-[240px] justify-between',\n            'bg-container-primary hover:bg-info-white group box-border flex cursor-pointer flex-col overflow-hidden duration-300',\n            'rounded-box'\n          )}\n        >\n          <div className=\"flex items-center justify-center transition-all duration-300 group-hover:scale-110\">\n            <a\n              aria-label={data?.name}\n              href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.name}`}\n              onClick={() => configuration?.event?.primaryButton(data, configuration?.index)}\n            >\n              <Picture\n                alt={data?.image?.alt || ''}\n                source={data?.image?.url || ''}\n                className=\"laptop:size-1/2 tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover\"\n              />\n            </a>\n          </div>\n          <p className=\"lg-desktop:text-lg lg-desktop:!leading-6 text-info-primary box-border line-clamp-2 text-center text-sm font-bold leading-4\">\n            {data?.name}\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\u7EC4\u4EF6\nconst SingleMobileItem = ({\n  data,\n  configuration,\n  index,\n  isFirstItemLarger,\n}: {\n  data: CategoryItem\n  configuration?: any\n  index: number\n  isFirstItemLarger: boolean\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.name,\n    position: configuration?.index + 1,\n  })\n\n  const isFirstItem = index === 0\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-primary box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden',\n        'hover:bg-info-white cursor-pointer duration-300',\n        // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6837\u5F0F\n        isFirstItemLarger\n          ? cn('p-4', isFirstItem ? 'aspect-h-[252] row-span-2' : 'aspect-h-[120]')\n          : 'max-h-[126px] px-3 py-4',\n        'rounded-box'\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.name}`}\n        data-headless-nav-position={`''#${configuration?.index + 1}`}\n        onClick={() => configuration?.event?.primaryButton(data, configuration?.index + 1)}\n      >\n        <Picture\n          source={data?.image?.url || ''}\n          alt={data?.image?.alt || ''}\n          className={cn(\n            'm-auto mb-2 flex justify-center object-contain [&_img]:h-full [&_img]:w-auto [&_img]:object-contain',\n            // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u56FE\u7247\u5C3A\u5BF8\n            isFirstItemLarger\n              ? cn(isFirstItem ? 'size-full max-h-[146px] overflow-hidden' : 'max-h-[72px] max-w-[72px]')\n              : 'size-[72px]'\n          )}\n        />\n      </a>\n      <p\n        className={cn(\n          'text-info-primary w-full text-center text-sm font-bold',\n          // \u5F53\u7B2C\u4E00\u4E2A\u9879\u76EE\u9700\u8981\u66F4\u5927\u7A7A\u95F4\u65F6\u8C03\u6574\u6587\u5B57\u663E\u793A\n          isFirstItemLarger ? 'line-clamp-2' : 'shrink-0 truncate'\n        )}\n      >\n        {data?.name}\n      </p>\n    </div>\n  )\n}\n\n// \u79FB\u52A8\u7AEF\u54C1\u7C7B\u5C55\u793A\nconst CategoryMobileItem = ({ data, configuration }: { data: CategoryItem[]; configuration?: any }) => {\n  const totalCategories = configuration?.totalCategories ?? 0\n  // \u5F53\u6570\u91CF\u5C11\u4E8E\u5BB9\u5668\u65F6\uFF0C\u7B2C\u4E00\u4E2A\u9879\u76EE\u4F1A\u5360\u636E\u66F4\u5927\u7A7A\u95F4\n  const isFirstItemLarger = totalCategories <= MOBILE_FULL_PAGE_CAPACITY\n  return (\n    <div className={`gap-3 ${isFirstItemLarger ? 'grid grid-cols-2' : 'flex h-full flex-col'}`}>\n      {data?.map((item, index) => (\n        <SingleMobileItem\n          key={index}\n          index={index}\n          data={item}\n          configuration={configuration}\n          isFirstItemLarger={isFirstItemLarger}\n        />\n      ))}\n    </div>\n  )\n}\n\nconst Category = React.forwardRef<HTMLDivElement, CategoryProps>((props, ref) => {\n  const { data, className = '', key, event, ...rest } = props\n  // soundcore\u54C1\u724C\u54C1\u7C7B\u4E0D\u8D85\u8FC75\u4E2A\uFF0C\u5355\u72EC\u505A\u6837\u5F0F\u5904\u7406\n  const currentData = (data?.isShowSelect ? data?.products : data?.productData) || []\n  const isCardShow = currentData.length > MOBILE_FULL_PAGE_CAPACITY\n  const totalCategories = currentData.length\n  const mobileSlides = chunkArray(currentData, isCardShow ? MOBILE_COMPACT_PAGE_SIZE : MOBILE_FULL_PAGE_CAPACITY)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  return (\n    <div\n      {...rest}\n      ref={innerRef}\n      className={cn('w-full overflow-hidden', className, { 'aiui-dark': data?.theme === 'dark' })}\n    >\n      {data?.title && <Title data={{ title: data?.title }} className=\"text-4xl\" />}\n      <div className=\"tablet:block hidden\">\n        <SwiperBox\n          id={`Category${key}`}\n          Slide={CategoryPcItem}\n          data={{\n            list: currentData,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n          paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n        />\n      </div>\n      <div className=\"tablet:hidden block\">\n        <SwiperBox\n          id={`Category1${key}`}\n          Slide={CategoryMobileItem}\n          data={{\n            list: mobileSlides,\n            configuration: { shape: data?.shape, event: event, title: data?.title, totalCategories },\n          }}\n          isHalf={isCardShow}\n          paginationClassName=\"[&_.swiper-pagination]:!-bottom-6\"\n        />\n      </div>\n      <div className=\"h-7\" />\n    </div>\n  )\n})\n\nCategory.displayName = 'Category'\n\nexport default withLayout(Category)\n"],
+  "mappings": "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",
   "names": ["Category_exports", "__export", "Category_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_Title", "import_SwiperCategory", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MOBILE_FULL_PAGE_CAPACITY", "MOBILE_COMPACT_PAGE_SIZE", "chunkArray", "arr", "size", "chunks", "CategoryPcItem", "data", "configuration", "ref", "Picture", "SingleMobileItem", "index", "isFirstItemLarger", "isFirstItem", "CategoryMobileItem", "item", "Category", "React", "props", "className", "key", "event", "rest", "currentData", "isCardShow", "totalCategories", "mobileSlides", "innerRef", "Title", "SwiperBox"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/CreativeModule/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ninterface CreativeModuleType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: CreativeModuleDataType[]\n  }\n}\n\nconst Item = ({ data, configuration }: { data: CreativeModuleDataType; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'creativeModuleItem',\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]',\n        configuration?.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.mobileImg?.url || data?.img?.url}\n          alt={data?.mobileImg?.alt || data?.img?.alt || ''}\n        />\n        <div className=\"z-1 absolute inset-x-0 bottom-4 box-border flex w-full flex-col overflow-hidden px-4\">\n          <Text html={data?.title} className=\"graphic-title truncate text-xl font-bold leading-[1.2]\" />\n          {data?.description && (\n            <Text html={data?.description} className=\"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = ({ data, className, ...rest }: CreativeModuleType) => {\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div\n        {...rest}\n        className={cn('creativeModuleBlock', 'laptop:block box-border hidden w-full overflow-hidden', className)}\n      >\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:px-8 desktop:bottom-6 desktop:px-6 absolute inset-x-0 bottom-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n                  {item.title && (\n                    <Text\n                      html={item.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] laptop:text-2xl line-clamp-2 text-xl font-bold\"\n                    />\n                  )}\n                  {item.description && (\n                    <Text html={item.description} className=\"desktop:text-lg line-clamp-2 text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: productsTab || [],\n            configuration: {\n              shape,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.2,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MACT,qBACA,4GACAA,GAAe,QAAU,UAAY,cAAgB,eACrD,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,uFACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEE,EAAiB,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,GAAGC,CAAK,IAA0B,CAC3E,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIN,EAE/B,SACE,oBACE,oBAAC,OACE,GAAGI,EACJ,aAAW,MAAG,sBAAuB,wDAAyDD,CAAS,EAEvG,mBAAC,QAAK,aAAW,MAAG,wCAAyCA,CAAS,EACnE,SAAAE,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,0DACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,KACxF,QAAC,OAAI,UAAU,6IACZ,UAAAA,EAAK,UACJ,OAAC,QACC,KAAMA,EAAK,MACX,GAAG,IACH,UAAU,qEACZ,EAEDA,EAAK,gBACJ,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6BACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBN,CAAS,EAC5C,KAAM,CACJ,KAAME,GAAe,CAAC,EACtB,cAAe,CACb,MAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWW,CAAc",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ninterface CreativeModuleType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: CreativeModuleDataType[]\n  }\n}\n\nconst Item = ({ data, configuration }: { data: CreativeModuleDataType; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'creativeModuleItem',\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]',\n        'rounded-box',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.mobileImg?.url || data?.img?.url}\n          alt={data?.mobileImg?.alt || data?.img?.alt || ''}\n        />\n        <div className=\"z-1 absolute inset-x-0 bottom-4 box-border flex w-full flex-col overflow-hidden px-4\">\n          <Text html={data?.title} className=\"graphic-title truncate text-xl font-bold leading-[1.2]\" />\n          {data?.description && (\n            <Text html={data?.description} className=\"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = ({ data, className, ...rest }: CreativeModuleType) => {\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div\n        {...rest}\n        className={cn('creativeModuleBlock', 'laptop:block box-border hidden w-full overflow-hidden', className)}\n      >\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  'rounded-box',\n                  'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:px-8 desktop:bottom-6 desktop:px-6 absolute inset-x-0 bottom-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n                  {item.title && (\n                    <Text\n                      html={item.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] laptop:text-2xl line-clamp-2 text-xl font-bold\"\n                    />\n                  )}\n                  {item.description && (\n                    <Text html={item.description} className=\"desktop:text-lg line-clamp-2 text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: productsTab || [],\n            configuration: {\n              shape,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.2,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MACT,qBACA,4GACA,cACA,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,uFACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEE,EAAiB,CAAC,CAAE,KAAAF,EAAM,UAAAG,EAAW,GAAGC,CAAK,IAA0B,CAC3E,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIN,EAE/B,SACE,oBACE,oBAAC,OACE,GAAGI,EACJ,aAAW,MAAG,sBAAuB,wDAAyDD,CAAS,EAEvG,mBAAC,QAAK,aAAW,MAAG,wCAAyCA,CAAS,EACnE,SAAAE,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACA,cACA,0DACA,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,KACxF,QAAC,OAAI,UAAU,6IACZ,UAAAA,EAAK,UACJ,OAAC,QACC,KAAMA,EAAK,MACX,GAAG,IACH,UAAU,qEACZ,EAEDA,EAAK,gBACJ,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6BACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBN,CAAS,EAC5C,KAAM,CACJ,KAAME,GAAe,CAAC,EACtB,cAAe,CACb,MAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWW,CAAc",
   "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_grid", "import_components", "Item", "data", "configuration", "CreativeModule", "className", "rest", "productsTab", "shape", "item", "index", "SwiperBox"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var A=Object.create;var c=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var F=(e,i)=>{for(var s in i)c(e,s,{get:i[s],enumerable:!0})},h=(e,i,s,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of $(i))!R.call(e,o)&&o!==s&&c(e,o,{get:()=>i[o],enumerable:!(l=B(i,o))||l.enumerable});return e};var v=(e,i,s)=>(s=e!=null?A(I(e)):{},h(i||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),H=e=>h(c({},"__esModule",{value:!0}),e);var _={};F(_,{default:()=>V});module.exports=H(_);var t=require("react/jsx-runtime"),a=v(require("react")),k=require("react-dom"),y=v(require("../Title/index.js")),n=require("../../helpers/utils.js"),N=v(require("../../components/picture.js")),M=v(require("../SwiperBox/index.js")),L=require("../../shared/Styles.js"),d=require("../../components/avatar.js"),T=require("../../components/container.js"),C=require("../../components/text.js"),E=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js"),z=require("../AiuiProvider/index.js");const b="copy",w="product_review",D=({data:e,configuration:i})=>{const s=(0,a.useRef)(null),[l,o]=(0,a.useState)({visible:!1,x:0,y:0,text:""}),u=r=>{const p=Number(r),x=Number.isFinite(p)?Math.max(0,Math.floor(p)):0;return Array.from({length:x})||[]},m=r=>{e?.description&&o({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},f=()=>{o(r=>({...r,visible:!1}))};return(0,E.useExposure)(s,{componentType:b,componentName:w,componentTitle:e?.title,componentDescription:e?.description,position:i?.index+1}),(0,t.jsx)("div",{ref:s,className:(0,n.cn)("bg-background tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,n.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:u(e?.rating)?.map?.((r,p)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},p))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(d.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(d.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(d.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsxs)("div",{className:"flex-1",onMouseMove:m,onMouseLeave:f,children:[(0,t.jsx)(C.Text,{className:(0,n.cn)("lg-desktop:text-2xl text-info-primary evaluate-description line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""}),typeof window<"u"&&l.visible&&(0,k.createPortal)((0,t.jsx)("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60  px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${l.x+16}px`,top:`${l.y+16}px`},children:l.text}),document.body)]}),(0,t.jsx)("a",{href:(0,P.trackUrlRef)((0,n.getLocalizedPath)(e?.link||"",i?.locale||"us"),`${b}_${w}`),onClick:()=>{i?.event?.primaryButton(e,i?.index+1)},"data-headless-type-name":`${b}#${w}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-position":`''#${i?.index+1}`,children:(0,t.jsxs)("div",{className:(0,n.cn)("mt-3 flex cursor-pointer items-center overflow-hidden bg-[#F7F8F9] p-3",i?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(N.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},g=a.default.forwardRef(({className:e="",data:i,key:s,...l},o)=>{const{products:u,title:m,theme:f,...r}=i,p=(0,a.useRef)(null),{locale:x="us"}=(0,z.useAiuiContext)();return(0,a.useImperativeHandle)(o,()=>p.current),(0,t.jsx)("div",{...l,ref:p,className:e,children:(0,t.jsx)("div",{className:"evaluate-box relative z-10",children:(0,t.jsx)(T.Container,{...i?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:o,className:(0,n.cn)("w-full",e,{"aiui-dark":f==="dark"}),children:[m&&(0,t.jsx)(y.default,{data:{title:m}}),(0,t.jsx)(M.default,{className:"!overflow-visible",id:"Evaluate"+s,data:{list:u,configuration:{...r,title:m,locale:x}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});g.displayName="Evaluate";var V=(0,L.withLayout)(g);
+"use strict";"use client";var A=Object.create;var c=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var F=(e,i)=>{for(var s in i)c(e,s,{get:i[s],enumerable:!0})},h=(e,i,s,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of $(i))!R.call(e,o)&&o!==s&&c(e,o,{get:()=>i[o],enumerable:!(l=B(i,o))||l.enumerable});return e};var v=(e,i,s)=>(s=e!=null?A(I(e)):{},h(i||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),H=e=>h(c({},"__esModule",{value:!0}),e);var _={};F(_,{default:()=>V});module.exports=H(_);var t=require("react/jsx-runtime"),a=v(require("react")),k=require("react-dom"),y=v(require("../Title/index.js")),n=require("../../helpers/utils.js"),N=v(require("../../components/picture.js")),M=v(require("../SwiperBox/index.js")),L=require("../../shared/Styles.js"),m=require("../../components/avatar.js"),T=require("../../components/container.js"),C=require("../../components/text.js"),E=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js"),z=require("../AiuiProvider/index.js");const b="copy",w="product_review",D=({data:e,configuration:i})=>{const s=(0,a.useRef)(null),[l,o]=(0,a.useState)({visible:!1,x:0,y:0,text:""}),u=r=>{const p=Number(r),x=Number.isFinite(p)?Math.max(0,Math.floor(p)):0;return Array.from({length:x})||[]},d=r=>{e?.description&&o({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},f=()=>{o(r=>({...r,visible:!1}))};return(0,E.useExposure)(s,{componentType:b,componentName:w,componentTitle:e?.title,componentDescription:e?.description,position:i?.index+1}),(0,t.jsx)("div",{ref:s,className:(0,n.cn)("bg-background tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300","rounded-box","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,n.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:u(e?.rating)?.map?.((r,p)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},p))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(m.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(m.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(m.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsxs)("div",{className:"flex-1",onMouseMove:d,onMouseLeave:f,children:[(0,t.jsx)(C.Text,{className:(0,n.cn)("lg-desktop:text-2xl text-info-primary evaluate-description line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""}),typeof window<"u"&&l.visible&&(0,k.createPortal)((0,t.jsx)("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60  px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${l.x+16}px`,top:`${l.y+16}px`},children:l.text}),document.body)]}),(0,t.jsx)("a",{href:(0,P.trackUrlRef)((0,n.getLocalizedPath)(e?.link||"",i?.locale||"us"),`${b}_${w}`),onClick:()=>{i?.event?.primaryButton(e,i?.index+1)},"data-headless-type-name":`${b}#${w}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-position":`''#${i?.index+1}`,children:(0,t.jsxs)("div",{className:(0,n.cn)("mt-3 flex cursor-pointer items-center overflow-hidden bg-[#F7F8F9] p-3","rounded-box"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(N.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},g=a.default.forwardRef(({className:e="",data:i,key:s,...l},o)=>{const{products:u,title:d,theme:f,...r}=i,p=(0,a.useRef)(null),{locale:x="us"}=(0,z.useAiuiContext)();return(0,a.useImperativeHandle)(o,()=>p.current),(0,t.jsx)("div",{...l,ref:p,className:e,children:(0,t.jsx)("div",{className:"evaluate-box relative z-10",children:(0,t.jsx)(T.Container,{...i?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:o,className:(0,n.cn)("w-full",e,{"aiui-dark":f==="dark"}),children:[d&&(0,t.jsx)(y.default,{data:{title:d}}),(0,t.jsx)(M.default,{className:"!overflow-visible",id:"Evaluate"+s,data:{list:u,configuration:{...r,title:d,locale:x}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});g.displayName="Evaluate";var V=(0,L.withLayout)(g);
 //# sourceMappingURL=index.js.map