npm - @anker-in/headless-ui - Versions diffs - 1.0.10-temp-onclick → 1.0.10-temp-21 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/dist/cjs/apps/playground/utils/classnames.d.ts ADDED Viewed

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } 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": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_track", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCards", "React", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "throttle", "MobileItem", "configuration", "Picture", "Button", "handleSwiperItemClick", "idx", "Title", "item", "isExpanded", "SwiperBox"]
 }

package/dist/cjs/biz-components/AccordionCards/useDebounce.d.ts ADDED Viewed

@@ -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/cjs/biz-components/CreativeModule/index.d.ts CHANGED Viewed

@@ -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/cjs/biz-components/CreativeModule/index.js CHANGED Viewed

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/CreativeModule/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,OAAC,OACC,aAAW,MACT,qGACAA,EAAK,QAAU,UAAY,cAAgB,eAC3C,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,+DACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,iDAAiD,EACnFA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEC,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAF,EAAM,UAAAG,CAAU,EAAID,EACtB,CAAE,SAAAE,CAAS,EAAIJ,EAErB,SACE,oBACE,oBAAC,OAAI,UAAU,wDACb,mBAAC,QAAK,aAAW,MAAG,wCAAyCG,CAAS,EACnE,SAAAC,GAAU,IAAI,CAACC,EAAMC,OAElB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAA,EAAK,QAAU,UAAY,cAAgB,eAC3C,sEACA,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,KACxF,QAAC,OAAI,UAAU,iGACZ,UAAAA,EAAK,UACJ,OAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,gBAAe,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,oCAAoC,GACnG,IAjBKC,CAkBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6CACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBJ,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,IAAOR,KAAQ,cAAWU,CAAc",
-  "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "Item", "data", "CreativeModule", "props", "className", "products", "item", "index", "SwiperBox"]
+  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MACT,4GACAA,GAAe,QAAU,UAAY,cAAgB,eACrD,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,+DACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,gBACL,OAAC,QAAK,KAAMA,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,SACE,oBACE,oBAAC,OAAI,UAAU,wDACb,mBAAC,QAAK,aAAW,MAAG,wCAAyCI,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,mEACAD,IAAU,UAAY,cAAgB,eACtC,sEACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WACC,OAAQA,EAAK,IAAI,IACjB,UAAU,YACV,aAAa,yEACf,KACA,QAAC,OAAI,UAAU,iGACZ,UAAAA,EAAK,UACJ,OAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,gBAAe,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,oCAAoC,GACnG,IArBKC,CAsBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6BACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBL,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,IAAOR,KAAQ,cAAWW,CAAc",
+  "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "Item", "data", "configuration", "CreativeModule", "props", "className", "productsTab", "shape", "item", "index", "SwiperBox"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var P=Object.create;var p=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var I=(e,r)=>{for(var s in r)p(e,s,{get:r[s],enumerable:!0})},v=(e,r,s,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of B(r))!A.call(e,a)&&a!==s&&p(e,a,{get:()=>r[a],enumerable:!(i=T(r,a))||i.enumerable});return e};var m=(e,r,s)=>(s=e!=null?P(M(e)):{},v(r||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),z=e=>v(p({},"__esModule",{value:!0}),e);var H={};I(H,{default:()=>V});module.exports=z(H);var t=require("react/jsx-runtime"),l=m(require("react")),x=m(require("../Title/index.js")),o=require("../../helpers/utils.js"),w=m(require("../../components/picture.js")),g=m(require("../SwiperBox/index.js")),h=require("../../shared/Styles.js"),n=require("../../components/avatar.js"),b=require("../../components/container.js"),k=require("../../components/text.js"),N=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const f="copy",u="product_review",F=({data:e,configuration:r})=>{const s=i=>i?Array.from(new Array(Number(i)))||[]:[];return(0,t.jsx)("div",{className:(0,o.cn)("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:(0,t.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,o.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:s(e?.rating)?.map?.((i,a)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},a))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(n.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(n.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(n.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsx)(k.Text,{className:(0,o.cn)("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:e?.description||""})}),(0,t.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${f}_${u}`),onClick:()=>{r?.event?.primaryButton(e,r?.index)},children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(w.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},R=l.default.forwardRef(({className:e="",data:r,key:s,...i},a)=>{const{products:C,title:d,theme:L,...E}=r,c=(0,l.useRef)(null);return(0,l.useImperativeHandle)(a,()=>c.current),(0,N.useExposure)(c,{componentType:f,componentName:u,componentTitle:d}),(0,t.jsx)("div",{className:e,ref:c,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(b.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:a,className:(0,o.cn)("w-full",e,{"aiui-dark":L==="dark"}),children:[d&&(0,t.jsx)(x.default,{data:{title:d}}),(0,t.jsx)(g.default,{className:"!overflow-visible",id:"Evaluate"+s,data:{list:C,configuration:{...E}},Slide:F,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 V=(0,h.withLayout)(R);
+"use strict";"use client";var P=Object.create;var p=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var I=(e,r)=>{for(var s in r)p(e,s,{get:r[s],enumerable:!0})},v=(e,r,s,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of B(r))!A.call(e,a)&&a!==s&&p(e,a,{get:()=>r[a],enumerable:!(i=T(r,a))||i.enumerable});return e};var m=(e,r,s)=>(s=e!=null?P(M(e)):{},v(r||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),z=e=>v(p({},"__esModule",{value:!0}),e);var H={};I(H,{default:()=>V});module.exports=z(H);var t=require("react/jsx-runtime"),l=m(require("react")),x=m(require("../Title/index.js")),o=require("../../helpers/utils.js"),w=m(require("../../components/picture.js")),g=m(require("../SwiperBox/index.js")),h=require("../../shared/Styles.js"),n=require("../../components/avatar.js"),b=require("../../components/container.js"),k=require("../../components/text.js"),N=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const f="copy",u="product_review",F=({data:e,configuration:r})=>{const s=i=>i?Array.from(new Array(Number(i)))||[]:[];return(0,t.jsx)("div",{className:(0,o.cn)("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:(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,o.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:s(e?.rating)?.map?.((i,a)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},a))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(n.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(n.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(n.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsx)(k.Text,{className:(0,o.cn)("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:e?.description||""})}),(0,t.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${f}_${u}`),onClick:()=>{r?.event?.primaryButton(e,r?.index)},children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(w.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},R=l.default.forwardRef(({className:e="",data:r,key:s,...i},a)=>{const{products:C,title:d,theme:L,...E}=r,c=(0,l.useRef)(null);return(0,l.useImperativeHandle)(a,()=>c.current),(0,N.useExposure)(c,{componentType:f,componentName:u,componentTitle:d}),(0,t.jsx)("div",{className:e,ref:c,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(b.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:a,className:(0,o.cn)("w-full",e,{"aiui-dark":L==="dark"}),children:[d&&(0,t.jsx)(x.default,{data:{title:d}}),(0,t.jsx)(g.default,{className:"!overflow-visible",id:"Evaluate"+s,data:{list:C,configuration:{...E}},Slide:F,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 V=(0,h.withLayout)(R);
 //# sourceMappingURL=index.js.map

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

@@ -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": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "import_text", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "Title", "SwiperBox"]
 }

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

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

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

@@ -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": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setTextVisible", "setCurrentItem", "e", "Graphic", "React", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "textVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
 }

package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.d.ts ADDED Viewed

@@ -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/cjs/biz-components/GraphicOverlay/GraphicOverlay.js ADDED Viewed

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

package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map ADDED Viewed

@@ -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": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_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", "Picture", "Button", "GraphicOverlay", "React", "props", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
+}

package/dist/cjs/biz-components/GraphicOverlay/index.d.ts ADDED Viewed

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

package/dist/cjs/biz-components/GraphicOverlay/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var y=Object.create;var t=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var d=(r,e)=>{for(var p in e)t(r,p,{get:e[p],enumerable:!0})},f=(r,e,p,a)=>{if(e&&typeof e=="object"\|\|typeof e=="function")for(let o of m(e))!c.call(r,o)&&o!==p&&t(r,o,{get:()=>e[o],enumerable:!(a=l(e,o))\|\|a.enumerable});return r};var h=(r,e,p)=>(p=r!=null?y(x(r)):{},f(e\|\|!r\|\|!r.__esModule?t(p,"default",{value:r,enumerable:!0}):p,r)),i=r=>f(t({},"__esModule",{value:!0}),r);var j={};d(j,{default:()=>s.default});module.exports=i(j);var s=h(require("./GraphicOverlay.js"));
2	+ //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/GraphicOverlay/index.js.map ADDED Viewed

@@ -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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
+  "names": ["GraphicOverlay_exports", "__export", "__toCommonJS", "import_GraphicOverlay"]
+}

package/dist/cjs/biz-components/GraphicOverlay/types.d.ts ADDED Viewed

@@ -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/cjs/biz-components/GraphicOverlay/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(e,t,n,r)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let i of o(t))!l.call(e,i)&&i!==n&&a(e,i,{get:()=>t[i],enumerable:!(r=s(t,i))\|\|r.enumerable});return e};var g=e=>p(a({},"__esModule",{value:!0}),e);var h={};module.exports=g(h);
2	+ //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/GraphicOverlay/types.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GraphicOverlay/types.tsx"],
+  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n}\n\nexport type GraphicOverlayProps = {\n  data: {\n    shape?: Shape\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n  }\n  className?: string\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/cjs/biz-components/MediaPlayerMulti/YouTubePlayer.d.ts ADDED Viewed

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