@anker-in/headless-ui 1.0.10-temp-22 → 1.0.10-temp-0806

package/dist/cjs/biz-components/MemberEquity/index.js

@@ -1,5 +1,5 @@
-"use strict";"use client";var P=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)c(t,a,{get:o[a],enumerable:!0})},f=(t,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of R(o))!C.call(t,p)&&p!==a&&c(t,p,{get:()=>o[p],enumerable:!(s=j(o,p))||s.enumerable});return t};var D=(t,o,a)=>(a=t!=null?P(_(t)):{},f(o||!t||!t.__esModule?c(a,"default",{value:t,enumerable:!0}):a,t)),L=t=>f(c({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>$});module.exports=L(F);var e=require("react/jsx-runtime"),i=D(require("react")),v=require("react-responsive"),l=require("../../components/index.js"),h=require("../../shared/Styles.js"),d=require("../../helpers/utils.js"),y=require("../../shared/mimeType.js"),N=require("../../hooks/useExposure.js"),B=require("../../shared/trackUrlRef.js");const g="image",k="member_area",S=i.default.forwardRef(({data:t,className:o=""},a)=>{const{title:s,description:p,backgroundImage:r,mobileBackgroundImage:m,primaryButton:u,secondaryButton:n,theme:q,shape:M,primaryButtonHandler:w,secondaryButtonHandler:E}=t,T=(0,v.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,i.useRef)(null);(0,i.useImperativeHandle)(a,()=>x.current),(0,N.useExposure)(x,{componentType:g,componentName:k,componentTitle:s,componentDescription:p});const z=()=>{w?.()},H=()=>{E?.()},b="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,d.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":T}),ref:x,children:[(0,y.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:r?.url,alt:r?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,y.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
+"use strict";"use client";var P=Object.create;var c=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)c(t,a,{get:o[a],enumerable:!0})},f=(t,o,a,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of R(o))!C.call(t,l)&&l!==a&&c(t,l,{get:()=>o[l],enumerable:!(i=j(o,l))||i.enumerable});return t};var D=(t,o,a)=>(a=t!=null?P(_(t)):{},f(o||!t||!t.__esModule?c(a,"default",{value:t,enumerable:!0}):a,t)),L=t=>f(c({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>$});module.exports=L(F);var e=require("react/jsx-runtime"),s=D(require("react")),v=require("react-responsive"),p=require("../../components/index.js"),h=require("../../shared/Styles.js"),d=require("../../helpers/utils.js"),y=require("../../shared/mimeType.js"),N=require("../../hooks/useExposure.js"),B=require("../../shared/trackUrlRef.js");const g="image",k="member_area",S=s.default.forwardRef(({data:t,className:o=""},a)=>{const{title:i,description:l,backgroundImage:r,mobileBackgroundImage:m,primaryButton:u,secondaryButton:n,theme:q,shape:M,primaryButtonHandler:w,secondaryButtonHandler:E}=t,T=(0,v.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,s.useRef)(null);(0,s.useImperativeHandle)(a,()=>x.current),(0,N.useExposure)(x,{componentType:g,componentName:k,componentTitle:i,componentDescription:l});const z=()=>{w?.()},H=()=>{E?.()},b="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,d.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":T}),ref:x,children:[(0,y.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(p.Picture,{source:r?.url,alt:r?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,y.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(p.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
               tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 
               laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
-            `,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(l.Heading,{as:"h2",size:3,className:"member-equity-title ",html:s}),(0,e.jsx)(l.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:p})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[n&&n.text&&(0,e.jsxs)(l.Button,{"aria-label":s??p,variant:"secondary",onClick:H,className:(0,d.cn)("member-equity-button-secondary ",b),as:"a",href:(0,B.trackUrlRef)(n.link,`${g}_${k}`),children:[n.text,(0,e.jsx)("span",{className:"sr-only",children:s??p})]}),u&&u.text&&(0,e.jsx)(l.Button,{variant:"primary",onClick:z,className:(0,d.cn)("member-equity-button-primary ",b),children:u.text})]})]})})]})});var $=(0,h.withLayout)(S);
+            `,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(p.Heading,{as:"h2",size:3,className:"member-equity-title ",html:i}),(0,e.jsx)(p.Text,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:l})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[n&&n.text&&(0,e.jsx)("a",{href:(0,B.trackUrlRef)(n.link,`${g}_${k}`),children:(0,e.jsx)(p.Button,{variant:"secondary",onClick:H,className:(0,d.cn)("member-equity-button-secondary ",b),children:n.text})}),u&&u.text&&(0,e.jsx)(p.Button,{variant:"primary",onClick:z,className:(0,d.cn)("member-equity-button-primary ",b),children:u.text})]})]})})]})});var $=(0,h.withStyles)(S);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.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 = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\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                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withLayout(MemberEquity)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QACC,KAAM,EACN,UAAW,mFACX,KAAMC,EACR,GACF,KAEA,QAAC,OAAI,UAAU,2CACZ,UAAAI,GAAmBA,EAAgB,SAClC,QAAC,UACC,aAAYL,GAASC,EACrB,QAAQ,YACR,QAASY,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAC7D,GAAG,IACH,QAAM,eAAYT,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAE1E,UAAAW,EAAgB,QACjB,OAAC,QAAK,UAAU,UAAW,SAAAL,GAASC,EAAY,GAClD,EAEDG,GAAiBA,EAAc,SAC9B,OAAC,UACC,QAAQ,UACR,QAASQ,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAV,EAAc,KACjB,GAEJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,KAAQ,cAAWa,CAAY",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.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 = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                  <Button\n                    variant=\"secondary\"\n                    onClick={handleButtonSecondaryClick}\n                    className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  >\n                    {secondaryButton.text}\n                  </Button>\n                </a>\n              )}\n              {primaryButton && primaryButton.text && (\n                // <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                >\n                  {primaryButton.text}\n                </Button>\n                // </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withStyles(MemberEquity)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QACC,KAAM,EACN,UAAW,mFACX,KAAMC,EACR,GACF,KAEA,QAAC,OAAI,UAAU,2CACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UACC,QAAQ,YACR,QAASmB,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAE5D,SAAAT,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAE9B,OAAC,UACC,QAAQ,UACR,QAASQ,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAV,EAAc,KACjB,GAGJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,KAAQ,cAAWa,CAAY",
   "names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MemberEquity", "React", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
 }

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts

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

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

