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

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

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

Files changed (35) hide show

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.tsx"],
-  "sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n  forwardRef,\n} from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n  activeValue: string | undefined\n  setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n  const context = useContext(BenefitsTabsContext)\n  if (!context) {\n    throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n  }\n  return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n  children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  className,\n  ...props\n}: BenefitsTabsProps) => {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n\n  const activeValue = value ?? internalValue\n  const setActiveValue = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n      <div\n        id=\"ipc-product-detail-benefits-tabs\"\n        className={cn('overflow-hidden rounded-xl  bg-[#EAEAEC] pt-[10px]', className)}\n        {...props}\n      >\n        <Root value={activeValue} onValueChange={setActiveValue}>\n          {children}\n        </Root>\n      </div>\n    </BenefitsTabsContext.Provider>\n  )\n}\n\n// List component for triggers\ninterface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsList = forwardRef<HTMLDivElement, BenefitsTabsListProps>(({ children, className, ...props }, ref) => {\n  return (\n    <List\n      className={cn('relative flex space-x-6 overflow-x-auto border-b border-[#E4E5E6] px-4', className)}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List>\n  )\n})\n\n// Trigger component\ninterface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsTrigger = ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => {\n  const { activeValue } = useBenefitsTabsContext()\n  const isActive = activeValue === value\n\n  return (\n    <Trigger\n      value={value}\n      className={cn(\n        'lg-desktop:text-base lg-desktop:pb-4 relative whitespace-nowrap pb-[10px] text-sm font-bold leading-[1.4] text-[#6D6D6F]',\n        className\n      )}\n      {...props}\n    >\n      <Text\n        className={cn(\n          'bg-info-primary absolute bottom-0 left-0 z-10 h-[2px] w-0 transition-all duration-300',\n          isActive && 'w-full'\n        )}\n      />\n      {children}\n    </Trigger>\n  )\n}\n\n// Badge component for trigger\ninterface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsBadge = ({ children, className, ...props }: BenefitsTabsBadgeProps) => {\n  return (\n    <Text\n      size={1}\n      className={cn('bg-brand ml-1 !whitespace-nowrap rounded-full px-2 py-1 font-bold text-white', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// Content component\ninterface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsContent = ({ value, children, className, ...props }: BenefitsTabsContentProps) => {\n  return (\n    <Content value={value} className={cn(className)} {...props}>\n      {children}\n    </Content>\n  )\n}\n\nProductBenefitsTabs.displayName = 'ProductBenefitsTabs'\n\n// Attach sub-components to main component\nProductBenefitsTabs.List = BenefitsTabsList\nProductBenefitsTabs.Trigger = BenefitsTabsTrigger\nProductBenefitsTabs.Badge = BenefitsTabsBadge\nProductBenefitsTabs.Content = BenefitsTabsContent\n\nexport default ProductBenefitsTabs\n"],
-  "mappings": "AA+DQ,cAAAA,EAwCJ,QAAAC,MAxCI,oBA/DR,OAAS,QAAAC,MAAY,wCACrB,OACE,iBAAAC,EACA,cAAAC,EACA,YAAAC,EAKA,cAAAC,MACK,QACP,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAQ7C,MAAMC,EAAsBT,EAAmD,MAAS,EAElFU,EAAyB,IAAM,CACnC,MAAMC,EAAUV,EAAWQ,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,EAAIlB,EAASW,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,OACE1B,EAACY,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,SAAAzB,EAAC,OACC,GAAG,mCACH,UAAWO,EAAG,qDAAsDa,CAAS,EAC5E,GAAGC,EAEJ,SAAArB,EAACU,EAAA,CAAK,MAAOc,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,EAAmBrB,EAAkD,CAAC,CAAE,SAAAa,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGO,IAE3G5B,EAACS,EAAA,CACC,UAAWF,EAAG,yEAA0Ea,CAAS,EACjG,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,IAAKQ,EACJ,GAAGP,EAEH,SAAAF,EACH,CAEH,EAQKU,EAAsB,CAAC,CAAE,MAAAZ,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCiB,EAAWN,IAAgBP,EAEjC,OACEhB,EAACU,EAAA,CACC,MAAOM,EACP,UAAWV,EACT,2HACAa,CACF,EACC,GAAGC,EAEJ,UAAArB,EAACE,EAAA,CACC,UAAWK,EACT,wFACAuB,GAAY,QACd,EACF,EACCX,GACH,CAEJ,EAOMY,EAAoB,CAAC,CAAE,SAAAZ,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEvDrB,EAACE,EAAA,CACC,KAAM,EACN,UAAWK,EAAG,+EAAgFa,CAAS,EACtG,GAAGC,EAEH,SAAAF,EACH,EAUEa,EAAsB,CAAC,CAAE,MAAAf,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEhErB,EAACQ,EAAA,CAAQ,MAAOS,EAAO,UAAWV,EAAGa,CAAS,EAAI,GAAGC,EAClD,SAAAF,EACH,EAIJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUc,EAC9Bd,EAAoB,MAAQgB,EAC5BhB,EAAoB,QAAUiB,EAE9B,IAAOC,EAAQlB",
-  "names": ["jsx", "jsxs", "Text", "createContext", "useContext", "useState", "forwardRef", "cn", "Content", "List", "Root", "Trigger", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "ref", "BenefitsTabsTrigger", "isActive", "BenefitsTabsBadge", "BenefitsTabsContent", "ProductBenefitsTabs_default"]
+  "sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n  forwardRef,\n} from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n  activeValue: string | undefined\n  setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n  const context = useContext(BenefitsTabsContext)\n  if (!context) {\n    throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n  }\n  return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n  children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  className,\n  ...props\n}: BenefitsTabsProps) => {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n\n  const activeValue = value ?? internalValue\n  const setActiveValue = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n      <div\n        id=\"ipc-product-detail-benefits-tabs\"\n        className={cn('overflow-hidden rounded-xl  bg-[#EAEAEC] pt-[10px]', className)}\n        {...props}\n      >\n        <Root value={activeValue} onValueChange={setActiveValue}>\n          {children}\n        </Root>\n      </div>\n    </BenefitsTabsContext.Provider>\n  )\n}\n\n// List component for triggers\ninterface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsList = forwardRef<HTMLDivElement, BenefitsTabsListProps>(({ children, className, ...props }, ref) => {\n  return (\n    <List\n      className={cn('relative flex space-x-6 overflow-x-auto border-b border-[#E4E5E6] px-4', className)}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List>\n  )\n})\n\n// Trigger component\ninterface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsTrigger = ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => {\n  const { activeValue } = useBenefitsTabsContext()\n  const isActive = activeValue === value\n\n  return (\n    <Trigger\n      value={value}\n      className={cn(\n        'lg-desktop:text-base lg-desktop:pb-4 relative whitespace-nowrap pb-[10px] text-sm font-bold leading-[1.4] text-[#6D6D6F]',\n        className\n      )}\n      {...props}\n    >\n      <Text\n        className={cn(\n          'bg-info-primary absolute bottom-0 left-0 z-10 h-[2px] w-0 transition-all duration-300',\n          isActive && 'w-full'\n        )}\n      />\n      {children}\n    </Trigger>\n  )\n}\n\n// Badge component for trigger\ninterface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsBadge = ({ children, className, ...props }: BenefitsTabsBadgeProps) => {\n  return (\n    <Text\n      size={1}\n      className={cn('bg-brand ml-1 !whitespace-nowrap rounded-full px-2 py-1 font-bold text-white', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// Content component\ninterface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string\n  forceMount?: boolean\n  children: ReactNode\n}\n\nconst BenefitsTabsContent = ({\n  value,\n  forceMount = false,\n  children,\n  className,\n  ...props\n}: BenefitsTabsContentProps) => {\n  return (\n    <Content value={value} forceMount={forceMount ? true : undefined} className={cn(className)} {...props}>\n      {children}\n    </Content>\n  )\n}\n\nProductBenefitsTabs.displayName = 'ProductBenefitsTabs'\n\n// Attach sub-components to main component\nProductBenefitsTabs.List = BenefitsTabsList\nProductBenefitsTabs.Trigger = BenefitsTabsTrigger\nProductBenefitsTabs.Badge = BenefitsTabsBadge\nProductBenefitsTabs.Content = BenefitsTabsContent\n\nexport default ProductBenefitsTabs\n"],
+  "mappings": "AA+DQ,cAAAA,EAwCJ,QAAAC,MAxCI,oBA/DR,OAAS,QAAAC,MAAY,wCACrB,OACE,iBAAAC,EACA,cAAAC,EACA,YAAAC,EAKA,cAAAC,MACK,QACP,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAQ7C,MAAMC,EAAsBT,EAAmD,MAAS,EAElFU,EAAyB,IAAM,CACnC,MAAMC,EAAUV,EAAWQ,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,EAAIlB,EAASW,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,OACE1B,EAACY,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,SAAAzB,EAAC,OACC,GAAG,mCACH,UAAWO,EAAG,qDAAsDa,CAAS,EAC5E,GAAGC,EAEJ,SAAArB,EAACU,EAAA,CAAK,MAAOc,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,EAAmBrB,EAAkD,CAAC,CAAE,SAAAa,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGO,IAE3G5B,EAACS,EAAA,CACC,UAAWF,EAAG,yEAA0Ea,CAAS,EACjG,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,IAAKQ,EACJ,GAAGP,EAEH,SAAAF,EACH,CAEH,EAQKU,EAAsB,CAAC,CAAE,MAAAZ,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCiB,EAAWN,IAAgBP,EAEjC,OACEhB,EAACU,EAAA,CACC,MAAOM,EACP,UAAWV,EACT,2HACAa,CACF,EACC,GAAGC,EAEJ,UAAArB,EAACE,EAAA,CACC,UAAWK,EACT,wFACAuB,GAAY,QACd,EACF,EACCX,GACH,CAEJ,EAOMY,EAAoB,CAAC,CAAE,SAAAZ,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEvDrB,EAACE,EAAA,CACC,KAAM,EACN,UAAWK,EAAG,+EAAgFa,CAAS,EACtG,GAAGC,EAEH,SAAAF,EACH,EAWEa,EAAsB,CAAC,CAC3B,MAAAf,EACA,WAAAgB,EAAa,GACb,SAAAd,EACA,UAAAC,EACA,GAAGC,CACL,IAEIrB,EAACQ,EAAA,CAAQ,MAAOS,EAAO,WAAYgB,EAAa,GAAO,OAAW,UAAW1B,EAAGa,CAAS,EAAI,GAAGC,EAC7F,SAAAF,EACH,EAIJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUc,EAC9Bd,EAAoB,MAAQgB,EAC5BhB,EAAoB,QAAUiB,EAE9B,IAAOE,EAAQnB",
+  "names": ["jsx", "jsxs", "Text", "createContext", "useContext", "useState", "forwardRef", "cn", "Content", "List", "Root", "Trigger", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "ref", "BenefitsTabsTrigger", "isActive", "BenefitsTabsBadge", "BenefitsTabsContent", "forceMount", "ProductBenefitsTabs_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as xe,jsx as e,jsxs as f}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as q,Picture as F,Badge as ae}from"../../../../../components/index.js";import{useCallback as w,useMemo as j,useState as k,forwardRef as J,useRef as A,useEffect as B,useImperativeHandle as oe}from"react";import{Swiper as $,SwiperSlide as M}from"swiper/react";import{Navigation as H,Mousewheel as Q,Thumbs as W,Pagination as X,Autoplay as ie}from"swiper/modules";import{cn as N}from"../../../../../helpers/index.js";import{GalleryTabType as P}from"./types.js";import{Content as re,List as se,Root as ne,Trigger as ce}from"@radix-ui/react-tabs";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useVariantMedia as de}from"../../../hooks/use-variant-media.js";import{SpecsModal as ue}from"./components/SpecsModal.js";import pe from"./components/CompareModal.js";import{formatPrice as me}from"../../../utils/index.js";import{withLayout as be}from"../../../../../shared/Styles.js";import{gaTrack as ge}from"../../../../../shared/track.js";import{ExposureDetector as fe}from"../../../../../components/index.js";const ee=t=>f("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),te=t=>f("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ve=()=>{const{copyWriting:t}=Z(),{product:r,variant:p,selectedOptions:G}=Y(),m=de({product:r,variant:p}),[d,h]=k(null),L=A(null),b=p?.metafields?.component?.custom_media_list;let a,v,_,S;b&&b?.available?(a=b?.product||[],v=b?.scenarios||[],_=b?.keyFeatures||[],S=b?.video||[]):(a=m?.productList,v=m?.sceneList,_=m?.keyFeaturesList,S=m?.videoList);const n=j(()=>[...a,...v,...S],[a,v,S]),u={productList:a,sceneList:v,keyFeaturesList:_,videoList:S},l=j(()=>{const i=r?.payload?.components?.find(y=>y.componentKey==="ProductGallery")?.data||[],T=p?.payload?.components?.find(y=>y.componentKey==="ProductGallery")?.data||[];return i?.map(y=>{const z=T?.find(D=>y?.galleries===D?.galleries);let K=u[y?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(s=>{const E=[];if(s.image_1920&&s.image_1920.trim()&&E.push(`${s.image_1920} 1920`),s.image_1440&&s.image_1440.trim()&&E.push(`${s.image_1440} 1440`),s.image_1024&&s.image_1024.trim()&&E.push(`${s.image_1024} 1024`),s.image_768&&s.image_768.trim()&&E.push(`${s.image_768} 767`),s.image_390&&s.image_390.trim()&&E.push(`${s.image_390} 390`),E.length>0){const U=E.join(", ");return{image:{url:U,altText:y.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(s=>s!==null);D.length>0&&(K=D)}return{...y,galleries:K}}).filter(y=>y.galleries.length>0)},[p?.payload,u,r?.payload]),[g,o]=k(l?.[0]),[c,C]=k(0),[I,x]=k(null),R=w(()=>{const i=(c+1)%l.length;C(i),o(l[i]),x(0)},[c,l]),V=w(()=>{const i=c===0?l.length-1:c-1;C(i),o(l[i]);const T=l[i]?.galleries||[];x(T.length-1)},[c,l]);B(()=>{c!=null&&requestAnimationFrame(()=>{L.current?.scrollToTab(c)})},[c]),B(()=>{o(l[0]),C(0)},[p?.id]);const le=(i,T)=>{switch(i?.galleryTabType){case P.GALLERY_IMAGE_MAIN:return e(O,{...i,index:T,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});case P.GALLERY_IMAGE_FEATURES:return e(O,{...i,index:T,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});case P.GALLERY_IMAGE_SCENE:return e(O,{...i,index:T,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});case P.GALLERY_VIDEO:return e(he,{...i,onNextTab:R,onPrevTab:V,targetSlideIndex:I,onSlideChange:()=>x(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:f(ne,{className:"relative",value:g?.tabValue,defaultValue:l?.[0]?.tabValue,children:[e("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:l.map((i,T)=>e(re,{className:"h-full",value:i.tabValue,children:le(i,T)},i.tabValue))}),e(ye,{ref:L,galleryTabs:l,activeGalleryTab:g,setActiveGalleryTab:o,setActiveTabIndex:C,setTargetSlideIndex:x})]})})},ye=J((t,r)=>{const{galleryTabs:p,activeGalleryTab:G,setActiveGalleryTab:m,setActiveTabIndex:d,setTargetSlideIndex:h}=t,{product:L}=Y(),b=A(null),a=A(new Map),v=w(n=>{if(b.current){const u=b.current,l=n.currentTarget,g=l.offsetLeft-u.offsetWidth/2+l.offsetWidth/2;u.scrollTo({left:g,behavior:"smooth"})}},[]),_=w((n,u,l)=>{m(u),d(l),h(0),v(n)},[m,d,h,v]),S=w(n=>{if(b.current&&p[n]){const u=b.current,l=p[n],g=a.current.get(l.tabValue);if(g){const o=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:o,behavior:"smooth"})}}},[p]);return oe(r,()=>({scrollToTab:S})),f("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[e(se,{ref:b,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:p?.map((n,u)=>e(ce,{ref:l=>{l?a.current.set(n.tabValue,l):a.current.delete(n.tabValue)},className:N("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===G?.tabValue&&"bg-white"),onClick:l=>_(l,n,u),value:n.tabValue,children:n.tabLabel},n.tabValue+u))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:L.metafields?.global?.specifications&&f(xe,{children:[e(ue,{})," | ",e(pe,{})]})})]})}),O=J((t,r)=>{const{locale:p="us",copyWriting:G}=Z(),{variant:m,totalSavings:d}=Y(),h=A(null),[L,b]=k(null),[a,v]=k(null),_=A(null),[S,n]=k(!1),u=j(()=>{if(t?.galleryTabType===P.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===P.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,P.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),l=w(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),g=w(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return B(()=>{a&&t.targetSlideIndex&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),f("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e($,{ref:r,className:"h-full",onSwiper:v,onTouchEnd:(o,c)=>{o.isBeginning&&o.swipeDirection==="prev"?l():o.isEnd&&o.swipeDirection==="next"&&g()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:L},modules:[Q,W,H,X],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((o,c)=>{const C=`${t.tabValue}-${c}`,I=()=>{ge({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},x=o?._responsiveSource||o?.image?.url||"";return e(M,{className:"h-full",children:e(fe,{onExposure:I,exposureKey:C,threshold:.5,duration:2e3,className:"h-full",children:e(F,{source:x,alt:o?.image?.altText,className:N("h-full",u),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),m.availableForSale&&!!d&&!t.index&&e(ae,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${me({amount:d,currencyCode:m?.price?.currencyCode,locale:p})} ${G?.off}`}),e("div",{className:N("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:l,children:e(ee,{className:N("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:N("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:g,children:e(te,{className:N("tablet:size-10 lg-desktop:size-12")})}),f("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[e("div",{className:"tablet:block hidden",children:e($,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[H,W],children:t?.galleries?.map((o,c)=>e(M,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(F,{source:o.image?.url,alt:o.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&f("div",{className:"flex items-center gap-2",children:[e(F,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),e("div",{className:"relative  max-w-[528px] overflow-hidden",children:f($,{modules:[ie],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:[e(M,{children:e(q,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})}),e(M,{children:e(q,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})]})})]})]}),e("div",{ref:h,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),he=t=>{const[r,p]=k(null),G=w(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),m=w(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return B(()=>{r&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),f("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e($,{className:"h-full",onSwiper:p,onTouchEnd:(d,h)=>{d.isBeginning&&d.swipeDirection==="prev"?G():d.isEnd&&d.swipeDirection==="next"&&m()},modules:[Q,W,H,X],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((d,h)=>e(M,{className:"h-full",children:f("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:d?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:d?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:d?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:N("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:G,children:e(ee,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:N("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:e(te,{className:"tablet:size-10 lg-desktop:size-12"})})]})},De=t=>e("div",{children:"3D View"});var Be=be(ve);export{Be as default};
+import{Fragment as Te,jsx as e,jsxs as y}from"react/jsx-runtime";import{useAiuiContext as Z}from"../../../../AiuiProvider/index.js";import{Text as ae,Picture as F,Badge as le}from"../../../../../components/index.js";import{useCallback as w,useMemo as j,useState as k,forwardRef as q,useRef as A,useEffect as D,useImperativeHandle as ie}from"react";import{Swiper as B,SwiperSlide as $}from"swiper/react";import{Navigation as H,Mousewheel as J,Thumbs as W,Pagination as Q,Autoplay as oe}from"swiper/modules";import{cn as G}from"../../../../../helpers/index.js";import{GalleryTabType as P}from"./types.js";import{Content as re,List as se,Root as ne,Trigger as ce}from"@radix-ui/react-tabs";import{useBizProductContext as Y}from"../../../BizProductProvider.js";import{useVariantMedia as de}from"../../../hooks/use-variant-media.js";import{SpecsModal as ue}from"./components/SpecsModal.js";import pe from"./components/CompareModal.js";import{formatPrice as me}from"../../../utils/index.js";import{withLayout as be}from"../../../../../shared/Styles.js";import{gaTrack as ge}from"../../../../../shared/track.js";import{ExposureDetector as fe}from"../../../../../components/index.js";const X=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),ee=t=>y("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ve=()=>{const{copyWriting:t}=Z(),{product:r,variant:p,selectedOptions:N}=Y(),m=de({product:r,variant:p}),[d,h]=k(null),L=A(null),b=p?.metafields?.component?.custom_media_list;let l,f,_,S;b&&b?.available?(l=b?.product||[],f=b?.scenarios||[],_=b?.keyFeatures||[],S=b?.video||[]):(l=m?.productList,f=m?.sceneList,_=m?.keyFeaturesList,S=m?.videoList);const n=j(()=>[...l,...f,...S],[l,f,S]),u={productList:l,sceneList:f,keyFeaturesList:_,videoList:S},a=j(()=>{const o=r?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[],x=p?.payload?.components?.find(v=>v.componentKey==="ProductGallery")?.data||[];return o?.map(v=>{const V=x?.find(z=>v?.galleries===z?.galleries);let K=u[v?.galleries]||[];if(V?.images&&Array.isArray(V.images)&&V.images.length>0){const z=V.images.map(s=>{const E=[];if(s.image_1920&&s.image_1920.trim()&&E.push(`${s.image_1920} 1920`),s.image_1440&&s.image_1440.trim()&&E.push(`${s.image_1440} 1440`),s.image_1024&&s.image_1024.trim()&&E.push(`${s.image_1024} 1024`),s.image_768&&s.image_768.trim()&&E.push(`${s.image_768} 767`),s.image_390&&s.image_390.trim()&&E.push(`${s.image_390} 390`),E.length>0){const U=E.join(", ");return{image:{url:U,altText:v.comment?.content||""},_fromImages:!0,_responsiveSource:U}}return null}).filter(s=>s!==null);z.length>0&&(K=z)}return{...v,galleries:K}}).filter(v=>v.galleries.length>0)},[p?.payload,u,r?.payload]),[g,i]=k(a?.[0]),[c,C]=k(0),[I,T]=k(null),M=w(()=>{const o=(c+1)%a.length;C(o),i(a[o]),T(0)},[c,a]),R=w(()=>{const o=c===0?a.length-1:c-1;C(o),i(a[o]);const x=a[o]?.galleries||[];T(x.length-1)},[c,a]);D(()=>{c!=null&&requestAnimationFrame(()=>{L.current?.scrollToTab(c)})},[c]),D(()=>{i(a[0]),C(0)},[p?.id]);const te=(o,x)=>{switch(o?.galleryTabType){case P.GALLERY_IMAGE_MAIN:return e(O,{...o,index:x,onNextTab:M,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});case P.GALLERY_IMAGE_FEATURES:return e(O,{...o,index:x,onNextTab:M,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});case P.GALLERY_IMAGE_SCENE:return e(O,{...o,index:x,onNextTab:M,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});case P.GALLERY_VIDEO:return e(he,{...o,onNextTab:M,onPrevTab:R,targetSlideIndex:I,onSlideChange:()=>T(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:y(ne,{className:"relative",value:g?.tabValue,defaultValue:a?.[0]?.tabValue,children:[e("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:a.map((o,x)=>e(re,{className:"h-full",value:o.tabValue,children:te(o,x)},o.tabValue))}),e(ye,{ref:L,galleryTabs:a,activeGalleryTab:g,setActiveGalleryTab:i,setActiveTabIndex:C,setTargetSlideIndex:T})]})})},ye=q((t,r)=>{const{galleryTabs:p,activeGalleryTab:N,setActiveGalleryTab:m,setActiveTabIndex:d,setTargetSlideIndex:h}=t,{product:L}=Y(),b=A(null),l=A(new Map),f=w(n=>{if(b.current){const u=b.current,a=n.currentTarget,g=a.offsetLeft-u.offsetWidth/2+a.offsetWidth/2;u.scrollTo({left:g,behavior:"smooth"})}},[]),_=w((n,u,a)=>{m(u),d(a),h(0),f(n)},[m,d,h,f]),S=w(n=>{if(b.current&&p[n]){const u=b.current,a=p[n],g=l.current.get(a.tabValue);if(g){const i=g.offsetLeft-u.offsetWidth/2+g.offsetWidth/2;u.scrollTo({left:i,behavior:"smooth"})}}},[p]);return ie(r,()=>({scrollToTab:S})),y("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[e(se,{ref:b,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:p?.map((n,u)=>e(ce,{ref:a=>{a?l.current.set(n.tabValue,a):l.current.delete(n.tabValue)},className:G("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",n.tabValue===N?.tabValue&&"bg-white"),onClick:a=>_(a,n,u),value:n.tabValue,children:n.tabLabel},n.tabValue+u))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:L.metafields?.global?.specifications&&y(Te,{children:[e(ue,{})," | ",e(pe,{})]})})]})}),O=q((t,r)=>{const{locale:p="us",copyWriting:N}=Z(),{variant:m,totalSavings:d}=Y(),h=A(null),[L,b]=k(null),[l,f]=k(null),_=A(null),[S,n]=k(!1),u=j(()=>{if(t?.galleryTabType===P.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===P.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,P.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),a=w(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),g=w(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return D(()=>{l&&t.targetSlideIndex&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{ref:r,className:"h-full",onSwiper:f,onTouchEnd:(i,c)=>{i.isBeginning&&i.swipeDirection==="prev"?a():i.isEnd&&i.swipeDirection==="next"&&g()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:L},modules:[J,W,H,Q],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,c)=>{const C=`${t.tabValue}-${c}`,I=()=>{ge({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${m.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:c+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},T=i?._responsiveSource||i?.image?.url||"";return e($,{className:"h-full",children:e(fe,{onExposure:I,exposureKey:C,threshold:.5,duration:2e3,className:"h-full",children:e(F,{source:T,alt:i?.image?.altText,className:G("h-full",u),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+c)})}),m.availableForSale&&!!d&&!t.index&&e(le,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${me({amount:d,currencyCode:m?.price?.currencyCode,locale:p})} ${N?.off}`}),e("div",{className:G("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:a,children:e(X,{className:G("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:G("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:g,children:e(ee,{className:G("tablet:size-10 lg-desktop:size-12")})}),y("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[e("div",{className:"tablet:block hidden",children:e(B,{className:"flex items-center justify-between",onSwiper:b,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[H,W],children:t?.galleries?.map((i,c)=>e($,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(F,{source:i.image?.url,alt:i.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+c))})}),!t?.index&&y("div",{className:"flex items-center gap-2",children:[e(F,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),e("div",{className:"relative  max-w-[528px] overflow-hidden",children:e(B,{modules:[oe],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:e($,{children:e(ae,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})})})]})]}),e("div",{ref:h,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),he=t=>{const[r,p]=k(null),N=w(()=>{r?.isBeginning?t.onPrevTab?.():r?.slidePrev()},[r,t]),m=w(()=>{r?.isEnd?t.onNextTab?.():r?.slideNext()},[r,t]);return D(()=>{r&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(r.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[r,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{className:"h-full",onSwiper:p,onTouchEnd:(d,h)=>{d.isBeginning&&d.swipeDirection==="prev"?N():d.isEnd&&d.swipeDirection==="next"&&m()},modules:[J,W,H,Q],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((d,h)=>e($,{className:"h-full",children:y("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:d?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:d?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:d?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:G("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:N,children:e(X,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:G("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:m,children:e(ee,{className:"tablet:size-10 lg-desktop:size-12"})})]})},De=t=>e("div",{children:"3D View"});var Be=be(ve);export{Be as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 767`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  // useEffect(() => {\n  //   if (commentRef.current) {\n  //     const container = commentRef.current\n  //     const contentHeight = container.scrollHeight\n  //     const containerHeight = container.clientHeight\n  //     const needsScroll = contentHeight > containerHeight\n  //     setShouldScroll(needsScroll)\n  //   }\n  // }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative  max-w-[528px] overflow-hidden\">\n              <Swiper\n                modules={[Autoplay]}\n                loop\n                className=\"lg-desktop:h-11 h-10\"\n                direction=\"vertical\"\n                autoplay={{ delay: 2000, disableOnInteraction: false }}\n              >\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n              </Swiper>\n              {/* <div\n                ref={commentRef}\n                className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                />\n              </div> */}\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
-  "mappings": "AAkCI,OAqVM,YAAAA,GApVJ,OAAAC,EADF,QAAAC,MAAA,oBAlCJ,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,QAAAC,EAAM,WAAAC,EAAiB,SAAAC,OAAa,qCAC7C,OACE,eAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,UAAAC,EAEA,aAAAC,EAGA,uBAAAC,OACK,QACP,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,cAAAC,EAAY,cAAAC,EAAY,UAAAC,EAAQ,cAAAC,EAAY,YAAAC,OAAgB,iBACrE,OAAS,MAAAC,MAAU,kCACnB,OAAS,kBAAAC,MAAsB,aAC/B,OAAS,WAAAC,GAAS,QAAAC,GAAM,QAAAC,GAAM,WAAAC,OAAe,uBAC7C,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,mBAAAC,OAAuB,sCAChC,OAAS,cAAAC,OAAkB,6BAC3B,OAAOC,OAAkB,+BACzB,OAAS,eAAAC,OAAmB,0BAC5B,OAAS,cAAAC,OAAkB,kCAC3B,OAAS,WAAAC,OAAe,iCACxB,OAAS,oBAAAC,OAAwB,qCAMjC,MAAMC,GAAwBC,GAE1BlC,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGkC,EACjG,UAAAnC,EAAC,QAAK,EAAE,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,qBAAqB,KAAK,QAAQ,EAC/FA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIEoC,GAAyBD,GAE3BlC,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAA8B,GAAGkC,EACjG,UAAAnC,EAAC,QAAK,MAAM,KAAK,OAAO,KAAK,GAAG,KAAK,UAAU,8CAA8C,KAAK,QAAQ,EAC1GA,EAAC,QACC,EAAE,4TACF,KAAK,eACP,GACF,EAIEqC,GAAiB,IAAM,CAC3B,KAAM,CAAE,YAAAC,CAAY,EAAIpC,EAAe,EACjC,CAAE,QAAAqC,EAAS,QAAAC,EAAS,gBAAAC,CAAgB,EAAIf,EAAqB,EAC7DgB,EAAmBf,GAAgB,CAAE,QAAAY,EAAS,QAAAC,CAAQ,CAAC,EACvD,CAACG,EAAQC,CAAS,EAAIpC,EAA4B,IAAI,EACtDqC,EAAuBnC,EAA6B,IAAI,EAExDoC,EAAkBN,GAAS,YAAY,WAAW,kBACxD,IAAIO,EAA2BC,EAAyBC,EAA+BC,EAEnFJ,GAAmBA,GAAiB,WACtCC,EAAcD,GAAiB,SAAW,CAAC,EAC3CE,EAAYF,GAAiB,WAAa,CAAC,EAC3CG,EAAkBH,GAAiB,aAAe,CAAC,EACnDI,EAAYJ,GAAiB,OAAS,CAAC,IAEvCC,EAAcL,GAAkB,YAChCM,EAAYN,GAAkB,UAC9BO,EAAkBP,GAAkB,gBACpCQ,EAAYR,GAAkB,WAGhC,MAAMS,EAAW5C,EAAQ,IAAM,CAAC,GAAGwC,EAAa,GAAGC,EAAW,GAAGE,CAAS,EAAG,CAACH,EAAaC,EAAWE,CAAS,CAAC,EAE1GE,EAA0D,CAC9D,YAAaL,EACb,UAAWC,EACX,gBAAiBC,EACjB,UAAWC,CACb,EAEMG,EAAc9C,EAAQ,IAAM,CAChC,MAAM+C,EACJf,GAAS,SAAS,YAAY,KAAMgB,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAChGC,EACJhB,GAAS,SAAS,YAAY,KAAMe,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAEtG,OAAOD,GACH,IAAKC,GAAc,CAEnB,MAAME,EAA4BD,GAAuB,KACtDE,GAAqBH,GAAM,YAAcG,GAAa,SACzD,EACA,IAAIC,EAAYP,EAAWG,GAAM,SAAS,GAAK,CAAC,EAEhD,GACEE,GAA2B,QAC3B,MAAM,QAAQA,EAA0B,MAAM,GAC9CA,EAA0B,OAAO,OAAS,EAC1C,CAEA,MAAMG,EAAiBH,EAA0B,OAC9C,IAAKI,GAAmB,CAEvB,MAAMC,EAA6B,CAAC,EAkBpC,GAjBID,EAAU,YAAcA,EAAU,WAAW,KAAK,GACpDC,EAAiB,KAAK,GAAGD,EAAU,UAAU,OAAO,EAElDA,EAAU,YAAcA,EAAU,WAAW,KAAK,GACpDC,EAAiB,KAAK,GAAGD,EAAU,UAAU,OAAO,EAElDA,EAAU,YAAcA,EAAU,WAAW,KAAK,GACpDC,EAAiB,KAAK,GAAGD,EAAU,UAAU,OAAO,EAElDA,EAAU,WAAaA,EAAU,UAAU,KAAK,GAClDC,EAAiB,KAAK,GAAGD,EAAU,SAAS,MAAM,EAEhDA,EAAU,WAAaA,EAAU,UAAU,KAAK,GAClDC,EAAiB,KAAK,GAAGD,EAAU,SAAS,MAAM,EAIhDC,EAAiB,OAAS,EAAG,CAC/B,MAAMC,EAAmBD,EAAiB,KAAK,IAAI,EACnD,MAAO,CACL,MAAO,CACL,IAAKC,EACL,QAASR,EAAK,SAAS,SAAW,EACpC,EAEA,YAAa,GACb,kBAAmBQ,CACrB,CACF,CACA,OAAO,IACT,CAAC,EACA,OAAQC,GAAiBA,IAAY,IAAI,EAGxCJ,EAAe,OAAS,IAC1BD,EAAYC,EAGhB,CAEA,MAAO,CACL,GAAGL,EACH,UAAAI,CACF,CACF,CAAC,EACA,OAAQJ,GAAcA,EAAK,UAAU,OAAS,CAAC,CACpD,EAAG,CAACf,GAAS,QAASY,EAAYb,GAAS,OAAO,CAAC,EAE7C,CAAC0B,EAAkBC,CAAmB,EAAI1D,EAA8B6C,IAAc,CAAC,CAAC,EACxF,CAACc,EAAgBC,CAAiB,EAAI5D,EAAS,CAAC,EAChD,CAAC6D,EAAkBC,CAAmB,EAAI9D,EAAwB,IAAI,EAGtE+D,EAAgBjE,EAAY,IAAM,CACtC,MAAMkE,GAAaL,EAAiB,GAAKd,EAAY,OACrDe,EAAkBI,CAAS,EAC3BN,EAAoBb,EAAYmB,CAAS,CAAC,EAC1CF,EAAoB,CAAC,CACvB,EAAG,CAACH,EAAgBd,CAAW,CAAC,EAG1BoB,EAAgBnE,EAAY,IAAM,CACtC,MAAMoE,EAAYP,IAAmB,EAAId,EAAY,OAAS,EAAIc,EAAiB,EACnFC,EAAkBM,CAAS,EAC3BR,EAAoBb,EAAYqB,CAAS,CAAC,EAE1C,MAAMC,EAAmBtB,EAAYqB,CAAS,GAAG,WAAa,CAAC,EAC/DJ,EAAoBK,EAAiB,OAAS,CAAC,CACjD,EAAG,CAACR,EAAgBd,CAAW,CAAC,EAGhC1C,EAAU,IAAM,CACVwD,GAAmB,MAErB,sBAAsB,IAAM,CAC1BtB,EAAqB,SAAS,YAAYsB,CAAc,CAC1D,CAAC,CAEL,EAAG,CAACA,CAAc,CAAC,EAEnBxD,EAAU,IAAM,CAEduD,EAAoBb,EAAY,CAAC,CAAC,EAClCe,EAAkB,CAAC,CACrB,EAAG,CAAC5B,GAAS,EAAE,CAAC,EAGhB,MAAMoC,GAAsB,CAACC,EAAUC,IAAkB,CACvD,OAAQD,GAAK,eAAgB,CAC3B,KAAKxD,EAAe,mBAClB,OACErB,EAAC+E,EAAA,CACE,GAAGF,EACJ,MAAOC,EACP,UAAWP,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,KAAKjD,EAAe,uBAClB,OACErB,EAAC+E,EAAA,CACE,GAAGF,EACJ,MAAOC,EACP,UAAWP,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,KAAKjD,EAAe,oBAClB,OACErB,EAAC+E,EAAA,CACE,GAAGF,EACJ,MAAOC,EACP,UAAWP,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,KAAKjD,EAAe,cAClB,OACErB,EAACgF,GAAA,CACE,GAAGH,EACJ,UAAWN,EACX,UAAWE,EACX,iBAAkBJ,EAClB,cAAe,IAAMC,EAAoB,IAAI,EAC/C,EAEJ,QACE,OAAO,IACX,CACF,EAEA,OACEtE,EAAC,OAAI,GAAG,sBACN,SAAAC,EAACuB,GAAA,CAAK,UAAU,WAAW,MAAOyC,GAAkB,SAAU,aAAcZ,IAAc,CAAC,GAAG,SAC5F,UAAArD,EAAC,OAAI,UAAU,uIACZ,SAAAqD,EAAY,IAAI,CAACE,EAAWuB,IAEzB9E,EAACsB,GAAA,CAA4B,UAAU,SAAS,MAAOiC,EAAK,SACzD,SAAAqB,GAAoBrB,EAAMuB,CAAK,GADpBvB,EAAK,QAEnB,CAEH,EACH,EACAvD,EAACiF,GAAA,CACC,IAAKpC,EACL,YAAaQ,EACb,iBAAkBY,EAClB,oBAAqBC,EACrB,kBAAmBE,EACnB,oBAAqBE,EACvB,GACF,EACF,CAEJ,EAMMW,GAAoBxE,EASxB,CAAC0B,EAAO+C,IAAQ,CAChB,KAAM,CAAE,YAAA7B,EAAa,iBAAAY,EAAkB,oBAAAC,EAAqB,kBAAAE,EAAmB,oBAAAE,CAAoB,EAAInC,EACjG,CAAE,QAAAI,CAAQ,EAAIb,EAAqB,EACnCyD,EAAqBzE,EAAuB,IAAI,EAChD0E,EAAc1E,EAAuC,IAAI,GAAK,EAE9D2E,EAAgB/E,EAAagF,GAA+C,CAChF,GAAIH,EAAmB,QAAS,CAC9B,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EAAM,cACfG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EACxFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAECC,EAAwBpF,EAC5B,CAACqF,EAAyCpC,EAA2BuB,IAAkB,CACrFZ,EAAoBX,CAAI,EACxBa,EAAkBU,CAAK,EACvBR,EAAoB,CAAC,EACrBe,EAAcM,CAAE,CAClB,EACA,CAACzB,EAAqBE,EAAmBE,EAAqBe,CAAa,CAC7E,EAGMO,EAActF,EACjBwE,GAAkB,CACjB,GAAIK,EAAmB,SAAW9B,EAAYyB,CAAK,EAAG,CACpD,MAAMS,EAAYJ,EAAmB,QAC/BU,EAAUxC,EAAYyB,CAAK,EAC3BU,EAASJ,EAAY,QAAQ,IAAIS,EAAQ,QAAQ,EAEvD,GAAIL,EAAQ,CACV,MAAMC,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EACxFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,CACF,EACA,CAACpC,CAAW,CACd,EAEA,OAAAzC,GAAoBsE,EAAK,KAAO,CAC9B,YAAAU,CACF,EAAE,EAGA3F,EAAC,OAAI,UAAU,mHACb,UAAAD,EAACuB,GAAA,CACC,IAAK4D,EACL,UAAU,uEACV,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EAEA,SAAAnF,EAAC,OAAI,UAAU,oBACZ,SAAAqD,GAAa,IAAI,CAACE,EAAMuB,IAErB9E,EAACyB,GAAA,CACC,IAAKkE,GAAM,CACLA,EACFP,EAAY,QAAQ,IAAI7B,EAAK,SAAUoC,CAAE,EAEzCP,EAAY,QAAQ,OAAO7B,EAAK,QAAQ,CAE5C,EACA,UAAWnC,EACT,6JACAmC,EAAK,WAAaU,GAAkB,UAAY,UAClD,EACA,QAAS0B,GAAMD,EAAsBC,EAAIpC,EAAMuB,CAAK,EAEpD,MAAOvB,EAAK,SAEX,SAAAA,EAAK,UAHDA,EAAK,SAAWuB,CAIvB,CAEH,EACH,EACF,EACA9E,EAAC,OAAI,UAAU,kCACZ,SAAAuC,EAAQ,YAAY,QAAQ,gBAC3BtC,EAAAF,GAAA,CACE,UAAAC,EAAC4B,GAAA,EAAW,EAAE,MAAG5B,EAAC6B,GAAA,EAAa,GACjC,EAEJ,GACF,CAEJ,CAAC,EAEKkD,EAAyBtE,EAAkD,CAAC0B,EAAO+C,IAAQ,CAC/F,KAAM,CAAE,OAAAY,EAAS,KAAM,YAAAxD,CAAY,EAAIpC,EAAe,EAChD,CAAE,QAAAsC,EAAS,aAAAuD,CAAa,EAAIrE,EAAqB,EACjDsE,EAAgBtF,EAAuB,IAAI,EAC3C,CAACuF,EAAcC,CAAe,EAAI1F,EAA4B,IAAI,EAClE,CAACmC,EAAQC,CAAS,EAAIpC,EAA4B,IAAI,EACtD2F,EAAazF,EAAuB,IAAI,EACxC,CAAC0F,EAAcC,CAAe,EAAI7F,EAAS,EAAK,EAEhD8F,EAAiB/F,EAAQ,IAAM,CACnC,GAAI4B,GAAO,iBAAmBd,EAAe,mBAC3C,MAAO,0FACEc,GAAO,iBAAmBd,EAAe,yBAEzCc,GAAO,eAAmBd,EAAe,oBAGtD,EAAG,CAACc,GAAO,cAAc,CAAC,EAGpBoE,EAAkBjG,EAAY,IAAM,CACpCqC,GAAQ,YAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAEZqE,EAAkBlG,EAAY,IAAM,CACpCqC,GAAQ,MAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAGlB,OAAAxB,EAAU,IAAM,CACVgC,GAAYR,EAAM,mBACpBQ,EAAO,QAAQR,EAAM,iBAAkB,CAAC,EACxCA,EAAM,gBAAgB,EAE1B,EAAG,CAACQ,EAAQR,EAAM,iBAAkBA,CAAK,CAAC,EAcxClC,EAAC,OAAI,UAAU,8CACb,UAAAD,EAACa,EAAA,CACC,IAAKqE,EACL,UAAU,SAKV,SAAUtC,EACV,WAAY,CAACD,EAAQ2C,IAAU,CACzB3C,EAAO,aAAeA,EAAO,iBAAmB,OAClD4D,EAAgB,EACP5D,EAAO,OAASA,EAAO,iBAAmB,QACnD6D,EAAgB,CAEpB,EACA,WAAY,CACV,UAAW,GACX,GAAIR,EAAc,OACpB,EACA,OAAQ,CAAE,OAAQC,CAAa,EAC/B,QAAS,CAACjF,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAiB,GAAO,WAAW,IAAI,CAACoB,EAAMkD,IAAW,CAEvC,MAAMC,EAAc,GAAGvE,EAAM,QAAQ,IAAIsE,CAAM,GAGzCE,EAAiB,IAAM,CAC3B3E,GAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAY,sBAAsBQ,EAAQ,GAAG,GAC7C,eAAgB,QAChB,eAAgBL,GAAO,UAAY,GACnC,SAAUsE,EAAS,EACnB,YAAa,GACb,gBAAiB,GACjB,sBAAuB,GACvB,WAAY,EACd,CACF,CAAC,CACH,EAGMG,EAAiBrD,GAAc,mBAAqBA,GAAM,OAAO,KAAO,GAE9E,OACEvD,EAACc,EAAA,CAAY,UAAU,SACrB,SAAAd,EAACiC,GAAA,CACC,WAAY0E,EACZ,YAAaD,EACb,UAAW,GACX,SAAU,IACV,UAAU,SAEV,SAAA1G,EAACI,EAAA,CACC,OAAQwG,EACR,IAAKrD,GAAM,OAAO,QAClB,UAAWnC,EAAG,SAAUkF,CAAc,EACtC,aAAa,sBACf,EACF,GAdmCnE,GAAO,GAAK,kBAAoBsE,CAerE,CAEJ,CAAC,EACH,EACCjE,EAAQ,kBAAoB,CAAC,CAACuD,GAAgB,CAAC5D,EAAM,OACpDnC,EAACK,GAAA,CACC,KAAK,KACL,UAAU,2GAET,YAAGyB,GAAY,CACd,OAAQiE,EACR,aAAcvD,GAAS,OAAO,aAC9B,OAAQsD,CACV,CAAC,CAAC,IAAIxD,GAAa,GAAG,GACxB,EAEFtC,EAAC,OACC,UAAWoB,EACT,uJAEA,eACF,EACA,QAASmF,EAET,SAAAvG,EAACkC,GAAA,CAAqB,UAAWd,EAAG,mCAAmC,EAAG,EAC5E,EACApB,EAAC,OACC,UAAWoB,EACT,0JAEA,eACF,EACA,QAASoF,EAET,SAAAxG,EAACoC,GAAA,CAAsB,UAAWhB,EAAG,mCAAmC,EAAG,EAC7E,EAYAnB,EAAC,OAAI,UAAU,gKACb,UAAAD,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACa,EAAA,CACC,UAAU,oCACV,SAAUqF,EACV,aAAc,GACd,cAAe,EACf,SAAU,GACV,oBAAqB,GACrB,QAAS,CAACnF,EAAYE,CAAM,EAE3B,SAAAkB,GAAO,WAAW,IAAI,CAACoB,EAAMkD,IAC5BzG,EAACc,EAAA,CAEC,UAAU,oIAEV,SAAAd,EAACI,EAAA,CACC,OAAQmD,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,QACjB,UAAU,8DACV,aAAa,sBACf,GARKpB,GAAO,GAAK,uBAAyBsE,CAS5C,CACD,EACH,EACF,EACC,CAACtE,GAAO,OACPlC,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACI,EAAA,CACC,OAAQ+B,GAAO,SAAS,QAAQ,IAChC,UAAU,8CACV,aAAa,gBACf,EACAnC,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACY,EAAA,CACC,QAAS,CAACM,EAAQ,EAClB,KAAI,GACJ,UAAU,uBACV,UAAU,WACV,SAAU,CAAE,MAAO,IAAM,qBAAsB,EAAM,EAErD,UAAAnB,EAACc,EAAA,CACC,SAAAd,EAACG,EAAA,CACC,KAAMgC,GAAO,SAAS,QACtB,UAAU,qEACZ,EACF,EACAnC,EAACc,EAAA,CACC,SAAAd,EAACG,EAAA,CACC,KAAMgC,GAAO,SAAS,QACtB,UAAU,qEACZ,EACF,GACF,EAUF,GACF,GAEJ,EACAnC,EAAC,OACC,IAAKgG,EACL,UAAU,uMACZ,GACF,CAEJ,CAAC,EAEKhB,GAA0B7C,GAAsC,CACpE,KAAM,CAACQ,EAAQC,CAAS,EAAIpC,EAA4B,IAAI,EAGtD+F,EAAkBjG,EAAY,IAAM,CACpCqC,GAAQ,YAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAEZqE,EAAkBlG,EAAY,IAAM,CACpCqC,GAAQ,MAEVR,EAAM,YAAY,EAGlBQ,GAAQ,UAAU,CAEtB,EAAG,CAACA,EAAQR,CAAK,CAAC,EAGlB,OAAAxB,EAAU,IAAM,CACVgC,GAAUR,EAAM,mBAAqB,MAAQA,EAAM,mBAAqB,SAC1EQ,EAAO,QAAQR,EAAM,iBAAkB,CAAC,EACxCA,EAAM,gBAAgB,EAE1B,EAAG,CAACQ,EAAQR,EAAM,iBAAkBA,CAAK,CAAC,EAGxClC,EAAC,OAAI,UAAU,8CACb,UAAAD,EAACa,EAAA,CACC,UAAU,SACV,SAAU+B,EACV,WAAY,CAACD,EAAQ2C,IAAU,CACzB3C,EAAO,aAAeA,EAAO,iBAAmB,OAClD4D,EAAgB,EACP5D,EAAO,OAASA,EAAO,iBAAmB,QACnD6D,EAAgB,CAEpB,EAKA,QAAS,CAACxF,EAAYC,EAAQF,EAAYG,CAAU,EACpD,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,EAAG,CACD,cAAe,EACf,SAAU,EACZ,CACF,EAEC,SAAAiB,GAAO,WAAW,IAAI,CAACoB,EAAMkD,IAE1BzG,EAACc,EAAA,CAAY,UAAU,SACrB,SAAAb,EAAC,SAAM,SAAQ,GAAC,UAAU,yBACxB,UAAAD,EAAC,SAAM,KAAK,WAAW,EACvBA,EAAC,UAAO,IAAKuD,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,EACvDvD,EAAC,UAAO,IAAKuD,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,aAAa,EACxDvD,EAAC,UAAO,IAAKuD,GAAM,UAAU,CAAC,GAAG,IAAK,KAAK,YAAY,GACzD,GANmCpB,GAAO,GAAK,kBAAoBsE,CAOrE,CAEH,EACH,EACAzG,EAAC,OACC,UAAWoB,EACT,sIAEF,EACA,QAASmF,EAET,SAAAvG,EAACkC,GAAA,CAAqB,UAAU,oCAAoC,EACtE,EACAlC,EAAC,OACC,UAAWoB,EACT,uIAEF,EACA,QAASoF,EAET,SAAAxG,EAACoC,GAAA,CAAsB,UAAU,oCAAoC,EACvE,GACF,CAEJ,EAEMyE,GAA2B1E,GACxBnC,EAAC,OAAI,mBAAO,EAGrB,IAAO8G,GAAQ/E,GAAWM,EAAc",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920} 1920`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1440`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1024`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 767`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 390`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const commentRef = useRef<HTMLDivElement>(null)\n  const [shouldScroll, setShouldScroll] = useState(false)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u68C0\u6D4B\u6587\u672C\u5185\u5BB9\u662F\u5426\u8D85\u8FC7\u5BB9\u5668\u9AD8\u5EA6\uFF0C\u51B3\u5B9A\u662F\u5426\u9700\u8981\u6EDA\u52A8\n  // useEffect(() => {\n  //   if (commentRef.current) {\n  //     const container = commentRef.current\n  //     const contentHeight = container.scrollHeight\n  //     const containerHeight = container.clientHeight\n  //     const needsScroll = contentHeight > containerHeight\n  //     setShouldScroll(needsScroll)\n  //   }\n  // }, [])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative  max-w-[528px] overflow-hidden\">\n              <Swiper\n                modules={[Autoplay]}\n                loop\n                className=\"lg-desktop:h-11 h-10\"\n                direction=\"vertical\"\n                autoplay={{ delay: 2000, disableOnInteraction: false }}\n              >\n                <SwiperSlide>\n                  <Text\n                    html={props?.comment?.content}\n                    className=\"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]\"\n                  />\n                </SwiperSlide>\n              </Swiper>\n              {/* <div\n                ref={commentRef}\n                className={cn('h-10', shouldScroll && 'animate-scroll-text')}\n              >\n                <Text\n                  html={props?.comment?.content}\n                  className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                />\n              </div> */}\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "commentRef", "shouldScroll", "setShouldScroll", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "exposureKey", "handleExposure", "pictureSource", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

package/dist/esm/biz-components/ProductHero/ProductHero.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import f,{useRef as b,useImperativeHandle as x}from"react";import{Heading as a,Button as _,Picture as k,Text as N}from"../../components/index.js";import{cn as H}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";import{useExposure as P}from"../../hooks/useExposure.js";const v="image",w="product_hero",l=f.forwardRef(({data:c,className:i},m)=>{const{title:s,subtitle:e,ctaText:p,poster:u,mobPoster:n,ctaLink:d,theme:h="light"}=c,o=b(null);return P(o,{componentType:v,componentName:w,componentTitle:s,componentDescription:e}),x(m,()=>o.current),r("section",{ref:o,"data-ui-component-id":"ProductHero",className:H("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":h==="dark"},i),children:[r("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[r("div",{className:"product-hero__text",children:[t(a,{as:"h3",size:4,html:s,className:"product-hero__title"}),t(a,{as:"h4",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),t(N,{as:"p",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),p&&t("a",{href:d,className:"product-hero__cta-link",children:t(_,{className:"product-hero__cta-button w-fit",children:p})})]}),t(k,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] aspect-[358/360] shrink",source:`${u?.url}, ${n?.url} 768`})]})});l.displayName="ProductHero";var R=g(l);export{R as default};
+"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import f,{useRef as b,useImperativeHandle as x}from"react";import{Heading as a,Button as _,Picture as k,Text as N}from"../../components/index.js";import{cn as H}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";import{useExposure as P}from"../../hooks/useExposure.js";const v="image",w="product_hero",l=f.forwardRef(({data:c,className:i},m)=>{const{title:s,subtitle:e,ctaText:p,poster:u,mobPoster:n,ctaLink:d,theme:h="light"}=c,o=b(null);return P(o,{componentType:v,componentName:w,componentTitle:s,componentDescription:e}),x(m,()=>o.current),r("section",{ref:o,"data-ui-component-id":"ProductHero",className:H("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":h==="dark"},i),children:[r("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[r("div",{className:"product-hero__text",children:[t(a,{as:"h3",size:4,html:s,className:"product-hero__title"}),t(a,{as:"h4",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),t(N,{as:"p",size:2,html:e,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),p&&t("a",{href:d,className:"product-hero__cta-link",children:t(_,{className:"product-hero__cta-button w-fit",children:p})})]}),t(k,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${u?.url}, ${n?.url} 768`})]})});l.displayName="ProductHero";var R=g(l);export{R as default};
 //# sourceMappingURL=ProductHero.js.map

package/dist/esm/biz-components/ProductHero/ProductHero.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a href={ctaLink} className=\"product-hero__cta-link\">\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
-  "mappings": "aAsCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBArCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,EAAStB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYc,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMQ,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,cACrB,UAAWhB,EACT,sJACA,CACE,YAAae,IAAU,MACzB,EACAR,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,0GACb,UAAAA,EAAC,OAAI,UAAU,qBACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,UAAU,sBAAsB,EACzElB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,yHACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,wHACZ,GACF,EACCC,GACCpB,EAAC,KAAE,KAAMuB,EAAS,UAAU,yBAC1B,SAAAvB,EAACM,EAAA,CAAO,UAAU,iCAAkC,SAAAc,EAAQ,EAC9D,GAEJ,EACApB,EAACO,EAAA,CACC,UAAU,4GACV,OAAQ,GAAGc,GAAQ,GAAG,KAAKC,GAAW,GAAG,OAC3C,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOY,EAAQhB,EAAWI,CAAW",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a href={ctaLink} className=\"product-hero__cta-link\">\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "aAsCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBArCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,EAAStB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYc,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMQ,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,cACrB,UAAWhB,EACT,sJACA,CACE,YAAae,IAAU,MACzB,EACAR,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,0GACb,UAAAA,EAAC,OAAI,UAAU,qBACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,UAAU,sBAAsB,EACzElB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,yHACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,wHACZ,GACF,EACCC,GACCpB,EAAC,KAAE,KAAMuB,EAAS,UAAU,yBAC1B,SAAAvB,EAACM,EAAA,CAAO,UAAU,iCAAkC,SAAAc,EAAQ,EAC9D,GAEJ,EACApB,EAACO,EAAA,CACC,UAAU,wHACV,OAAQ,GAAGc,GAAQ,GAAG,KAAKC,GAAW,GAAG,OAC3C,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOY,EAAQhB,EAAWI,CAAW",
   "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Button", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ProductHero", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef", "ProductHero_default"]
 }

package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as D,jsx as e,jsxs as o}from"react/jsx-runtime";import _,{useRef as p,useImperativeHandle as g}from"react";import{Button as k,Heading as a,Picture as u,Text as h}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as N}from"../../shared/Styles.js";import{useExposure as S}from"../../hooks/useExposure.js";import{Swiper as f,SwiperSlide as m}from"swiper/react";import{Navigation as y,EffectCoverflow as T}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const C="carousel",L="three_d_carousel",E=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),z=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),w=_.forwardRef(({data:v,className:x},b)=>{const{title:d,items:c=[]}=v,r=p(null),l=p(null);return S(l,{componentType:C,componentName:L,componentTitle:d}),g(b,()=>l.current),o("section",{ref:l,"data-ui-component-id":"ThreeDCarousel",className:i("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",x),children:[e(a,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),o("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full",children:[e(f,{onSwiper:t=>r.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[T,y],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,modifier:1,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,modifier:1,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,modifier:1,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,modifier:1,slideShadows:!0}}},children:c.map((t,s)=>e(m,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:n})=>o(D,{children:[e(u,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:i("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg"),imgClassName:"h-full object-cover",style:{filter:n?"":"brightness(50%) contrast(120%)"}}),o("div",{className:i("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!n}),children:[e(a,{as:"h2",size:2,html:t.title}),e(h,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:e(k,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},s))}),o("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between",children:[e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:e(E,{})}),e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:e(z,{})})]})]}),e("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:e(f,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:c.map((t,s)=>o(m,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[e(u,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto overflow-hidden shadow-lg"}),o("div",{className:"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",children:[e(a,{as:"h2",size:2,html:t.title}),e(h,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:e("button",{className:"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95",children:t.buttonText})})]})]},s))})})]})});w.displayName="ThreeDCarousel";var q=N(w);export{q as default};
+"use client";import{Fragment as D,jsx as e,jsxs as o}from"react/jsx-runtime";import _,{useRef as p,useImperativeHandle as g}from"react";import{Button as k,Heading as a,Picture as u,Text as h}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as N}from"../../shared/Styles.js";import{useExposure as S}from"../../hooks/useExposure.js";import{Swiper as f,SwiperSlide as m}from"swiper/react";import{Navigation as y,EffectCoverflow as T}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const C="carousel",L="three_d_carousel",E=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),z=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),w=_.forwardRef(({data:v,className:x},b)=>{const{title:c,items:d=[]}=v,r=p(null),l=p(null);return S(l,{componentType:C,componentName:L,componentTitle:c}),g(b,()=>l.current),o("section",{ref:l,"data-ui-component-id":"ThreeDCarousel",className:i("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",x),children:[e(a,{as:"h1",size:4,html:c,className:"three-d-carousel__title laptop:text-center text-left"}),o("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full",children:[e(f,{onSwiper:t=>r.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[T,y],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,slideShadows:!0}}},children:d.map((t,s)=>e(m,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:n})=>o(D,{children:[e(u,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:i("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg"),imgClassName:"h-full object-cover",style:{filter:n?"":"brightness(50%) contrast(120%)"}}),o("div",{className:i("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!n}),children:[e(a,{as:"h2",size:2,html:t.title}),e(h,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:e(k,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},s))}),o("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between",children:[e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:e(E,{})}),e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:e(z,{})})]})]}),e("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:e(f,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:d.map((t,s)=>o(m,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[e(u,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg",imgClassName:"h-full object-cover"}),o("div",{className:"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",children:[e(a,{as:"h2",size:2,html:t.title}),e(h,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:e("button",{className:"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95",children:t.buttonText})})]})]},s))})})]})});w.displayName="ThreeDCarousel";var q=N(w);export{q as default};
 //# sourceMappingURL=ThreeDCarousel.js.map

package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full\">\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={0}\n          loop\n          slidesPerView={'auto'}\n          // loopAdditionalSlides={2}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: 427,\n            depth: 300,\n            modifier: 1,\n            slideShadows: true,\n          }}\n          breakpoints={{\n            1921: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 427,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1490: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 350,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1441: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 334,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1025: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 230,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            769: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 286,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n          }}\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg')}\n                    imgClassName=\"h-full object-cover\"\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div\n                    className={cn(\n                      'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                      {\n                        'aiui-dark': item.theme === 'dark',\n                        'opacity-0': !isActive,\n                      }\n                    )}\n                  >\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description text-[14px]\"\n                    />\n                    {item.buttonText && (\n                      <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n                        <Button\n                          size=\"base\"\n                          variant=\"secondary\"\n                          className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n                        >\n                          {item.buttonText}\n                        </Button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n        <Swiper\n          loop={true}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile rounded-box mx-auto overflow-hidden shadow-lg\"\n              />\n              <div className=\"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]\">\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n                />\n                {item.buttonText && (\n                  <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n                    <button className=\"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95\">\n                      {item.buttonText}\n                    </button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full\">\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={0}\n          loop\n          slidesPerView={'auto'}\n          // loopAdditionalSlides={2}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: 427,\n            depth: 300,\n            // modifier: 1,\n            slideShadows: true,\n          }}\n          breakpoints={{\n            1921: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 427,\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1490: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 350,\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1441: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 334,\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1025: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 230,\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n            769: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 286,\n                depth: 300,\n                // modifier: 1,\n                slideShadows: true,\n              },\n            },\n          }}\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg')}\n                    imgClassName=\"h-full object-cover\"\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div\n                    className={cn(\n                      'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n                      {\n                        'aiui-dark': item.theme === 'dark',\n                        'opacity-0': !isActive,\n                      }\n                    )}\n                  >\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description text-[14px]\"\n                    />\n                    {item.buttonText && (\n                      <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n                        <Button\n                          size=\"base\"\n                          variant=\"secondary\"\n                          className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n                        >\n                          {item.buttonText}\n                        </Button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n        <Swiper\n          loop={true}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg\"\n                imgClassName=\"h-full object-cover\"\n              />\n              <div className=\"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]\">\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n                />\n                {item.buttonText && (\n                  <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n                    <button className=\"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95\">\n                      {item.buttonText}\n                    </button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Button", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Navigation", "EffectCoverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "ref", "title", "items", "swiperRef", "boxRef", "swiper", "item", "index", "isActive", "ThreeDCarousel_default"]
 }

package/dist/esm/components/container.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as u,jsx as t}from"react/jsx-runtime";import m from"react";import{cn as i}from"../helpers/utils.js";import{Slot as b}from"@radix-ui/react-slot";const g=({children:e})=>t(u,{children:e}),h=m.forwardRef(({...e},o)=>{const{asChild:p,children:n,className:s,childClassName:a,spaceY:c="none",spaceTop:r="none",spaceBottom:l="none",...x}=e,f=p?b:"div",C={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},y={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},R={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return t(f,{...x,ref:o,className:i(s,"ipc_container","relative z-10 w-full bg-white"),children:t("div",{className:i("lg-desktop:max-w-full mx-auto size-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",a,C?.[c]||c,y?.[r]||r,R?.[l]||l),children:n})})}),d=m.forwardRef(({...e},o)=>{const{children:p,mode:n="section"}=e,a={section:h,fragment:g}[n];return t(a,{...e,ref:o,children:p})});d.displayName="Container";export{d as Container};
+import{Fragment as u,jsx as o}from"react/jsx-runtime";import m from"react";import{cn as i}from"../helpers/utils.js";import{Slot as b}from"@radix-ui/react-slot";const g=({children:e})=>o(u,{children:e}),h=m.forwardRef(({...e},t)=>{const{asChild:p,children:n,className:s,childClassName:a,spaceY:c="none",spaceTop:r="none",spaceBottom:l="none",...x}=e,f=p?b:"div",C={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},y={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},R={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return o(f,{...x,ref:t,className:i(s,"ipc_container","relative z-10 w-full overflow-hidden bg-white"),children:o("div",{className:i("lg-desktop:max-w-full mx-auto size-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",a,C?.[c]||c,y?.[r]||r,R?.[l]||l),children:n})})}),d=m.forwardRef(({...e},t)=>{const{children:p,mode:n="section"}=e,a={section:h,fragment:g}[n];return o(a,{...e,ref:t,children:p})});d.displayName="Container";export{d as Container};
 //# sourceMappingURL=container.js.map

package/dist/esm/components/container.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/container.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n  asChild?: boolean\n  children?: React.ReactNode\n  className?: string\n  childClassName?: string\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n  mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    childClassName,\n    spaceY = 'none',\n    spaceTop = 'none',\n    spaceBottom = 'none',\n    ...containerProps\n  } = props\n\n  const Comp = asChild ? Slot : 'div'\n\n  const spaceY_map: any = {\n    default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n    none: '',\n  }\n\n  const spaceTop_map: any = {\n    default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n    none: '',\n  }\n\n  const spaceBottom_map: any = {\n    default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n    none: '',\n  }\n\n  return (\n    <Comp\n      {...containerProps}\n      ref={forwardedRef}\n      className={cn(className, 'ipc_container', 'relative z-10 w-full bg-white')}\n    >\n      <div\n        className={cn(\n          'lg-desktop:max-w-full mx-auto size-full',\n          'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n          childClassName,\n          spaceY_map?.[spaceY] || spaceY,\n          spaceTop_map?.[spaceTop] || spaceTop,\n          spaceBottom_map?.[spaceBottom] || spaceBottom\n        )}\n      >\n        {children}\n      </div>\n    </Comp>\n  )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const { children, mode = 'section' } = props\n\n  const componentsMap: {\n    [P in Mode]: React.ComponentType<any> | string\n  } = {\n    section: Section,\n    fragment: Fragment,\n  }\n\n  const Component = componentsMap![mode!]\n\n  return (\n    <Component {...props} ref={forwardedRef}>\n      {children}\n    </Component>\n  )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
-  "mappings": "AAkBS,mBAAAA,EAAA,OAAAC,MAAA,oBAlBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAerB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,eAAAC,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIR,EAEES,EAAOP,EAAUL,EAAO,MAExBa,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACElB,EAACe,EAAA,CACE,GAAGD,EACJ,IAAKP,EACL,UAAWL,EAAGO,EAAW,gBAAiB,+BAA+B,EAEzE,SAAAT,EAAC,OACC,UAAWE,EACT,0CACA,8EACAQ,EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKe,EAAYlB,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAH,EAAU,KAAAgB,EAAO,SAAU,EAAId,EASjCe,EALF,CACF,QAAShB,EACT,SAAUN,CACZ,EAEiCqB,CAAK,EAEtC,OACEpB,EAACqB,EAAA,CAAW,GAAGf,EAAO,IAAKC,EACxB,SAAAH,EACH,CAEJ,CAAC,EAEDe,EAAU,YAAc",
+  "sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n  asChild?: boolean\n  children?: React.ReactNode\n  className?: string\n  childClassName?: string\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n  mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    childClassName,\n    spaceY = 'none',\n    spaceTop = 'none',\n    spaceBottom = 'none',\n    ...containerProps\n  } = props\n\n  const Comp = asChild ? Slot : 'div'\n\n  const spaceY_map: any = {\n    default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n    none: '',\n  }\n\n  const spaceTop_map: any = {\n    default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n    none: '',\n  }\n\n  const spaceBottom_map: any = {\n    default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n    none: '',\n  }\n\n  return (\n    <Comp\n      {...containerProps}\n      ref={forwardedRef}\n      className={cn(className, 'ipc_container', 'relative z-10 w-full overflow-hidden bg-white')}\n    >\n      <div\n        className={cn(\n          'lg-desktop:max-w-full mx-auto size-full',\n          'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n          childClassName,\n          spaceY_map?.[spaceY] || spaceY,\n          spaceTop_map?.[spaceTop] || spaceTop,\n          spaceBottom_map?.[spaceBottom] || spaceBottom\n        )}\n      >\n        {children}\n      </div>\n    </Comp>\n  )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const { children, mode = 'section' } = props\n\n  const componentsMap: {\n    [P in Mode]: React.ComponentType<any> | string\n  } = {\n    section: Section,\n    fragment: Fragment,\n  }\n\n  const Component = componentsMap![mode!]\n\n  return (\n    <Component {...props} ref={forwardedRef}>\n      {children}\n    </Component>\n  )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
+  "mappings": "AAkBS,mBAAAA,EAAA,OAAAC,MAAA,oBAlBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAerB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,eAAAC,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIR,EAEES,EAAOP,EAAUL,EAAO,MAExBa,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACElB,EAACe,EAAA,CACE,GAAGD,EACJ,IAAKP,EACL,UAAWL,EAAGO,EAAW,gBAAiB,+CAA+C,EAEzF,SAAAT,EAAC,OACC,UAAWE,EACT,0CACA,8EACAQ,EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKe,EAAYlB,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAH,EAAU,KAAAgB,EAAO,SAAU,EAAId,EASjCe,EALF,CACF,QAAShB,EACT,SAAUN,CACZ,EAEiCqB,CAAK,EAEtC,OACEpB,EAACqB,EAAA,CAAW,GAAGf,EAAO,IAAKC,EACxB,SAAAH,EACH,CAEJ,CAAC,EAEDe,EAAU,YAAc",
   "names": ["Fragment", "jsx", "React", "cn", "Slot", "children", "Section", "props", "forwardedRef", "asChild", "className", "childClassName", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "Container", "mode", "Component"]
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.9-alpha.1764146057632",
+  "version": "1.1.9-alpha.1764154320530",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",