@anker-in/headless-ui 1.0.10-temp-onclick → 1.0.10-temp-21

package/dist/esm/apps/playground/utils/classnames.d.ts

@@ -0,0 +1 @@
+export declare function classNames(...arr: unknown[]): string;

package/dist/esm/biz-components/AccordionCards/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as V,jsx as r,jsxs as i}from"react/jsx-runtime";import H from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import w from"../../components/picture.js";import k from"../../components/button.js";import M from"../SwiperBox/index.js";import{withLayout as R}from"../../shared/Styles.js";import C,{useState as _,useRef as a,useCallback as S,useImperativeHandle as $,useEffect as z}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as m}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";import j from"../../shared/throttle.js";import{Heading as T}from"../../components/heading.js";const s="image",l="scene_banner",P=C.forwardRef(({data:t,className:v="",event:h},N)=>{const[c,I]=_(0),p=a(0),u=a([]),d=a(!1),[b,B]=_(0),f=a(null);$(N,()=>f.current),A(f,{componentType:s,componentName:l,componentTitle:t?.title});const E=(e,o)=>{o&&(u.current[e]=o)};z(()=>{const e=()=>{u.current[p.current]&&B(u.current[p.current].offsetWidth)};e();const o=j(e,300);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]);const L=({data:e,configuration:o})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[r("a",{href:m(e?.imgLink,`${s}_${l}`),children:r(w,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),r(k,{"aria-label":e?.title??e?.subTitle,variant:"secondary",className:n("text-info-primary text-sm font-bold"),as:"a",href:m(e.link,`${s}_${l}`),children:o?.primaryButton})]})]}),g=S(e=>{c===e||d.current||(d.current=!0,I(e),p.current=e,D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:s,component_name:l,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,c]);return i(V,{children:[t?.title&&r(H,{data:{title:t?.title}}),r("div",{ref:f,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:r("div",{className: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",v),children:t?.products?.map((e,o)=>{const y=c===o;return i("div",{style:{flex:`${y?8:1} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&E(o,x)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>g(o),onMouseLeave:()=>{d.current=!1},onClick:()=>{g(o)},children:[r("a",{href:m(e?.imgLink,`${s}_${l}`),children:r(w,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),i("div",{style:{width:b},className: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",y&&b?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[r(T,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),r(T,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),i(k,{className:n("mb-1.5 font-bold"),as:"a",href:m(e?.link,`${s}_${l}`),onClick:()=>h?.primaryButton?.(t,o),children:[t?.primaryButton,r("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},o)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:r(M,{className:n("h-[400px] !overflow-visible",v),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:h}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var te=R(P);export{te as default};
+"use client";import{Fragment as V,jsx as r,jsxs as i}from"react/jsx-runtime";import H from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import w from"../../components/picture.js";import k from"../../components/button.js";import M from"../SwiperBox/index.js";import{withLayout as R}from"../../shared/Styles.js";import C,{useState as _,useRef as a,useCallback as S,useImperativeHandle as $,useEffect as z}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as m}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";import j from"../../shared/throttle.js";import{Heading as T}from"../../components/heading.js";const s="image",l="scene_banner",P=C.forwardRef(({data:t,className:v="",event:h},N)=>{const[c,I]=_(0),p=a(0),u=a([]),d=a(!1),[b,B]=_(0),f=a(null);$(N,()=>f.current),A(f,{componentType:s,componentName:l,componentTitle:t?.title});const E=(e,o)=>{o&&(u.current[e]=o)};z(()=>{const e=()=>{u.current[p.current]&&B(u.current[p.current].offsetWidth)};e();const o=j(e,300);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]);const L=({data:e,configuration:o})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[r("a",{href:m(e?.imgLink,`${s}_${l}`),children:r(w,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),i("div",{className:n("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),r(k,{"aria-label":e?.title??e?.subTitle,variant:"secondary",className:n("text-info-primary text-sm font-bold"),as:"a",href:m(e.link,`${s}_${l}`),children:o?.primaryButton})]})]}),g=S(e=>{c===e||d.current||(d.current=!0,I(e),p.current=e,D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:s,component_name:l,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,c]);return i(V,{children:[t?.title&&r(H,{data:{title:t?.title}}),r("div",{ref:f,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:r("div",{className: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",v),children:t?.products?.map((e,o)=>{const y=c===o;return i("div",{style:{flex:`${y?8:1} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&E(o,x)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>g(o),onMouseLeave:()=>{d.current=!1},onClick:()=>{g(o)},children:[r("a",{href:m(e?.imgLink,`${s}_${l}`),children:r(w,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),i("div",{style:{width:b},className: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",y&&b?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[r(T,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),r(T,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),i(k,{className:n("mb-1.5 font-bold"),as:"a",href:m(e?.link,`${s}_${l}`),onClick:()=>h?.primaryButton?.(t,o),children:[t?.primaryButton,r("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},o)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:r(M,{className:n("h-[400px] !overflow-visible",v),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:h}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var te=R(P);export{te as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccordionCards/index.js.map

@@ -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 } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.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 = {\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  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n  const hoverIndexRef = useRef<number>(0)\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const isAnimation = useRef<boolean>(false)\n  const [contentWidth, setContentWidth] = useState<number>(0)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\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 MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\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        <a href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}>\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        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n          <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n            <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n            <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n          </div>\n\n          <Button\n            aria-label={data?.title ?? data?.subTitle}\n            variant=\"secondary\"\n            className={cn('text-info-primary text-sm font-bold')}\n            as=\"a\"\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n      hoverIndexRef.current = idx\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          component_title: data?.products[idx]?.title,\n          component_description: data?.products[idx]?.subTitle,\n          position: idx + 1,\n        },\n      })\n    },\n    [data?.products, hoverIndex]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} 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            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 8 : 1\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(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onMouseEnter={() => handleSwiperItemClick(idx)}\n                onMouseLeave={() => {\n                  isAnimation.current = false\n                }}\n                onClick={() => {\n                  handleSwiperItemClick(idx)\n                }}\n              >\n                <a href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}>\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                <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                    >\n                      {item?.title}\n                    </Heading>\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                    >\n                      {item?.subTitle}\n                    </Heading>\n                  </div>\n                  <Button\n                    className={cn('mb-1.5 font-bold')}\n                    as=\"a\"\n                    href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n                    onClick={() => event?.primaryButton?.(data, idx)}\n                  >\n                    {data?.primaryButton}\n                    <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n                  </Button>\n                </div>\n              </div>\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            },\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    </>\n  )\n})\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 } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.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 = {\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  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n  const hoverIndexRef = useRef<number>(0)\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const isAnimation = useRef<boolean>(false)\n  const [contentWidth, setContentWidth] = useState<number>(0)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\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 MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\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        <a href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}>\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        <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            <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n            <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n          </div>\n\n          <Button\n            aria-label={data?.title ?? data?.subTitle}\n            variant=\"secondary\"\n            className={cn('text-info-primary text-sm font-bold')}\n            as=\"a\"\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n      hoverIndexRef.current = idx\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          component_title: data?.products[idx]?.title,\n          component_description: data?.products[idx]?.subTitle,\n          position: idx + 1,\n        },\n      })\n    },\n    [data?.products, hoverIndex]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} 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            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 8 : 1\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(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onMouseEnter={() => handleSwiperItemClick(idx)}\n                onMouseLeave={() => {\n                  isAnimation.current = false\n                }}\n                onClick={() => {\n                  handleSwiperItemClick(idx)\n                }}\n              >\n                <a href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}>\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                <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                    >\n                      {item?.title}\n                    </Heading>\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                    >\n                      {item?.subTitle}\n                    </Heading>\n                  </div>\n                  <Button\n                    className={cn('mb-1.5 font-bold')}\n                    as=\"a\"\n                    href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n                    onClick={() => event?.primaryButton?.(data, idx)}\n                  >\n                    {data?.primaryButton}\n                    <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n                  </Button>\n                </div>\n              </div>\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            },\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    </>\n  )\n})\nexport default withLayout(AccordionCards)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "throttle", "Heading", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
 }

package/dist/esm/biz-components/AccordionCards/useDebounce.d.ts

@@ -0,0 +1,6 @@
+type DebounceOptions = {
+    leading?: boolean;
+    trailing?: boolean;
+};
+export declare function useDebounce<T extends any[]>(func: (...args: T) => void, delay?: number, options?: DebounceOptions): (...args: T) => void;
+export {};

package/dist/esm/biz-components/CreativeModule/index.d.ts

@@ -5,12 +5,12 @@ export type CreativeModuleDataType = {
     title: string;
     description: string;
     theme: 'light' | 'dark';
-    shape: 'rounded' | 'square';
     span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 };
 type CreativeModuleType = {
     data: {
-        products: CreativeModuleDataType[];
+        shape?: 'rounded' | 'square';
+        productsTab: CreativeModuleDataType[];
     };
     className?: string;
 };

package/dist/esm/biz-components/CreativeModule/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as h,jsx as t,jsxs as o}from"react/jsx-runtime";import{cn as s}from"../../helpers/utils.js";import n from"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Grid as u,GridItem as f}from"../../components/gird.js";import{Picture as d,Text as a}from"../../components/index.js";const v=({data:e})=>t("div",{className:s("text-info-primary aspect-h-[360] aspect-w-[296] relative shrink-0 overflow-hidden md:basis-[296px]",e.shape==="rounded"?"rounded-2xl":"rounded-none",{"aiui-dark":e.theme==="dark"}),children:o("div",{className:"absolute inset-0",children:[t(d,{className:"h-full",imgClassName:"h-full object-cover",source:e?.mobileImg?.url||e?.img?.url,alt:e?.mobileImg?.alt||e?.img?.alt||""}),o("div",{className:"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col",children:[t(a,{html:e?.title,className:"graphic-title truncate font-bold leading-[1.2]"}),e?.description&&t(a,{html:e?.description,className:"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]"})]})]})}),g=e=>{const{data:p,className:i}=e,{products:r}=p;return o(h,{children:[t("div",{className:"laptop:block box-border hidden w-full overflow-hidden",children:t(u,{className:s("tablet:gap-4 grid grid-cols-12 gap-3 ",i),children:r?.map((l,m)=>o(f,{span:l.span,className:s("text-info-primary relative w-full overflow-hidden",l.shape==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]",{"aiui-dark":l.theme==="dark"}),children:[t(d,{source:l.img.url,className:"size-full",imgClassName:"h-full object-cover"}),o("div",{className:"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4",children:[l.title&&t(a,{html:l.title,as:"p",className:"desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),l.description&&t(a,{html:l.description,className:"desktop:text-lg text-sm font-bold"})]})]},m))})}),t("div",{className:"laptop:hidden block w-full overflow-hidden",children:t(n,{id:"CreativeModule",className:s("!overflow-visible",i),data:{list:r||[]},Slide:v,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 y=c(g);export{y as default};
+"use client";import{Fragment as v,jsx as e,jsxs as o}from"react/jsx-runtime";import{cn as a}from"../../helpers/utils.js";import c from"../SwiperBox/index.js";import{withLayout as u}from"../../shared/Styles.js";import{Grid as f,GridItem as g}from"../../components/gird.js";import{Picture as m,Text as s}from"../../components/index.js";const x=({data:t,configuration:i})=>e("div",{className:a("text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]",i?.shape==="rounded"?"rounded-2xl":"rounded-none",{"aiui-dark":t.theme==="dark"}),children:o("div",{className:"absolute inset-0",children:[e(m,{className:"h-full",imgClassName:"h-full object-cover",source:t?.mobileImg?.url||t?.img?.url,alt:t?.mobileImg?.alt||t?.img?.alt||""}),o("div",{className:"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col",children:[e(s,{html:t?.title,className:"graphic-title truncate text-xl font-bold leading-[1.2]"}),t?.description&&e(s,{html:t?.description,className:"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]"})]})]})}),b=t=>{const{data:i,className:r}=t,{productsTab:d,shape:p}=i;return o(v,{children:[e("div",{className:"laptop:block box-border hidden w-full overflow-hidden",children:e(f,{className:a("tablet:gap-4 grid grid-cols-12 gap-3 ",r),children:d?.map((l,n)=>o(g,{span:l.span,className:a("text-info-primary relative w-full cursor-pointer overflow-hidden",p==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]",{"aiui-dark":l.theme==="dark"}),children:[e(m,{source:l.img.url,className:"size-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),o("div",{className:"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4",children:[l.title&&e(s,{html:l.title,as:"p",className:"desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),l.description&&e(s,{html:l.description,className:"desktop:text-lg text-sm font-bold"})]})]},n))})}),e("div",{className:"laptop:hidden block w-full",children:e(c,{id:"CreativeModule",className:a("!overflow-visible",r),data:{list:d||[],configuration:{shape:p}},Slide:x,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 M=u(b);export{M as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/CreativeModule/index.js.map

@@ -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/gird.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  shape: 'rounded' | 'square'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype CreativeModuleType = {\n  data: {\n    products: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data }: { data: CreativeModuleDataType }) => {\n  return (\n    <div\n      className={cn(\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative shrink-0 overflow-hidden md:basis-[296px]',\n        data.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 bottom-4 left-4 box-border flex w-full flex-col\">\n          <Text html={data?.title} className=\"graphic-title truncate 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 = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { products } = data\n\n  return (\n    <>\n      <div className=\"laptop:block box-border hidden w-full overflow-hidden\">\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {products?.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                  item.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-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:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4\">\n                  {item.title && (\n                    <Text html={item.title} as=\"p\" className=\"desktop:text-[32px] laptop:text-2xl text-xl font-bold\" />\n                  )}\n                  {item.description && <Text html={item.description} className=\"desktop:text-lg text-sm font-bold\" />}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full overflow-hidden\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: products || [],\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": "aAqCQ,OAsBJ,YAAAA,EAtBI,OAAAC,EAMA,QAAAC,MANA,oBApCR,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAe,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,CAAK,IAEjBV,EAAC,OACC,UAAWE,EACT,qGACAQ,EAAK,QAAU,UAAY,cAAgB,eAC3C,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,SAAAT,EAAC,OAAI,UAAU,mBACb,UAAAD,EAACO,EAAA,CACC,UAAU,SACV,aAAa,sBACb,OAAQG,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,EACAT,EAAC,OAAI,UAAU,+DACb,UAAAD,EAACQ,EAAA,CAAK,KAAME,GAAM,MAAO,UAAU,iDAAiD,EACnFA,GAAM,aACLV,EAACQ,EAAA,CAAK,KAAME,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEC,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAF,EAAM,UAAAG,CAAU,EAAID,EACtB,CAAE,SAAAE,CAAS,EAAIJ,EAErB,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAU,wDACb,SAAAA,EAACK,EAAA,CAAK,UAAWH,EAAG,wCAAyCW,CAAS,EACnE,SAAAC,GAAU,IAAI,CAACC,EAAMC,IAElBf,EAACK,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWb,EACT,oDACAa,EAAK,QAAU,UAAY,cAAgB,eAC3C,sEACA,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAf,EAACO,EAAA,CAAQ,OAAQQ,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,EACxFd,EAAC,OAAI,UAAU,iGACZ,UAAAc,EAAK,OACJf,EAACQ,EAAA,CAAK,KAAMO,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,aAAef,EAACQ,EAAA,CAAK,KAAMO,EAAK,YAAa,UAAU,oCAAoC,GACnG,IAjBKC,CAkBP,CAEH,EACH,EACF,EACAhB,EAAC,OAAI,UAAU,6CACb,SAAAA,EAACG,EAAA,CACC,GAAG,iBACH,UAAWD,EAAG,oBAAqBW,CAAS,EAC5C,KAAM,CACJ,KAAMC,GAAY,CAAC,CACrB,EACA,MAAOL,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,IAAOQ,EAAQb,EAAWO,CAAc",
-  "names": ["Fragment", "jsx", "jsxs", "cn", "SwiperBox", "withLayout", "Grid", "GridItem", "Picture", "Text", "Item", "data", "CreativeModule", "props", "className", "products", "item", "index", "CreativeModule_default"]
+  "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/gird.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\ntype CreativeModuleType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data, configuration }: { data: CreativeModuleDataType; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\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 bottom-4 left-4 box-border flex w-full flex-col\">\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 = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div className=\"laptop:block box-border hidden w-full overflow-hidden\">\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 cursor-pointer overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.img.url}\n                  className=\"size-full\"\n                  imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4\">\n                  {item.title && (\n                    <Text html={item.title} as=\"p\" className=\"desktop:text-[32px] laptop:text-2xl text-xl font-bold\" />\n                  )}\n                  {item.description && <Text html={item.description} className=\"desktop:text-lg text-sm font-bold\" />}\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": "aAqCQ,OAsBJ,YAAAA,EAtBI,OAAAC,EAMA,QAAAC,MANA,oBApCR,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAe,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAEhCX,EAAC,OACC,UAAWE,EACT,4GACAS,GAAe,QAAU,UAAY,cAAgB,eACrD,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,SAAAT,EAAC,OAAI,UAAU,mBACb,UAAAD,EAACO,EAAA,CACC,UAAU,SACV,aAAa,sBACb,OAAQG,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,EACAT,EAAC,OAAI,UAAU,+DACb,UAAAD,EAACQ,EAAA,CAAK,KAAME,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,aACLV,EAACQ,EAAA,CAAK,KAAME,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEE,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAH,EAAM,UAAAI,CAAU,EAAID,EACtB,CAAE,YAAAE,EAAa,MAAAC,CAAM,EAAIN,EAE/B,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAU,wDACb,SAAAA,EAACK,EAAA,CAAK,UAAWH,EAAG,wCAAyCY,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,IAErBjB,EAACK,EAAA,CAEC,KAAMW,EAAK,KACX,UAAWf,EACT,mEACAc,IAAU,UAAY,cAAgB,eACtC,sEACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAjB,EAACO,EAAA,CACC,OAAQU,EAAK,IAAI,IACjB,UAAU,YACV,aAAa,yEACf,EACAhB,EAAC,OAAI,UAAU,iGACZ,UAAAgB,EAAK,OACJjB,EAACQ,EAAA,CAAK,KAAMS,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,aAAejB,EAACQ,EAAA,CAAK,KAAMS,EAAK,YAAa,UAAU,oCAAoC,GACnG,IArBKC,CAsBP,CAEH,EACH,EACF,EACAlB,EAAC,OAAI,UAAU,6BACb,SAAAA,EAACG,EAAA,CACC,GAAG,iBACH,UAAWD,EAAG,oBAAqBY,CAAS,EAC5C,KAAM,CACJ,KAAMC,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,IAAOU,EAAQf,EAAWQ,CAAc",
+  "names": ["Fragment", "jsx", "jsxs", "cn", "SwiperBox", "withLayout", "Grid", "GridItem", "Picture", "Text", "Item", "data", "configuration", "CreativeModule", "props", "className", "productsTab", "shape", "item", "index", "CreativeModule_default"]
 }

package/dist/esm/biz-components/Evaluate/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import u,{useImperativeHandle as x,useRef as w}from"react";import g from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import h from"../../components/picture.js";import b from"../SwiperBox/index.js";import{withLayout as k}from"../../shared/Styles.js";import{Avatar as N,AvatarImage as y,AvatarFallback as C}from"../../components/avatar.js";import{Container as L}from"../../components/container.js";import{Text as E}from"../../components/text.js";import{useExposure as P}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";const m="copy",d="product_review",B=({data:t,configuration:r})=>{const l=i=>i?Array.from(new Array(Number(i)))||[]:[];return e("div",{className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.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:s("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[s("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[t?.title?e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}):null,e("div",{className:"mt-1 flex items-center",children:l(t?.rating)?.map?.((i,o)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("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"})})},o))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:t?.avatar?.url?s(N,{className:"size-full",isAdaptation:!t?.avatar?.url,children:[e(y,{src:t?.avatar?.url}),e(C,{children:t?.title})]}):null})]}),e("div",{className:"flex-1",children:e(E,{className:a("desktop:max-h-[151px] tablet:max-h-[140px]","lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:t?.description||""})}),e("a",{href:T(t?.link,`${m}_${d}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:s("div",{className:a("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(h,{className:"w-full object-cover",source:t?.img?.url,alt:t?.img?.alt||""})}),e("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:t?.subTitle||""})]})})]})})},M=u.forwardRef(({className:t="",data:r,key:l,...i},o)=>{const{products:c,title:n,theme:v,...f}=r,p=w(null);return x(o,()=>p.current),P(p,{componentType:m,componentName:d,componentTitle:n}),e("div",{className:t,ref:p,children:e("div",{className:"evaluate-box",children:e(L,{...r?.containerProps||{},className:"overflow-hidden",children:s("div",{ref:o,className:a("w-full",t,{"aiui-dark":v==="dark"}),children:[n&&e(g,{data:{title:n}}),e(b,{className:"!overflow-visible",id:"Evaluate"+l,data:{list:c,configuration:{...f}},Slide:B,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}}})]})})})})});var $=k(M);export{$ as default};
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import u,{useImperativeHandle as x,useRef as w}from"react";import g from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import h from"../../components/picture.js";import b from"../SwiperBox/index.js";import{withLayout as k}from"../../shared/Styles.js";import{Avatar as N,AvatarImage as y,AvatarFallback as C}from"../../components/avatar.js";import{Container as L}from"../../components/container.js";import{Text as E}from"../../components/text.js";import{useExposure as P}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";const m="copy",d="product_review",B=({data:t,configuration:r})=>{const l=i=>i?Array.from(new Array(Number(i)))||[]:[];return e("div",{className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.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:s("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[s("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[t?.title?e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}):null,e("div",{className:"mt-1 flex items-center",children:l(t?.rating)?.map?.((i,o)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("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"})})},o))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:t?.avatar?.url?s(N,{className:"size-full",isAdaptation:!t?.avatar?.url,children:[e(y,{src:t?.avatar?.url}),e(C,{children:t?.title})]}):null})]}),e("div",{className:"flex-1",children:e(E,{className:a("desktop:max-h-[151px] tablet:max-h-[140px]","lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:t?.description||""})}),e("a",{href:T(t?.link,`${m}_${d}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:s("div",{className:a("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(h,{className:"w-full object-cover",source:t?.img?.url,alt:t?.img?.alt||""})}),e("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:t?.subTitle||""})]})})]})})},M=u.forwardRef(({className:t="",data:r,key:l,...i},o)=>{const{products:c,title:n,theme:v,...f}=r,p=w(null);return x(o,()=>p.current),P(p,{componentType:m,componentName:d,componentTitle:n}),e("div",{className:t,ref:p,children:e("div",{className:"evaluate-box",children:e(L,{...r?.containerProps||{},className:"overflow-hidden",children:s("div",{ref:o,className:a("w-full",t,{"aiui-dark":v==="dark"}),children:[n&&e(g,{data:{title:n}}),e(b,{className:"!overflow-visible",id:"Evaluate"+l,data:{list:c,configuration:{...f}},Slide:B,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}}})]})})})})});var $=k(M);export{$ as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Evaluate/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: Img\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: Theme\n    containerProps?: ContainerProps\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n        <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n          <div className=\"flex-1\">\n            {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n            <div className=\"mt-1 flex items-center\">\n              {handleRating(data?.rating)?.map?.((_, index) => {\n                return (\n                  <div key={index} className=\"mr-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                      <path\n                        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\"\n                        fill=\"#F77234\"\n                      />\n                    </svg>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n          <div className=\"desktop:size-12 size-10 overflow-hidden\">\n            {data?.avatar?.url ? (\n              <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </Avatar>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex-1\">\n          <Text\n            className={cn(\n              'desktop:max-h-[151px] tablet:max-h-[140px]',\n              'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n            )}\n          >\n            {data?.description || ''}\n          </Text>\n        </div>\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          onClick={() => {\n            configuration?.event?.primaryButton(data, configuration?.index)\n          }}\n        >\n          <div\n            className={cn(\n              'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n              configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n            )}\n          >\n            <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n              <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n            </div>\n            <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n              {data?.subTitle || ''}\n            </p>\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"evaluate-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n            {title && <Title data={{ title: title }} />}\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'Evaluate' + key}\n              data={{ list: products, configuration: { ...ohter } }}\n              Slide={EvaluateItem}\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                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          </div>\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nexport default withLayout(Evaluate)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: Img\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: Theme\n    containerProps?: ContainerProps\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <div\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n        <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n          <div className=\"flex-1\">\n            {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n            <div className=\"mt-1 flex items-center\">\n              {handleRating(data?.rating)?.map?.((_, index) => {\n                return (\n                  <div key={index} className=\"mr-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                      <path\n                        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\"\n                        fill=\"#F77234\"\n                      />\n                    </svg>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n          <div className=\"desktop:size-12 size-10 overflow-hidden\">\n            {data?.avatar?.url ? (\n              <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </Avatar>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex-1\">\n          <Text\n            className={cn(\n              'desktop:max-h-[151px] tablet:max-h-[140px]',\n              'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n            )}\n          >\n            {data?.description || ''}\n          </Text>\n        </div>\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          onClick={() => {\n            configuration?.event?.primaryButton(data, configuration?.index)\n          }}\n        >\n          <div\n            className={cn(\n              'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n              configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n            )}\n          >\n            <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n              <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n            </div>\n            <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n              {data?.subTitle || ''}\n            </p>\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"evaluate-box\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n            {title && <Title data={{ title: title }} />}\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'Evaluate' + key}\n              data={{ list: products, configuration: { ...ohter } }}\n              Slide={EvaluateItem}\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                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          </div>\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nexport default withLayout(Evaluate)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withLayout", "Avatar", "AvatarImage", "AvatarFallback", "Container", "Text", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "Evaluate_default"]
 }

package/dist/esm/biz-components/Graphic/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as G}from"react-responsive";import S,{useEffect as E,useImperativeHandle as B,useRef as D,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z}from"../../components/index.js";import{Picture as v,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as $}from"../VideoModal/index.js";import{TextModal as q}from"../TextModal/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const h="image",u="graphic",Y=({data:e,configuration:i})=>{const d=()=>{switch(i.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function f(o){throw new Error("Function not implemented.")}function p(o){throw new Error("Function not implemented.")}function b(o){throw new Error("Function not implemented.")}return t("div",{className:m(d(),"laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:n("a",{"aria-label":e?.title??e?.description,href:y(e?.href,`${h}_${u}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),n("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onIconClick?.(e,i)},className:" laptop:size-9 flex size-6 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t(v,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"desktop:mt-[24px] mt-[12px] self-start",href:y(e?.href,`${h}_${u}`),children:e.buttonText}),t("div",{onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onIconClick?.(e,i)},children:"111"})]})]})})})},k=S.forwardRef(({data:e,className:i},d)=>{const f=G({query:"(max-width: 768px)"}),p=D(null),[b,o]=r(!1),[g,T]=r(""),[I,M]=r(""),[V,C]=r(""),[N,w]=r(null),[P,x]=r(!1),c=l=>{const s=e?.items?.length>3,a=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||a?2.3:2;default:return 1.2}};return B(d,()=>p.current),F(p,{componentType:h,componentName:u,componentTitle:e?.title}),E(()=>{const l=p.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(a=>{s=Math.max(s,a.offsetHeight)}),l.forEach(a=>{a.style.height=`${s}px`})}},[]),n("div",{className:i,ref:p,children:[n("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{o(!0),s?.isYouTube?M?.(s?.youtubeId||""):(T?.(s?.video?.url||""),C?.(s?.mobileVideo?.url||""))},onIconClick:l=>{x(!0),w(l)}}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c()},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}})]}),t($,{visible:b,youTubeId:I,onCloseModal:()=>o(!1),videoUrl:f&&V||g}),t(q,{textVisible:P,extension:N?.extension,onCloseModal:()=>{x(!1),w(null)}})]})});k.displayName="Graphic";var se=H(k);export{se as default};
+"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as G}from"react-responsive";import S,{useEffect as E,useImperativeHandle as B,useRef as H,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as L}from"../../shared/Styles.js";import D from"../SwiperBox/index.js";import{Button as U,Heading as z}from"../../components/index.js";import{Picture as v,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as $}from"../VideoModal/index.js";import{TextModal as q}from"../TextModal/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const h="image",u="graphic",Y=({data:e,configuration:l})=>{const d=()=>{switch(l.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function f(s){throw new Error("Function not implemented.")}function p(s){throw new Error("Function not implemented.")}function b(s){throw new Error("Function not implemented.")}return t("div",{className:m(d(),"laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":l?.itemShape==="round"}),children:n("a",{"aria-label":e?.title??e?.description,href:y(e?.href,`${h}_${u}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),n("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:s=>{s.preventDefault(),s.stopPropagation(),l?.onVideoPlayBtnClick?.(l?.index||0,e)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:s=>{s.preventDefault(),s.stopPropagation(),l?.onIconClick?.(e,l)},className:" laptop:size-9 flex size-6 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t(v,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"desktop:mt-[24px] mt-[12px] self-start",href:y(e?.href,`${h}_${u}`),children:e.buttonText})]})]})})})},k=S.forwardRef(({data:e,className:l},d)=>{const f=G({query:"(max-width: 768px)"}),p=H(null),[b,s]=r(!1),[g,T]=r(""),[I,M]=r(""),[V,N]=r(""),[C,w]=r(null),[P,x]=r(!1),c=i=>{const o=e?.items?.length>3,a=e?.items?.length>2;switch(i){case 1440:return o?4:e?.items?.length;case 1024:return o?3:e?.items?.length;case 768:return o||a?2.3:2;default:return 1.2}};return B(d,()=>p.current),F(p,{componentType:h,componentName:u,componentTitle:e?.title}),E(()=>{const i=p.current?.querySelectorAll(".graphic-description");if(i&&i.length>0){let o=0;i.forEach(a=>{o=Math.max(o,a.offsetHeight)}),i.forEach(a=>{a.style.height=`${o}px`})}},[]),n("div",{className:l,ref:p,children:[n("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(D,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(i,o)=>{s(!0),o?.isYouTube?M?.(o?.youtubeId||""):(T?.(o?.video?.url||""),N?.(o?.mobileVideo?.url||""))},onIconClick:i=>{x(!0),w(i)}}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c()},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}})]}),t($,{visible:b,youTubeId:I,onCloseModal:()=>s(!1),videoUrl:f&&V||g}),t(q,{textVisible:P,extension:C?.extension,onCloseModal:()=>{x(!1),w(null)}})]})});k.displayName="Graphic";var se=L(k);export{se as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  function setVisible(arg0: boolean) {\n    throw new Error('Function not implemented.')\n  }\n\n  function setTextVisible(arg0: boolean) {\n    throw new Error('Function not implemented.')\n  }\n\n  function setCurrentItem(data: GraphicType) {\n    throw new Error('Function not implemented.')\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          aria-label={data?.title ?? data?.description}\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\" laptop:size-9 flex size-6 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"desktop:mt-[24px] mt-[12px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n            <div\n              onClick={(e: any) => {\n                e.preventDefault()\n                e.stopPropagation()\n                configuration?.onIconClick?.(data, configuration)\n              }}\n            >\n              111\n            </div>\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\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: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  function setVisible(arg0: boolean) {\n    throw new Error('Function not implemented.')\n  }\n\n  function setTextVisible(arg0: boolean) {\n    throw new Error('Function not implemented.')\n  }\n\n  function setCurrentItem(data: GraphicType) {\n    throw new Error('Function not implemented.')\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          aria-label={data?.title ?? data?.description}\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\" laptop:size-9 flex size-6 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"desktop:mt-[24px] mt-[12px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\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: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setTextVisible", "setCurrentItem", "e", "Graphic", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "textVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
 }

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { GraphicOverlayProps } from './types';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicOverlayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;
+export type { GraphicOverlayProps };

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as c}from"react/jsx-runtime";import G,{useState as f,useEffect as S,useRef as z}from"react";import{useMediaQuery as U}from"react-responsive";import{withLayout as O}from"../../shared/Styles.js";import T from"../../components/picture.js";import I from"../../components/button.js";import{Heading as V}from"../../components/heading.js";import{VideoModal as R}from"../VideoModal/index.js";import{cn as x}from"../../helpers/utils.js";import E from"../SwiperBox/index.js";import{isVideo as L}from"../../shared/mimeType.js";import{useExposure as _}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const w="image",k="p1_banner",j=({data:p,configuration:o,jIndex:g,spanType:l})=>{const[n,m]=f(!1),u=U({query:"(max-width: 768px)"}),b=z(null),v=()=>{if(l)switch(l){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};_(b,{componentType:w,componentName:k,position:g,componentTitle:p.title,componentDescription:p.description,navigation:o?.activeTab}),S(()=>{m(u)},[u]);const{theme:y="light",title:r,description:s,imageUrl:t,primaryButton:a,secondaryButton:i,imageMobileUrl:d,blockLink:h,video:B,youtubeId:M,isYouTube:C}=p,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return c("div",{className:x("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",v(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":y==="dark","h-[480px]":n&&!o?.isTab,"h-[400px]":n&&o?.isTab},"text-info-primary"),ref:b,children:[h&&e("a",{className:"absolute inset-0 z-10",href:N(h,`${w}_${k}`),"aria-hidden":"true",tabIndex:-1}),c("div",{className:"absolute inset-0",children:[L(t?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:t?.url,type:"video/mp4"})}):e(T,{source:t?.url,alt:t?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),L(d?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:d?.url,type:"video/mp4"})}):e(T,{source:d?.url||t?.url,alt:d?.alt||t?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),c("div",{className:x("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":p?.width==="full"}),children:[c("div",{children:[e(V,{size:3,as:"h3",className:"item-title",html:r}),e(V,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:s})]}),c("div",{className:"lg-desktop:gap-3 flex gap-2",children:[i&&i.text&&c(I,{"aria-label":r??s,className:P,variant:"secondary",as:"a",href:N(i.link,`${w}_${k}`),children:[i.text,e("span",{className:"sr-only",children:r??s})]}),a&&a.text&&e(I,{"aria-label":r??s,className:P,variant:"primary",as:"a",href:N(a.link,`${w}_${k}`),children:a.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(B?.url||M)&&e("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(B?.url||M,C)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},$=G.forwardRef((p,o)=>{const{shape:g,items:l=[]}=p.data,[n,m]=f(!1),[u,b]=f(""),[v,y]=f(""),r=(t,a)=>{m(!0),a?y?.(t||""):b?.(t||"")},s=t=>{const a=l?.length,i=a>3,d=a>2,h=a>1;switch(!0){case t>=1440:case t>=1024:return i?3:a;case t>=768:return i||d?2.3:h?2:1;default:return h?1.2:1}};return c("section",{"data-ui-component-id":"GraphicOverlay",ref:o,className:x("text-info-primary",p.className),children:[l&&l.length>0?e(E,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:l||[],configuration:{shape:g,onVideoPlayBtnClick:r}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:s(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:s(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:s(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:s(1440)}}}):null,n&&e(R,{visible:n,youTubeId:v,videoUrl:u,onCloseModal:()=>m(!1)})]})});$.displayName="MultiLayoutGraphicBlock";var ee=O($);export{ee as default};
+//# sourceMappingURL=GraphicOverlay.js.map

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div>\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { shape, items = [] } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section data-ui-component-id=\"GraphicOverlay\" ref={ref} className={cn('text-info-primary', props.className)}>\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
+}

package/dist/esm/biz-components/GraphicOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './GraphicOverlay.js';
+export type { GraphicOverlayProps } from './types.js';

package/dist/esm/biz-components/GraphicOverlay/index.js

@@ -0,0 +1,2 @@
+import{default as p}from"./GraphicOverlay.js";export{p as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/GraphicOverlay/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GraphicOverlay/index.tsx"],
+  "sourcesContent": ["export { default } from './GraphicOverlay.js'\nexport type { GraphicOverlayProps } from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
+  "names": ["default"]
+}

package/dist/esm/biz-components/GraphicOverlay/types.d.ts

@@ -0,0 +1,33 @@
+import type { Media, Shape, Theme } from '../../types/props';
+export type Item = {
+    theme?: Theme;
+    title: string;
+    description: string;
+    imageUrl: Media;
+    imageMobileUrl?: Media;
+    tabName?: string;
+    width?: 'full' | 'half' | 'one-third';
+    blockLink?: string;
+    primaryButton: {
+        text: string;
+        link: string;
+    };
+    secondaryButton: {
+        text: string;
+        link: string;
+    };
+    video?: {
+        url: string;
+    };
+    youtubeId?: string;
+    isYouTube?: boolean;
+};
+export type GraphicOverlayProps = {
+    data: {
+        shape?: Shape;
+        items: ({
+            width?: 'full' | 'half' | 'one-third';
+        } & Item)[];
+    };
+    className?: string;
+};

package/dist/esm/biz-components/GraphicOverlay/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/GraphicOverlay/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/biz-components/MediaPlayerMulti/YouTubePlayer.d.ts

@@ -0,0 +1,3 @@
+export declare function YouTubePlayer({ youTubeId }: {
+    youTubeId: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/biz-components/SectionHeading/SectionHeading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SectionHeadingProps } from './types.js';
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeading;

package/dist/esm/biz-components/SectionHeading/types.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SectionHeadingProps {
+    title: string;
+    className?: string;
+    children: React.ReactNode;
+}

package/dist/esm/biz-components/Shelf/Shelf.d.ts

@@ -0,0 +1,8 @@
+import type { ShelfProps } from './types.js';
+declare const _default: {
+    (props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;