@@ -1,2 +1,2 @@
-"use strict";var q=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,o)=>{for(var l in o)I(a,l,{get:o[l],enumerable:!0})},R=(a,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of O(o))!F.call(a,p)&&p!==l&&I(a,p,{get:()=>o[p],enumerable:!(n=A(o,p))||n.enumerable});return a};var B=(a,o,l)=>(l=a!=null?q(Z(a)):{},R(o||!a||!a.__esModule?I(l,"default",{value:a,enumerable:!0}):l,a)),K=a=>R(I({},"__esModule",{value:!0}),a);var X={};J(X,{default:()=>W});module.exports=K(X);var e=require("react/jsx-runtime"),i=B(require("react")),j=require("react-responsive"),E=require("../../shared/Styles.js"),_=B(require("../../components/picture.js")),$=B(require("../../components/button.js")),S=require("../../components/heading.js"),H=require("../VideoModal/index.js"),N=require("../../components/gird.js"),D=B(require("../Title/index.js")),m=require("../../helpers/utils.js"),L=B(require("../SwiperBox/index.js")),z=require("../../shared/mimeType.js"),h=require("../../components/tabs.js"),Q=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js"),Y=require("../../shared/track.js");const x="image",T="p1_banner",M=({data:a,configuration:o,jIndex:l,spanType:n})=>{const[p,b]=(0,i.useState)(!1),d=(0,j.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,i.useRef)(null),P=()=>{if(n)switch(n){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,Q.useExposure)(v,{componentType:x,componentName:T,position:l,componentTitle:a.title,componentDescription:a.description,navigation:o?.activeTab}),(0,i.useEffect)(()=>{b(d)},[d]);const{theme:G="light",title:k,description:g,imageUrl:r,primaryButton:f,secondaryButton:u,imageMobileUrl:c,blockLink:y,video:w,youtubeId:t,isYouTube:s}=a,V="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,m.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",P(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":G==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:v,children:[y&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,C.trackUrlRef)(y,`${x}_${T}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,z.isVideo)(r?.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:r?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:r?.url,alt:r?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${r?.width}/${r?.height}`}}),(0,z.isVideo)(c?.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:c?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:c?.url||r?.url,alt:c?.alt||r?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,m.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":a?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(S.Heading,{size:3,as:"h3",className:"item-title",html:k}),(0,e.jsx)(S.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:g})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,e.jsxs)($.default,{"aria-label":k??g,className:V,variant:"secondary",as:"a",href:(0,C.trackUrlRef)(u.link,`${x}_${T}`),children:[u.text,(0,e.jsx)("span",{className:"sr-only",children:k??g})]}),f&&f.text&&(0,e.jsx)($.default,{"aria-label":k??g,className:V,variant:"primary",as:"a",href:(0,C.trackUrlRef)(f.link,`${x}_${T}`),children:f.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(w?.url||t)&&(0,e.jsx)("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(w?.url||t,s)},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"})})})})})]})},U=i.default.forwardRef((a,o)=>{const{shape:l,sectionTitle:n,groupByTab:p=!1,items:b=[],carousel:d}=a.data,[v,P]=(0,i.useState)(!1),[G,k]=(0,i.useState)(""),[g,r]=(0,i.useState)(""),f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},u=b.map(t=>t.tabName).filter(Boolean).filter((t,s,V)=>V.indexOf(t)===s),c=(t,s)=>{P(!0),s?r?.(t||""):k?.(t||"")},y=(t,s)=>{switch(t){case 1:return 1;case 2:return 2;default:return s?2.3:3}},w=u.map(t=>({tabName:t,items:b.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:(0,m.cn)("text-info-primary",a.className),children:[n&&(0,e.jsx)(D.default,{data:{title:n},className:"section-title"}),p?(0,e.jsxs)(h.Tabs,{shape:l,align:"left",defaultValue:(0,m.spaceToHyphen)(u[0]),children:[(0,e.jsx)(h.TabsList,{children:u.map((t,s)=>(0,e.jsx)(h.TabsTrigger,{value:(0,m.spaceToHyphen)(t),onClick:()=>{(0,Y.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:T,component_title:n,component_position:1,navigation:t,button_name:t}})},children:t},s))}),u.map((t,s)=>(0,e.jsx)(h.TabsContent,{value:(0,m.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:w?.[t]||[],configuration:{shape:l,isTab:p,activeTab:t,num:w?.[t]?.length||0,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0)}}}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:d?.items||[],configuration:{shape:l,isTab:p,onVideoPlayBtnClick:c}},Slide:M,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.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(N.Grid,{className:"w-full",children:[b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:t.width})},`${t?.title||""}${s}`)),b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:"full"})},`${t?.title||""}${s}`))]}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:d?.items||[],configuration:{shape:l,onVideoPlayBtnClick:c}},Slide:M,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.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),v&&(0,e.jsx)(H.VideoModal,{visible:v,youTubeId:g,videoUrl:G,onCloseModal:()=>P(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var W=(0,E.withLayout)(U);
+"use strict";var D=Object.create;var T=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var O=(s,o)=>{for(var p in o)T(s,p,{get:o[p],enumerable:!0})},S=(s,o,p,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of Q(o))!A.call(s,l)&&l!==p&&T(s,l,{get:()=>o[l],enumerable:!(i=U(o,l))||i.enumerable});return s};var w=(s,o,p)=>(p=s!=null?D(q(s)):{},S(o||!s||!s.__esModule?T(p,"default",{value:s,enumerable:!0}):p,s)),F=s=>S(T({},"__esModule",{value:!0}),s);var K={};O(K,{default:()=>J});module.exports=F(K);var e=require("react/jsx-runtime"),c=w(require("react")),C=require("react-responsive"),E=require("../../shared/Styles.js"),V=w(require("../../components/picture.js")),I=w(require("../../components/button.js")),G=require("../../components/heading.js"),X=require("../../components/text.js"),v=require("../../components/gird.js"),j=w(require("../Title/index.js")),M=require("../../helpers/utils.js"),N=w(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),n=require("../../components/tabs.js"),z=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js"),H=require("../../shared/track.js");const k="image",b="p1_banner",g=({data:s,configuration:o,jIndex:p,spanType:i})=>{const[l,d]=(0,c.useState)(!1),r=(0,C.useMediaQuery)({query:"(max-width: 768px)"}),h=(0,c.useRef)(null),m=()=>{if(i)switch(i){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,z.useExposure)(h,{componentType:k,componentName:b,position:p,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,c.useEffect)(()=>{d(r)},[r]);const{theme:y="light",title:u,description:t,imageUrl:a,primaryButton:f,secondaryButton:x,imageMobileUrl:B,blockLink:_}=s,$="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,M.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":y==="dark","h-[480px]":l&&!o?.isTab,"h-[400px]":l&&o?.isTab},"text-info-primary"),ref:h,children:[_&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,P.trackUrlRef)(_,`${k}_${b}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(a?.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:a?.url,type:"video/mp4"})}):(0,e.jsx)(V.default,{source:a?.url,alt:a?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),(0,L.isVideo)(B?.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:B?.url,type:"video/mp4"})}):(0,e.jsx)(V.default,{source:B?.url||a?.url,alt:B?.alt||a?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,M.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-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":s?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(G.Heading,{size:3,as:"h3",className:"item-title",html:u}),(0,e.jsx)(G.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:t})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[x&&x.text&&(0,e.jsx)("a",{href:(0,P.trackUrlRef)(x.link,`${k}_${b}`),children:(0,e.jsx)(I.default,{className:$,variant:"secondary",children:x.text})}),f&&f.text&&(0,e.jsx)("a",{href:(0,P.trackUrlRef)(f.link,`${k}_${b}`),children:(0,e.jsx)(I.default,{className:$,variant:"primary",children:f.text})})]})]})]})]})},R=c.default.forwardRef((s,o)=>{const{shape:p,sectionTitle:i,groupByTab:l=!1,items:d=[],carousel:r}=s.data,h=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(t=>t.tabName).filter(Boolean).filter((t,a,f)=>f.indexOf(t)===a),y=(t,a)=>{switch(t){case 1:return 1;case 2:return 2;default:return a?2.3:3}},u=m.map(t=>({tabName:t,items:d.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:(0,M.cn)("text-info-primary",s.className),children:[i&&(0,e.jsx)(j.default,{data:{title:i},className:"section-title"}),l?(0,e.jsxs)(n.Tabs,{shape:p,align:"left",defaultValue:m[0],children:[(0,e.jsx)(n.TabsList,{children:m.map((t,a)=>(0,e.jsx)(n.TabsTrigger,{value:t,onClick:()=>{(0,H.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:b,component_title:i,component_position:1,navigation:t,button_name:t}})},children:t},a))}),m.map((t,a)=>(0,e.jsx)(n.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(N.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:u?.[t]||[],configuration:{shape:p,isTab:l,activeTab:t,num:u?.[t]?.length||0}},Slide:g,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:y(u?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:y(u?.[t]?.length||0)}}}),r&&r?.items.length>0?(0,e.jsx)(N.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:p,isTab:l}},Slide:g,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.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(v.Grid,{className:"w-full",children:[d.map((t,a)=>(0,e.jsx)(v.GridItem,{span:h(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(g,{data:t,configuration:{shape:p},jIndex:a,spanType:t.width})},`${t?.title||""}${a}`)),d.map((t,a)=>(0,e.jsx)(v.GridItem,{span:h("full"),className:"laptop:hidden block",children:(0,e.jsx)(g,{data:t,configuration:{shape:p},jIndex:a,spanType:"full"})},`${t?.title||""}${a}`))]}),r&&r?.items.length>0?(0,e.jsx)(N.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:p}},Slide:g,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.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});R.displayName="MultiLayoutGraphicBlock";var J=(0,E.withStyles)(R);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, 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 { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.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 MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as 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  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\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: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\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: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: { shape: shape, isTab: groupByTab, 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: 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.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.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: 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.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
-  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "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", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.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  } = 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-3',\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              <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"secondary\">\n                  {secondaryButton.text}\n                </Button>\n              </a>\n            )}\n            {primaryButton && primaryButton.text && (\n              <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"primary\">\n                  {primaryButton.text}\n                </Button>\n              </a>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={tabName!}\n                onClick={() => {\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: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                    },\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: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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: 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.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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: 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.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
 }

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts

@@ -16,11 +16,6 @@ export type Item = {
         text: string;
         link: string;
     };
-    video?: {
-        url: string;
-    };
-    youtubeId?: string;
-    isYouTube?: boolean;
 };
 export type MultiLayoutGraphicBlockProps = {
     data: {

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js

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

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/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 MultiLayoutGraphicBlockProps = {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    groupByTab?: boolean\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
+  "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}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    groupByTab?: boolean\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/ShelfDisplay/index.d.ts

@@ -29,12 +29,11 @@ type ShelfDisplayType = {
     title?: string;
     isShowTab?: boolean;
     isShowTag?: boolean;
-    isShowRecommendedCard?: boolean;
     isShowOriginalPrice?: boolean;
     direction?: 'horizontal' | 'vertical';
     align?: 'left' | 'center' | 'right';
-    productsTab?: any[];
-    productsCard?: any[];
+    productsTab?: any;
+    productsCard?: any;
     /** 卡片形状 */
     itemShape?: 'round' | 'square';
     /** 按钮形状 */
@@ -56,14 +55,12 @@ export interface ShelfDisplayProps {
         categories: any[];
         products: any[];
     };
-    recommendedData?: any[];
     /** 按钮事件*/
     event?: EventType;
     className?: string;
     key?: string;
-    target?: '_self' | '_blank';
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
     className?: string;
     data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/biz-components/ShelfDisplay/index.js

@@ -1,6 +1,6 @@
-"use strict";"use client";var re=Object.create;var B=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var le=(e,t)=>{for(var r in t)B(e,r,{get:t[r],enumerable:!0})},L=(e,t,r,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of ie(t))!oe.call(e,p)&&p!==r&&B(e,p,{get:()=>t[p],enumerable:!(m=se(t,p))||m.enumerable});return e};var h=(e,t,r)=>(r=e!=null?re(ae(e)):{},L(t||!e||!e.__esModule?B(r,"default",{value:e,enumerable:!0}):r,e)),pe=e=>L(B({},"__esModule",{value:!0}),e);var he={};le(he,{default:()=>fe});module.exports=pe(he);var n=require("react/jsx-runtime"),i=h(require("react")),S=require("../../helpers/utils.js"),$=h(require("../../components/picture.js")),A=h(require("./tabSwitch.js")),H=h(require("../../components/button.js")),F=h(require("../Title/index.js")),j=h(require("../SwiperBox/index.js")),q=require("../../shared/Styles.js"),U=require("./shelfDisplay.js"),z=require("../../hooks/useExposure.js"),D=require("../../shared/track.js"),W=require("../AiuiProvider/index.js"),G=h(require("../../components/badge.js")),J=require("../../components/heading.js"),K=require("../../components/text.js"),Q=require("../../shared/trackUrlRef.js");const E="image",V="product_shelf",ce=999999999e-2;function me(e){const t=(0,i.useRef)(null),[r,m]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{if(r)return;const p=t.current;if(!p||typeof IntersectionObserver>"u")return;const c=new IntersectionObserver(([a])=>{a.isIntersecting&&(m(!0),c.disconnect())},e);return c.observe(p),()=>c.disconnect()},[r,e]),[t,r]}const de=({data:e,configuration:t})=>{const{locale:r="us",copyWriting:m}=(0,W.useAiuiContext)(),p=(s,l,y)=>t?.event?.primaryButton?.(s,l+1,y),c=(s,l,y)=>t?.event?.secondaryButton?.(s,l+1,y),a=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},P=!a?.availableForSale&&a?.price?.amount===ce,v=t?.isShowTag,b=t?.isShowOriginalPrice,g=a?.coupons?.[0],{price:w,basePrice:N}=(0,U.formatVariantPrice)({locale:r,amount:b&&g?g.variant_price4wscode:a.price,baseAmount:b&&g?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),k=()=>{const s=e?.sku,l=e?.variants;return l?.find(_=>_?.sku===s)?.image?.url||l?.[0]?.image?.url||""},d=e?.custom_name||e?.title,x=e?.custom_description||e?.description;return(0,n.jsx)("div",{className:(0,S.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.itemShape==="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,n.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,n.jsx)("div",{className:(0,S.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,n.jsx)("a",{"aria-label":d,target:t?.target,href:(0,Q.trackUrlRef)(`${r==="us"||!r?"":`/${r}`}/products/${e?.handle}`,`${E}_${V}`),onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:(0,n.jsx)($.default,{source:k(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),v?(0,n.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,l)=>(0,n.jsx)(G.default,{children:s},l))}):null,d?(0,n.jsx)(J.Heading,{as:"h3",title:d||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:d||""}):null,x?(0,n.jsx)(K.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:x||""}):null,(0,n.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:P?(0,n.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&w||""}),(0,n.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&N||""})]})}),(0,n.jsxs)("div",{className:(0,S.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,n.jsx)(H.default,{variant:"secondary",onClick:()=>c(e,t?.index,t),className:`
+"use strict";"use client";var J=Object.create;var k=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var i in t)k(e,i,{get:t[i],enumerable:!0})},$=(e,t,i,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of X(t))!Z.call(e,n)&&n!==i&&k(e,n,{get:()=>t[n],enumerable:!(d=K(t,n))||d.enumerable});return e};var c=(e,t,i)=>(i=e!=null?J(Y(e)):{},$(t||!e||!e.__esModule?k(i,"default",{value:e,enumerable:!0}):i,e)),te=e=>$(k({},"__esModule",{value:!0}),e);var ae={};ee(ae,{default:()=>oe});module.exports=te(ae);var s=require("react/jsx-runtime"),o=c(require("react")),b=require("../../helpers/utils.js"),E=c(require("../../components/picture.js")),L=c(require("./tabSwitch.js")),C=c(require("../../components/button.js")),O=c(require("../Title/index.js")),q=c(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),R=require("./shelfDisplay.js"),I=require("react-responsive"),V=require("../../hooks/useExposure.js"),A=require("../../shared/track.js"),j=require("../AiuiProvider/index.js"),U=c(require("../../components/badge.js")),z=require("../../components/heading.js"),F=require("../../components/text.js"),W=require("../../shared/trackUrlRef.js");const _="image",P="product_shelf",se=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:i="us",copyWriting:d}=(0,j.useAiuiContext)(),n=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),T=(r,a,u)=>t?.event?.primaryButton?.(r,a+1,u),h=(r,a,u)=>t?.event?.secondaryButton?.(r,a+1,u),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},D=!l?.availableForSale&&l?.price?.amount===se,B=t?.isShowTag,g=t?.isShowOriginalPrice,p=l?.coupons?.[0],{price:y,basePrice:N}=(0,R.formatVariantPrice)({locale:i,amount:g&&p?p.variant_price4wscode:l.price,baseAmount:g&&p?l.price:0,currencyCode:e?.price?.currencyCode||"USD"}),w=()=>{const r=e?.sku,a=e?.variants;return a?.find(v=>v?.sku===r)?.image?.url||a?.[0]?.image?.url||""},m=e?.custom_name||e?.title,S=e?.custom_description||e?.description;return(0,s.jsx)("div",{className:(0,b.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.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",{"h-[360px]":n}),children:(0,s.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,s.jsx)("div",{className:(0,b.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{href:(0,W.trackUrlRef)(`${i==="us"||!i?"":`/${i}`}/products/${e?.handle}`,`${_}_${P}`),children:(0,s.jsx)(E.default,{source:w(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),B?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((r,a)=>(0,s.jsx)(U.default,{children:r},a))}):null,m?(0,s.jsx)(z.Heading,{as:"h3",title:m||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start",html:m||""}):null,S?(0,s.jsx)(F.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",html:S||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:D?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:d?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:y||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:N||""})]})}),(0,s.jsxs)("div",{className:(0,b.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(C.default,{variant:"secondary",onClick:()=>h(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,n.jsx)(H.default,{variant:"primary",onClick:()=>p(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(C.default,{variant:"primary",onClick:()=>T(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},ue=i.default.forwardRef(({data:e,buildData:t,className:r="",key:m,event:p,recommendedData:c,target:a="_self"},P)=>{const[v,b]=(0,i.useState)(""),[g,w]=(0,i.useState)([]),[N,k]=me({threshold:0}),d=(0,i.useRef)(!1),x=(0,i.useRef)(!1),s=(0,i.useRef)(null);(0,i.useImperativeHandle)(P,()=>s.current),(0,z.useExposure)(s,{componentType:E,componentName:V,componentTitle:e?.title,navigation:v});const{productsTab:l=[],productsCard:y=[],title:_,isShowTab:C=!0,tabShape:X="square",isShowTag:Y=!1,isShowOriginalPrice:Z=!0,isShowRecommendedCard:ee=!1,...te}=e,M=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:c?.map((o,R)=>{const u=o?.variants?.find(f=>f?.sku===o?.sku)||o?.variants?.[0];return{item_id:o?.sku||u?.sku,item_name:o?.name,item_variant:u?.name,price:u?.price,index:R+1}})}})},I=(o,R)=>{if(R){const T=c?.map?.(u=>({...u,isShowRecommended:!0}));w(T?.length?T||[]:[])}else if(Array.isArray(o)){const u=o?.map?.(f=>{const O=t?.products?.find(ne=>ne?.handle===f?.handle);if(O)return{sku:f.sku,isShowRecommended:!1,custom_name:f.custom_name,custom_description:f.custom_description,...O}})?.filter(f=>f);w(u?.length?u||[]:[])}else w([])};return(0,i.useEffect)(()=>{k&&c?.length&&!x.current&&(x.current=!0,M())},[k,c]),(0,i.useEffect)(()=>{if(!d.current){if(!d.current&&c?.length&&(d.current=!0),C){b(l?.[0]?.tab||""),I(l?.[0]?.data||[],l?.[0]?.isShowRecommendedTab);return}I(y,ee)}},[c]),(0,n.jsxs)("div",{ref:s,className:(0,S.cn)("shelf-display-wrap w-full",r,{"aiui-dark":e?.theme==="dark"}),children:[_&&(0,n.jsx)(F.default,{data:{title:_}}),C&&(0,n.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,n.jsx)(A.default,{value:v,tabs:l,tabShape:X,onTabClick:o=>{if(b(o?.tab),I(o?.data||[],o?.isShowRecommendedTab),!o?.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:E,component_name:V,component_title:e?.title,component_position:1,navigation:o?.tab}});return}M()}})}),(0,n.jsx)("div",{ref:N,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,n.jsx)(j.default,{className:`${C?"mt-6":""} !overflow-visible`,id:`ShelfDisplay${m}${v}`,data:{list:g,configuration:{...te,event:p,isShowTag:Y,isShowOriginalPrice:Z,target:a}},Slide:de,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 fe=(0,q.withLayout)(ue);
+            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},re=o.default.forwardRef(({data:e,buildData:t,className:i="",key:d,event:n},T)=>{const[h,l]=(0,o.useState)(""),[D,B]=(0,o.useState)([]),g=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),p=(0,o.useRef)(null);(0,o.useImperativeHandle)(T,()=>p.current),(0,V.useExposure)(p,{componentType:_,componentName:P,componentTitle:e?.title,navigation:h});const{productsTab:y=[],productsCard:N=[],title:w,isShowTab:m=!0,tabShape:S="square",isShowTag:r=!1,isShowOriginalPrice:a=!0,...u}=e,v=x=>{const Q=x?.map(f=>{const M=t?.products?.find(G=>G?.handle===f?.handle);if(M)return{sku:f.sku,custom_name:f.custom_name,custom_description:f.custom_description,...M}})?.filter(f=>f);B(Q)};return(0,o.useEffect)(()=>{if(m){l(y?.[0]?.tab||""),v(y?.[0]?.data||[]);return}v(N)},[]),(0,s.jsxs)("div",{ref:p,className:(0,b.cn)("w-full",i,{"aiui-dark":e?.theme==="dark"}),children:[w&&(0,s.jsx)(O.default,{data:{title:w}}),m&&(0,s.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,s.jsx)(L.default,{value:h,tabs:y,tabShape:S,onTabClick:x=>{l(x?.tab),v(x?.data||[]),(0,A.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:_,component_name:P,component_title:e?.title,component_position:1,navigation:x?.tab}})}})}),(0,s.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,s.jsx)(q.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${d}${h}`,data:{list:D,configuration:{...u,event:n,isShowTag:r,isShowOriginalPrice:a}},Slide:ie,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 oe=(0,H.withStyles)(re);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\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?.itemShape === '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 justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\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      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "recommendedData", "target", "tabId", "setTabId", "currentItems", "setCurrentItems", "viewRef", "isRecommend", "isView", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowRecommendedCard", "other", "gackViewEvent", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "Title", "TabSwitch", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any\n  productsCard?: any\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\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        {\n          'h-[360px]': isMobile,\n        }\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {basePrice || ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              custom_name: item.custom_name,\n              custom_description: item.custom_description,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\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?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event, isShowTag, isShowOriginalPrice } }}\n            Slide={ShelfDisplayItem}\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      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js

@@ -1,2 +1,2 @@
-"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},F=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of $(e))!y.call(r,i)&&i!==t&&o(r,i,{get:()=>e[i],enumerable:!(n=p(e,i))||n.enumerable});return r};var v=r=>F(o({},"__esModule",{value:!0}),r);var P={};D(P,{PRICE_SYMBOL:()=>c,formatPrice:()=>f,formatVariantPrice:()=>x,languageTerritory:()=>m});module.exports=v(P);const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},m=r=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl","eu-de":"de-de"})[r]||"";function f({amount:r,currencyCode:e,locale:t,maximumFractionDigits:n,minimumFractionDigits:i,removeTrailingZeros:s=!1}){let u=new Intl.NumberFormat(m(t),{style:"currency",currency:e||"USD",minimumFractionDigits:n===0?0:i,maximumFractionDigits:n}).format(r);return["eu-de","eu-en","de","eu"].includes(t)&&(u=u?.toString()?.replace(/[\s]/g,"")),s&&(u=u.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),u}function x({amount:r,baseAmount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}){if(typeof Intl>"u")return{price:`${c[n]}${r}`,basePrice:`${c[n]}${e}`,discount:`${c[n]}${e-r||0}`};const u=e>r,d=new Intl.NumberFormat(m(n),{style:"percent"}),g=u?d.format((e-r)/e):null,l=f({amount:r,currencyCode:t,locale:n,removeTrailingZeros:a}),b=u?f({amount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}):void 0;return{price:l,basePrice:b,discount:g}}
+"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},F=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of $(e))!y.call(r,i)&&i!==t&&o(r,i,{get:()=>e[i],enumerable:!(n=p(e,i))||n.enumerable});return r};var v=r=>F(o({},"__esModule",{value:!0}),r);var P={};D(P,{PRICE_SYMBOL:()=>c,formatPrice:()=>f,formatVariantPrice:()=>x,languageTerritory:()=>m});module.exports=v(P);const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},m=r=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl"})[r]||"";function f({amount:r,currencyCode:e,locale:t,maximumFractionDigits:n,minimumFractionDigits:i,removeTrailingZeros:s=!1}){let u=new Intl.NumberFormat(m(t),{style:"currency",currency:e||"USD",minimumFractionDigits:n===0?0:i,maximumFractionDigits:n}).format(r);return["eu-de","eu-en","de","eu"].includes(t)&&(u=u?.toString()?.replace(/[\s]/g,"")),s&&(u=u.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),u}function x({amount:r,baseAmount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}){if(typeof Intl>"u")return{price:`${c[n]}${r}`,basePrice:`${c[n]}${e}`,discount:`${c[n]}${e-r||0}`};const u=e>r,g=new Intl.NumberFormat(m(n),{style:"percent"}),d=u?g.format((e-r)/e):null,l=f({amount:r,currencyCode:t,locale:n,removeTrailingZeros:a}),b=u?f({amount:e,currencyCode:t,locale:n,maximumFractionDigits:i,minimumFractionDigits:s,removeTrailingZeros:a}):void 0;return{price:l,basePrice:b,discount:d}}
 //# sourceMappingURL=shelfDisplay.js.map