npm - @anker-in/headless-ui - Versions diffs - 1.1.5 → 1.1.6 - Mend

@anker-in/headless-ui 1.1.5 → 1.1.6

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div\n        id={extensions?.id}\n        className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1 space-y-4', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n            <div className=\"size-6\">\n              <svg\n                width=\"24\"\n                height=\"24\"\n                className=\"mb-[3px]\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  className=\"transition-all duration-[0.4s]\"\n                  d=\"M10.5 8L14.5 12L10.5 16\"\n                  stroke=\"#777\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                ></path>\n              </svg>\n            </div>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div\n        id={extensions?.id}\n        className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1 space-y-4', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center overflow-hidden text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n            <div className=\"size-6\">\n              <svg\n                width=\"24\"\n                height=\"24\"\n                className=\"mb-[3px]\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  className=\"transition-all duration-[0.4s]\"\n                  d=\"M10.5 8L14.5 12L10.5 16\"\n                  stroke=\"#777\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                ></path>\n              </svg>\n            </div>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "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",
   "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "weight", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
 }

package/dist/cjs/components/picture.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var R=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},y=(t,e,r,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of F(e))!j.call(t,a)&&a!==r&&d(t,a,{get:()=>e[a],enumerable:!(m=x(e,a))||m.enumerable});return t};var k=(t,e,r)=>(r=t!=null?L(U(t)):{},y(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),N=t=>y(d({},"__esModule",{value:!0}),t);var C={};R(C,{default:()=>B});module.exports=N(C);var u=require("react/jsx-runtime"),p=k(require("react"));const $=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],Z=3960,W=3980,v={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,390,768,1024,1280,1440,1540,1920]},z=t=>$.some(e=>t==e),D=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),H=t=>{try{return new URL(t).searchParams.get("alt")||""}catch{return""}},T=t=>{try{const e=new URL(t);return e.searchParams.delete("alt"),e.toString()}catch{return t}},X=p.default.forwardRef(({imgClassName:t="",source:e="",quality:r=2,deviceSizes:m=[375,390,767,1023,1024,1279,1440,1439,1539,1919,1920],className:a,loading:A="lazy",alt:h="",...w},I)=>{const M=s=>(v?.domains||[]).some(i=>s.includes(i)),g=(0,p.useCallback)(({src:s,width:o})=>{const i=o,c=T(s);try{const n=new URL(c);if(!z(n.hostname))return c;const l=n.pathname.split("/").pop()||"";if(D(l))return c?.split("/")?.map(f=>{if(M(c)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(f)&&/_[0-9]{2,4}x/.test(c)===!1){const P=f.split(".");return P.map((b,E)=>E===P.length-2?`${b}_${i<3960?i:3980}x`:b).join(".")}return f}).join("/")}catch{return c}},[]),S=(0,p.useCallback)(({srcArr:s,width:o})=>{const i=o*r,c=g({src:s[0][0],width:i}),n=s.filter(([,l])=>l&&parseInt(l,10)>=o).map(([l])=>g({src:l,width:i})).pop();return(0,u.jsx)("source",{srcSet:n||c,media:`(max-width: ${o}px)`},o)},[g,r]),_=(0,p.useMemo)(()=>{if(typeof e!="string"||!e)return[];const s=e.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(n=>n.split(" ").filter(Boolean)),o=h||s.map(n=>n[0]).filter(Boolean).map(H).find(Boolean)||"",i=m.map(n=>S({srcArr:s,width:n})),c=g({src:s[0][0],width:1920*r});return[...i,(0,u.jsx)("img",{src:c,className:`w-full ${t}`,loading:A,alt:o,...w},"default")]},[m,t,g,r,e,S,h]);return(0,u.jsxs)("picture",{ref:I,className:`block overflow-hidden ${a}`,children:[_,w.children]})});var B=X;
+"use strict";"use client";var L=Object.create;var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var R=(t,e)=>{for(var r in e)f(t,r,{get:e[r],enumerable:!0})},A=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of F(e))!j.call(t,a)&&a!==r&&f(t,a,{get:()=>e[a],enumerable:!(l=x(e,a))||l.enumerable});return t};var k=(t,e,r)=>(r=t!=null?L(U(t)):{},A(e||!t||!t.__esModule?f(r,"default",{value:t,enumerable:!0}):r,t)),N=t=>A(f({},"__esModule",{value:!0}),t);var C={};R(C,{default:()=>B});module.exports=N(C);var u=require("react/jsx-runtime"),p=k(require("react"));const $=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],Z=3960,W=3980,v={domains:["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],deviceSizes:[375,390,768,1024,1280,1440,1540,1920]},z=t=>$.some(e=>t==e),D=(t="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(t),H=t=>{try{return new URL(t).searchParams.get("alt")||""}catch{return""}},T=t=>{try{const e=new URL(t);return e.searchParams.delete("alt"),e.toString()}catch{return t}},X=p.default.forwardRef(({imgClassName:t="",source:e="",quality:r=2,deviceSizes:l=[375,390,767,1023,1024,1279,1440,1439,1539,1919,1920],className:a,loading:h="lazy",alt:w="",...S},I)=>{const M=s=>(v?.domains||[]).some(i=>s.includes(i)),g=(0,p.useCallback)(({src:s,width:o})=>{const i=o,c=T(s);try{const n=new URL(c);if(!z(n.hostname))return c;const m=n.pathname.split("/").pop()||"";if(D(m))return c?.split("/")?.map(d=>{if(M(c)&&/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\?.*)?/.test(d)&&/_[0-9]{2,4}x/.test(c)===!1){const b=d.split(".");return b.map((y,E)=>E===b.length-2?`${y}_${i<3960?i:3980}x`:y).join(".")}return d}).join("/")}catch{return c}},[]),P=(0,p.useCallback)(({srcArr:s,width:o})=>{const i=o*r,c=g({src:s[0][0],width:i}),n=s.filter(([,m])=>m&&parseInt(m,10)>=o).map(([m])=>g({src:m,width:i})).pop();return(0,u.jsx)("source",{srcSet:n||c,media:`(max-width: ${o}px)`},o)},[g,r]),_=(0,p.useMemo)(()=>{if(typeof e!="string"||!e)return[];const s=e.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(n=>n.split(" ").filter(Boolean)),o=w||s.map(n=>n[0]).filter(Boolean).map(H).find(Boolean)||"",i=l.map(n=>P({srcArr:s,width:n})),c=g({src:s[0][0],width:1920*r});return[...i,(0,u.jsx)("img",{src:c,className:`w-full ${t}`,loading:h,alt:o,...S},"default")]},[l,t,g,r,e,P,w,h]);return(0,u.jsxs)("picture",{ref:I,className:`block overflow-hidden ${a}`,children:[_,S.children]})});var B=X;
 //# sourceMappingURL=picture.js.map

package/dist/cjs/components/picture.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2He,IAAAI,EAAA,6BA1HfC,EAA4C,oBAE5C,MAAMC,EAAkC,CAAC,kBAAmB,qBAAsB,kBAAkB,EAE9FC,EAAW,KACXC,EAAiB,KAajBC,EAAS,CACb,QAAS,CAAC,kBAAmB,qBAAsB,kBAAkB,EACrE,YAAa,CAAC,IAAK,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,IAAI,CAC3D,EAEMC,EAAiBC,GACdL,EAAgC,KAAKM,GAAUD,GAAaC,CAAM,EAErEC,EAAwB,CAACC,EAAmB,KAAO,yCAAyC,KAAKA,CAAQ,EAOzGC,EAAmBC,GAAwB,CAC/C,GAAI,CACF,OAAO,IAAI,IAAIA,CAAG,EAAE,aAAa,IAAI,KAAK,GAAK,EACjD,MAAQ,CACN,MAAO,EACT,CACF,EAOMC,EAAoBD,GAAwB,CAChD,GAAI,CACF,MAAME,EAAS,IAAI,IAAIF,CAAG,EAC1B,OAAAE,EAAO,aAAa,OAAO,KAAK,EACzBA,EAAO,SAAS,CACzB,MAAQ,CACN,OAAOF,CACT,CACF,EAEMG,EAAU,EAAAC,QAAM,WACpB,CACE,CACE,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,QAAAC,EAAU,EACV,YAAAC,EAAc,CAAC,IAAK,IAAK,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5E,UAAAC,EACA,QAAAC,EAAU,OACV,IAAAC,EAAM,GACN,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAgBC,IACJtB,GAAQ,SAAW,CAAC,GACrB,KAAKG,GAAUmB,EAAI,SAASnB,CAAM,CAAC,EAG9CoB,KAAgB,eAAY,CAAC,CAAE,IAAAD,EAAK,MAAAE,CAAM,IAAsC,CACpF,MAAMC,EAAOD,EACPE,EAAWlB,EAAiBc,CAAG,EACrC,GAAI,CACF,MAAMK,EAAY,IAAI,IAAID,CAAQ,EAClC,GAAI,CAACzB,EAAc0B,EAAU,QAAQ,EACnC,OAAOD,EAET,MAAMrB,EAAWsB,EAAU,SAAS,MAAM,GAAG,EAAE,IAAI,GAAK,GACxD,GAAIvB,EAAsBC,CAAQ,EAChC,OAAOqB,GACH,MAAM,GAAG,GACT,IAAIE,GAAQ,CACZ,GACEP,EAAaK,CAAQ,GACrB,gDAAgD,KAAKE,CAAI,GACzD,eAAe,KAAKF,CAAQ,IAAM,GAClC,CACA,MAAMG,EAAOD,EAAK,MAAM,GAAG,EAC3B,OAAOC,EACJ,IAAI,CAACC,EAAGC,IACHA,IAAMF,EAAK,OAAS,EACf,GAAGC,CAAC,IAAIL,EAAO,KAAOA,EAAO,IAAI,IAEnCK,CACR,EACA,KAAK,GAAG,CACb,CACA,OAAOF,CACT,CAAC,EACA,KAAK,GAAG,CAEf,MAAgB,CACd,OAAOF,CACT,CACF,EAAG,CAAC,CAAC,EAECM,KAAe,eACnB,CAAC,CAAE,OAAAC,EAAQ,MAAAT,CAAM,IAA6C,CAC5D,MAAMU,EAAgBV,EAAQV,EACxBqB,EAAaZ,EAAc,CAAE,IAAKU,EAAO,CAAC,EAAE,CAAC,EAAG,MAAOC,CAAc,CAAC,EAEtEE,EAAcH,EACjB,OAAO,CAAC,CAAC,CAAEI,CAAU,IAAMA,GAAc,SAASA,EAAY,EAAE,GAAKb,CAAK,EAC1E,IAAI,CAAC,CAACF,CAAG,IAAMC,EAAc,CAAE,IAAAD,EAAK,MAAOY,CAAc,CAAC,CAAC,EAC3D,IAAI,EAEP,SAAO,OAAC,UAAmB,OAAQE,GAAeD,EAAY,MAAO,eAAeX,CAAK,OAArEA,CAA4E,CAClG,EACA,CAACD,EAAeT,CAAO,CACzB,EAEMwB,KAAa,WAAQ,IAAM,CAC/B,GAAI,OAAOzB,GAAW,UAAY,CAACA,EAAQ,MAAO,CAAC,EAEnD,MAAMoB,EAASpB,EACZ,QAAQ,UAAW,EAAE,EACrB,QAAQ,SAAU,GAAG,EACrB,MAAM,GAAG,EACT,IAAIe,GAAQA,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC,EAGxCW,EACJrB,GACAe,EACG,IAAIL,GAAQA,EAAK,CAAC,CAAC,EACnB,OAAO,OAAO,EACd,IAAItB,CAAe,EACnB,KAAK,OAAO,GACf,GAEIkC,EAAUzB,EAAY,IAAIS,GAASQ,EAAa,CAAE,OAAAC,EAAQ,MAAAT,CAAM,CAAC,CAAC,EAClEiB,EAAalB,EAAc,CAAE,IAAKU,EAAO,CAAC,EAAE,CAAC,EAAG,MAAO,KAAOnB,CAAQ,CAAC,EAE7E,MAAO,CACL,GAAG0B,KACH,OAAC,OAEC,IAAKC,EACL,UAAW,UAAU7B,CAAY,GACjC,QAASK,EACT,IAAKsB,EACJ,GAAGpB,GALA,SAMN,CACF,CACF,EAAG,CAACJ,EAAaH,EAAcW,EAAeT,EAASD,EAAQmB,EAAcd,CAAG,CAAC,EAEjF,SACE,QAAC,WAAQ,IAAKE,EAAK,UAAW,yBAAyBJ,CAAS,GAC7D,UAAAsB,EACAnB,EAAK,UACR,CAEJ,CACF,EACA,IAAO1B,EAAQiB",
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n  alt?: string\n}\nconst images = {\n  domains: ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com'],\n  deviceSizes: [375, 390, 768, 1024, 1280, 1440, 1540, 1920],\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\n/**\n * \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u89E3\u6790\u51FA\u7684 alt \u503C\uFF0C\u5982\u679C\u6CA1\u6709\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n */\nconst parseAltFromUrl = (url: string): string => {\n  try {\n    return new URL(url).searchParams.get('alt') || ''\n  } catch {\n    return ''\n  }\n}\n\n/**\n * \u79FB\u9664 URL \u4E2D\u7684 alt \u53C2\u6570\n * @param url \u56FE\u7247 URL\n * @returns \u79FB\u9664 alt \u53C2\u6570\u540E\u7684 URL\n */\nconst removeAltFromUrl = (url: string): string => {\n  try {\n    const urlObj = new URL(url)\n    urlObj.searchParams.delete('alt')\n    return urlObj.toString()\n  } catch {\n    return url\n  }\n}\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 390, 767, 1023, 1024, 1279, 1440, 1439, 1539, 1919, 1920],\n      className,\n      loading = 'lazy',\n      alt = '',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const isShopifycdn = (src: string | string[]) => {\n      const domains = images?.domains || []\n      return domains.some(domain => src.includes(domain))\n    }\n\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      const cleanSrc = removeAltFromUrl(src)\n      try {\n        const parsedUrl = new URL(cleanSrc)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return cleanSrc\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName)) {\n          return cleanSrc\n            ?.split('/')\n            ?.map(item => {\n              if (\n                isShopifycdn(cleanSrc) &&\n                /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)(\\?.*)?/.test(item) &&\n                /_[0-9]{2,4}x/.test(cleanSrc) === false\n              ) {\n                const name = item.split('.')\n                return name\n                  .map((v, i) => {\n                    if (i === name.length - 2) {\n                      return `${v}_${size < 3960 ? size : 3980}x`\n                    }\n                    return v\n                  })\n                  .join('.')\n              }\n              return item\n            })\n            .join('/')\n        }\n      } catch (error) {\n        return cleanSrc\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const defaultSrc = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n\n        const matchingSrc = srcArr\n          .filter(([, breakpoint]) => breakpoint && parseInt(breakpoint, 10) >= width)\n          .map(([src]) => imgSrcSetsize({ src, width: computedWidth }))\n          .pop()\n\n        return <source key={width} srcSet={matchingSrc || defaultSrc} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n\n      const srcArr = source\n        .replace(/[\\r\\n]/g, '')\n        .replace(/\\s\\s+/g, ' ')\n        .split(',')\n        .map(item => item.split(' ').filter(Boolean))\n\n      // \u4ECE URL \u4E2D\u89E3\u6790 alt \u53C2\u6570\uFF0C\u4F18\u5148\u4F7F\u7528\u7B2C\u4E00\u4E2A\u6709 alt \u53C2\u6570\u7684 URL\n      const parsedAlt =\n        alt ||\n        srcArr\n          .map(item => item[0])\n          .filter(Boolean)\n          .map(parseAltFromUrl)\n          .find(Boolean) ||\n        ''\n\n      const sources = deviceSizes.map(width => sourceSrcSet({ srcArr, width }))\n      const defaultImg = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      return [\n        ...sources,\n        <img\n          key=\"default\"\n          src={defaultImg}\n          className={`w-full ${imgClassName}`}\n          loading={loading}\n          alt={parsedAlt}\n          {...rest}\n        />,\n      ]\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet, alt, loading])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
   "names": ["picture_exports", "__export", "picture_default", "__toCommonJS", "import_jsx_runtime", "import_react", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "images", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "parseAltFromUrl", "url", "removeAltFromUrl", "urlObj", "Picture", "React", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "alt", "rest", "ref", "isShopifycdn", "src", "imgSrcSetsize", "width", "size", "cleanSrc", "parsedUrl", "item", "name", "v", "i", "sourceSrcSet", "srcArr", "computedWidth", "defaultSrc", "matchingSrc", "breakpoint", "sourceList", "parsedAlt", "sources", "defaultImg"]
 }

package/dist/esm/biz-components/Category/SwiperCategory.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w})=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var M=o;export{M as default};
+"use client";import{jsx as i}from"react/jsx-runtime";import n from"react";import{Swiper as l,SwiperSlide as p}from"swiper/react";import{Pagination as d,FreeMode as f,Mousewheel as c}from"swiper/modules";import"swiper/css";import"swiper/css/pagination";const o=n.forwardRef(({data:e,Slide:s,id:a,pagination:w},m)=>i(l,{freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,dynamicBullets:!1},className:"!overflow-visible",modules:[f,c,d],breakpoints:{0:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},376:{spaceBetween:16,freeMode:!1,slidesPerView:1,slidesPerGroup:1},767:{spaceBetween:16,freeMode:!1,slidesPerView:4,slidesPerGroup:4},1441:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(6,e?.list?.length),slidesPerGroup:Math.min(6,e?.list?.length)}},children:e?.list?.map((t,r)=>i(p,{className:"!h-[unset]",children:i(s,{data:t,configuration:{...e?.configuration,index:r}})},a+"SwiperSlide"+r))}));o.displayName="SwiperBox";var y=o;export{y as default};
 //# sourceMappingURL=SwiperCategory.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/SwiperCategory.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n  }\n  pagination?: any\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }) => {\n  return (\n    <Swiper\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      pagination={{\n        clickable: true,\n        dynamicBullets: false,\n      }}\n      className=\"!overflow-visible\"\n      modules={[FreeMode, Mousewheel, Pagination]}\n      breakpoints={{\n        0: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        376: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        767: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 4,\n          slidesPerGroup: 4,\n        },\n        1441: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: Math.min(6, data?.list?.length),\n          slidesPerGroup: Math.min(6, data?.list?.length),\n        },\n      }}\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n          <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
-  "mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,IAE9FX,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACI,EAAMC,IACtBb,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMG,EAAM,cAAe,CAAE,GAAGJ,GAAM,cAAe,MAAOK,CAAO,EAAG,GAD7DH,EAAK,cAAgBG,CAEvC,CACD,EACH,CAEH,EAEDN,EAAU,YAAc,YAExB,IAAOO,EAAQP",
-  "names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "item", "jIndex", "SwiperCategory_default"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/pagination' // \u5206\u9875\u5668\u6837\u5F0F\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n  }\n  pagination?: any\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any }>\n}\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, Slide, id, pagination }, ref) => {\n  return (\n    <Swiper\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      pagination={{\n        clickable: true,\n        dynamicBullets: false,\n      }}\n      className=\"!overflow-visible\"\n      modules={[FreeMode, Mousewheel, Pagination]}\n      breakpoints={{\n        0: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        376: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 1,\n          slidesPerGroup: 1,\n        },\n        767: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: 4,\n          slidesPerGroup: 4,\n        },\n        1441: {\n          spaceBetween: 16,\n          freeMode: false,\n          slidesPerView: Math.min(6, data?.list?.length),\n          slidesPerGroup: Math.min(6, data?.list?.length),\n        },\n      }}\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!h-[unset]\">\n          <Slide data={item} configuration={{ ...data?.configuration, index: jIndex }} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
+  "mappings": "aA6DU,cAAAA,MAAA,oBA5DV,OAAOC,MAAW,QAClB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBACjD,MAAO,aACP,MAAO,wBAcP,MAAMC,EAAYN,EAAM,WAA2C,CAAC,CAAE,KAAAO,EAAM,MAAAC,EAAO,GAAAC,EAAI,WAAAC,CAAW,EAAGC,IAEjGZ,EAACE,EAAA,CACC,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,WAAY,CACV,UAAW,GACX,eAAgB,EAClB,EACA,UAAU,oBACV,QAAS,CAACG,EAAUC,EAAYF,CAAU,EAC1C,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,EACf,eAAgB,CAClB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,KAAK,IAAI,EAAGI,GAAM,MAAM,MAAM,EAC7C,eAAgB,KAAK,IAAI,EAAGA,GAAM,MAAM,MAAM,CAChD,CACF,EAEC,SAAAA,GAAM,MAAM,IAAI,CAACK,EAAMC,IACtBd,EAACG,EAAA,CAA8C,UAAU,aACvD,SAAAH,EAACS,EAAA,CAAM,KAAMI,EAAM,cAAe,CAAE,GAAGL,GAAM,cAAe,MAAOM,CAAO,EAAG,GAD7DJ,EAAK,cAAgBI,CAEvC,CACD,EACH,CAEH,EAEDP,EAAU,YAAc,YAExB,IAAOQ,EAAQR",
+  "names": ["jsx", "React", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "SwiperBox", "data", "Slide", "id", "pagination", "ref", "item", "jIndex", "SwiperCategory_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as n}from"react/jsx-runtime";import{formatPrice as u}from"../../utils/index.js";import{useAiuiContext as f}from"../../../AiuiProvider/index.js";import{Text as r}from"../../../../components/index.js";import{cn as t}from"../../../../helpers/index.js";import{ShippingMethodMode as g}from"./type.js";const v=({item:e,index:a,active:d,toggleShipping:p,currencyCode:i,metafields:x,className:s=""})=>{const{trackingData:m,locale:c="us"}=f(),b=m?.common?.copywriting;return n("div",{role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&p(e,a)},className:t("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":d},s),onClick:()=>p(e,a),children:[n("div",{className:"relative",children:[o(r,{className:t("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),o(r,{className:t("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),o(r,{className:t("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?u({amount:e.price,currencyCode:i,locale:c,removeTrailingZeros:!0}):b?.free}),e.mode!==g.FREE&&o("div",{className:t("bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:x?.memberOnly})]})};var w=v;export{w as default};
+import{jsx as o,jsxs as l}from"react/jsx-runtime";import{formatPrice as u}from"../../utils/index.js";import{useAiuiContext as f}from"../../../AiuiProvider/index.js";import{Text as r}from"../../../../components/index.js";import{cn as t}from"../../../../helpers/index.js";import{ShippingMethodMode as g}from"./type.js";const y=({item:e,index:a,active:i,toggleShipping:p,currencyCode:d,metafields:s,className:x=""})=>{const{trackingData:m,locale:c="us"}=f(),b=m?.common?.copywriting;return l("div",{role:"button",tabIndex:0,onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&p(e,a)},className:t("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer  justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":i},x),onClick:()=>p(e,a),children:[l("div",{className:"relative",children:[o(r,{className:t("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),o(r,{className:t("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),o(r,{className:t("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?u({amount:e.price,currencyCode:d,locale:c,removeTrailingZeros:!0}):b?.free}),e.mode!==g.FREE&&o("div",{className:t("bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:s?.memberOnly})]})};var k=y;export{k as default};
 //# sourceMappingURL=ShippingMethod.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingMethod.tsx"],
-  "sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n  item,\n  index,\n  active,\n  toggleShipping,\n  currencyCode,\n  metafields,\n  className = '',\n}: {\n  item: any\n  index: number\n  active: boolean\n  toggleShipping: (item: any, index: number) => void\n  currencyCode: string\n  metafields: any\n  className?: string\n}) => {\n  const { trackingData, locale = 'us' } = useAiuiContext()\n  const shopCommon = trackingData?.common?.copywriting\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          toggleShipping(item, index)\n        }\n      }}\n      className={cn(\n        'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n        {\n          'cursor-not-allowed opacity-60': item.disabled,\n          'border-brand': active,\n        },\n        className\n      )}\n      onClick={() => toggleShipping(item, index)}\n    >\n      <div className=\"relative\">\n        <Text\n          className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n          as=\"p\"\n          html={item.title}\n        />\n        <Text\n          className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n          as=\"p\"\n          html={item.subtitle}\n        />\n      </div>\n\n      <Text\n        className={cn('relative my-auto h-fit text-xl font-bold', {})}\n        as=\"p\"\n        html={\n          item.price\n            ? formatPrice({\n                amount: item.price,\n                currencyCode,\n                locale,\n                removeTrailingZeros: true,\n              })\n            : shopCommon?.free\n        }\n      />\n      {item.mode !== ShippingMethodMode.FREE && (\n        <div\n          className={cn(\n            'bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n          )}\n        >\n          {metafields?.memberOnly}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ShippingMethod\n"],
-  "mappings": "AA6CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA7CN,OAAS,eAAAC,MAAmB,uBAC5B,OAAS,kBAAAC,MAAsB,iCAC/B,OAAS,QAAAC,MAAY,kCACrB,OAAS,MAAAC,MAAU,+BACnB,OAAS,sBAAAC,MAA0B,YAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAS,IAAK,EAAIb,EAAe,EACjDc,EAAaF,GAAc,QAAQ,YAEzC,OACEd,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWiB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCP,EAAeH,EAAMC,CAAK,CAE9B,EACA,UAAWJ,EACT,iJACA,CACE,gCAAiCG,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,UAAAR,EAAC,OAAI,UAAU,WACb,UAAAD,EAACI,EAAA,CACC,UAAWC,EAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMG,EAAK,MACb,EACAR,EAACI,EAAA,CACC,UAAWC,EAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMG,EAAK,SACb,GACF,EAEAR,EAACI,EAAA,CACC,UAAWC,EAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEG,EAAK,MACDN,EAAY,CACV,OAAQM,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDC,GAAY,KAEpB,EACCT,EAAK,OAASF,EAAmB,MAChCN,EAAC,OACC,UAAWK,EACT,wIACF,EAEC,SAAAQ,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOM,EAAQZ",
+  "sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n  item,\n  index,\n  active,\n  toggleShipping,\n  currencyCode,\n  metafields,\n  className = '',\n}: {\n  item: any\n  index: number\n  active: boolean\n  toggleShipping: (item: any, index: number) => void\n  currencyCode: string\n  metafields: any\n  className?: string\n}) => {\n  const { trackingData, locale = 'us' } = useAiuiContext()\n  const shopCommon = trackingData?.common?.copywriting\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          toggleShipping(item, index)\n        }\n      }}\n      className={cn(\n        'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer  justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n        {\n          'cursor-not-allowed opacity-60': item.disabled,\n          'border-brand': active,\n        },\n        className\n      )}\n      onClick={() => toggleShipping(item, index)}\n    >\n      <div className=\"relative\">\n        <Text\n          className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n          as=\"p\"\n          html={item.title}\n        />\n        <Text\n          className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n          as=\"p\"\n          html={item.subtitle}\n        />\n      </div>\n\n      <Text\n        className={cn('relative my-auto h-fit text-xl font-bold', {})}\n        as=\"p\"\n        html={\n          item.price\n            ? formatPrice({\n                amount: item.price,\n                currencyCode,\n                locale,\n                removeTrailingZeros: true,\n              })\n            : shopCommon?.free\n        }\n      />\n      {item.mode !== ShippingMethodMode.FREE && (\n        <div\n          className={cn(\n            'bg-brand absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n          )}\n        >\n          {metafields?.memberOnly}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ShippingMethod\n"],
+  "mappings": "AA6CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA7CN,OAAS,eAAAC,MAAmB,uBAC5B,OAAS,kBAAAC,MAAsB,iCAC/B,OAAS,QAAAC,MAAY,kCACrB,OAAS,MAAAC,MAAU,+BACnB,OAAS,sBAAAC,MAA0B,YAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAS,IAAK,EAAIb,EAAe,EACjDc,EAAaF,GAAc,QAAQ,YAEzC,OACEd,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWiB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCP,EAAeH,EAAMC,CAAK,CAE9B,EACA,UAAWJ,EACT,kKACA,CACE,gCAAiCG,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,UAAAR,EAAC,OAAI,UAAU,WACb,UAAAD,EAACI,EAAA,CACC,UAAWC,EAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMG,EAAK,MACb,EACAR,EAACI,EAAA,CACC,UAAWC,EAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMG,EAAK,SACb,GACF,EAEAR,EAACI,EAAA,CACC,UAAWC,EAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEG,EAAK,MACDN,EAAY,CACV,OAAQM,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDC,GAAY,KAEpB,EACCT,EAAK,OAASF,EAAmB,MAChCN,EAAC,OACC,UAAWK,EACT,wIACF,EAEC,SAAAQ,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOM,EAAQZ",
   "names": ["jsx", "jsxs", "formatPrice", "useAiuiContext", "Text", "cn", "ShippingMethodMode", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "trackingData", "locale", "shopCommon", "e", "ShippingMethod_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as l,Link as r}from"../../../../components/index.js";import{Dialog as g,DialogContent as x}from"../../../../components/index.js";import"react";const b=({data:i,onClose:o,open:a})=>e(g,{open:a,onOpenChange:o,children:t(x,{className:"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden border-none",children:[e(l,{className:"text-[32px] font-bold leading-[1.2] md:text-[20px]",html:i?.title}),t("div",{className:"mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingCoupon?.title}),e("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]",children:i?.shippingCoupon?.list.map((p,s)=>t("li",{className:"text-[16px]",children:[t("span",{children:[s+1,"."]}),e("span",{className:"ml-[4px]",children:p})]},s))}),t("div",{className:"mt-[24px] md:mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingService?.title}),e("div",{className:"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:i?.shippingService?.list.map((p,s)=>t("div",{className:"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]",children:[e(l,{as:"p",className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:p.title}),e("div",{className:"mt-[12px] grid grid-flow-row gap-[4px]",children:p.list.map((n,m)=>e(l,{as:"p",className:"text-[16px] font-semibold leading-[1.2]",children:n},m))})]},s))})]}),e(r,{className:"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline",href:`${i?.terms?.url}`,children:i?.terms?.text})]})]})});export{b as ShippingPolicyModal};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Text as l,Link as r}from"../../../../components/index.js";import{Dialog as g,DialogContent as d}from"../../../../components/index.js";import"react";const b=({data:i,onClose:o,open:a})=>e(g,{open:a,onOpenChange:o,children:t(d,{className:"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden rounded-lg border-none",children:[e(l,{className:"text-[32px] font-bold leading-[1.2] md:text-[20px]",html:i?.title}),t("div",{className:"mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingCoupon?.title}),e("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]",children:i?.shippingCoupon?.list.map((p,s)=>t("li",{className:"text-[16px]",children:[t("span",{children:[s+1,"."]}),e("span",{className:"ml-[4px]",children:p})]},s))}),t("div",{className:"mt-[24px] md:mt-[16px]",children:[e(l,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:i?.shippingService?.title}),e("div",{className:"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:i?.shippingService?.list.map((p,s)=>t("div",{className:"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]",children:[e(l,{as:"p",className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:p.title}),e("div",{className:"mt-[12px] grid grid-flow-row gap-[4px]",children:p.list.map((n,m)=>e(l,{as:"p",className:"text-[16px] font-semibold leading-[1.2]",children:n},m))})]},s))})]}),e(r,{className:"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline",href:`${i?.terms?.url}`,children:i?.terms?.text})]})]})});export{b as ShippingPolicyModal};
 //# sourceMappingURL=ShippingPolicyModal.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
-  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../../../components/index.js'\nimport { useMemo } from 'react'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent className=\"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden border-none\">\n        <Text className=\"text-[32px] font-bold leading-[1.2] md:text-[20px]\" html={data?.title} />\n        <div className=\"mt-[16px]\">\n          <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingCoupon?.title} />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"text-[16px]\" key={index}>\n                <span>{index + 1}.</span>\n                <span className=\"ml-[4px]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingService?.title} />\n            <div className=\"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]\" key={index}>\n                  <Text as=\"p\" className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={item.title} />\n                  <div className=\"mt-[12px] grid grid-flow-row gap-[4px]\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-[16px] font-semibold leading-[1.2]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAoCQ,cAAAA,EAMQ,QAAAC,MANR,oBApCR,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,MAA+D,kCAChF,MAAwB,QA8BjB,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDT,EAACI,EAAA,CAAO,KAAMK,EAAM,aAAcD,EAChC,SAAAP,EAACI,EAAA,CAAc,UAAU,gFACvB,UAAAL,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,MAAO,EACxFN,EAAC,OAAI,UAAU,YACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,gBAAgB,MAAO,EACxGP,EAAC,MAAG,UAAU,gEACX,SAAAO,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCV,EAAC,MAAG,UAAU,cACZ,UAAAA,EAAC,QAAM,UAAAU,EAAQ,EAAE,KAAC,EAClBX,EAAC,QAAK,UAAU,WAAY,SAAAU,EAAK,IAFFC,CAGjC,CACD,EACH,EACAV,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,iBAAiB,MAAO,EACzGP,EAAC,OAAI,UAAU,8DACZ,SAAAO,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCV,EAAC,OAAI,UAAU,mDACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qDAAqD,KAAMQ,EAAK,MAAO,EAC9FV,EAAC,OAAI,UAAU,yCACZ,SAAAU,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBb,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,0CACpB,SAAAU,GADmEC,CAEtE,CACD,EACH,IARqEF,CASvE,CACD,EACH,GACF,EAEAX,EAACG,EAAA,CACC,UAAU,oEACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
+  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../../../../components/index.js'\nimport { useMemo } from 'react'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent className=\"tablet:max-w-[729px] mx-auto w-full max-w-[326px] overflow-hidden rounded-lg border-none\">\n        <Text className=\"text-[32px] font-bold leading-[1.2] md:text-[20px]\" html={data?.title} />\n        <div className=\"mt-[16px]\">\n          <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingCoupon?.title} />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-semibold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"text-[16px]\" key={index}>\n                <span>{index + 1}.</span>\n                <span className=\"ml-[4px]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingService?.title} />\n            <div className=\"mt-[12px] grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#F5F5F7] p-[16px] md:p-[12px]\" key={index}>\n                  <Text as=\"p\" className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={item.title} />\n                  <div className=\"mt-[12px] grid grid-flow-row gap-[4px]\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-[16px] font-semibold leading-[1.2]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"mt-[16px] block text-[16px] font-semibold leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAoCQ,cAAAA,EAMQ,QAAAC,MANR,oBApCR,OAAS,QAAAC,EAAM,QAAAC,MAAY,kCAC3B,OAAS,UAAAC,EAAQ,iBAAAC,MAA+D,kCAChF,MAAwB,QA8BjB,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDT,EAACI,EAAA,CAAO,KAAMK,EAAM,aAAcD,EAChC,SAAAP,EAACI,EAAA,CAAc,UAAU,2FACvB,UAAAL,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,MAAO,EACxFN,EAAC,OAAI,UAAU,YACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,gBAAgB,MAAO,EACxGP,EAAC,MAAG,UAAU,gEACX,SAAAO,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCV,EAAC,MAAG,UAAU,cACZ,UAAAA,EAAC,QAAM,UAAAU,EAAQ,EAAE,KAAC,EAClBX,EAAC,QAAK,UAAU,WAAY,SAAAU,EAAK,IAFFC,CAGjC,CACD,EACH,EACAV,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACE,EAAA,CAAK,UAAU,qDAAqD,KAAMK,GAAM,iBAAiB,MAAO,EACzGP,EAAC,OAAI,UAAU,8DACZ,SAAAO,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCV,EAAC,OAAI,UAAU,mDACb,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,qDAAqD,KAAMQ,EAAK,MAAO,EAC9FV,EAAC,OAAI,UAAU,yCACZ,SAAAU,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBb,EAACE,EAAA,CAAK,GAAG,IAAI,UAAU,0CACpB,SAAAU,GADmEC,CAEtE,CACD,EACH,IARqEF,CASvE,CACD,EACH,GACF,EAEAX,EAACG,EAAA,CACC,UAAU,oEACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
   "names": ["jsx", "jsxs", "Text", "Link", "Dialog", "DialogContent", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as c}from"react/jsx-runtime";import{Text as m,Picture as w,Button as y,Dialog as N,DialogContent as C,DialogTrigger as T}from"../../../../../../components/index.js";import{Content as h,List as E,Root as D,Trigger as H}from"@radix-ui/react-tabs";import{useCallback as x,useEffect as P,useMemo as I,useRef as b,useState as f}from"react";import{cn as L}from"../../../../../../helpers/index.js";import{useBizProductContext as _}from"../../../../BizProductProvider.js";import{withLayout as A}from"../../../../../../shared/Styles.js";import{gaTrack as R}from"../../../../../../shared/track.js";const z=()=>{const{product:l,variant:a}=_(),[g,n]=f(!1),o=I(()=>l?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[l?.payload]),[s,d]=f(o?.ksp?.[0]),i=x(t=>{R({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${a.sku}`,position:o?.title||"",button_name:t||o?.view||""}})},[o?.title,o?.view,a.sku]);return c("div",{className:"ipc-product-detail-highlight",children:[c("div",{className:"flex items-center justify-between",children:[o?.title&&e(m,{size:3,className:"font-bold leading-[1.2]",html:o?.title}),c(N,{open:g,onOpenChange:n,children:[e(T,{asChild:!0,children:e(y,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>i(),children:o?.view})}),e(B,{ksp:o?.ksp||[],clickActiveKspItem:s,gaTrackEvent:i})]})]}),e("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:o?.ksp?.map(t=>e("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:e(m,{size:3,onClick:()=>{d(t),n(!0),i(t?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:t?.title})},t?.title))})]})},B=({ksp:l,clickActiveKspItem:a,gaTrackEvent:g})=>{const n=b([]),o=b(null),[s,d]=f(null),i=x(t=>{const p=l.findIndex(u=>u.title===t?.title),r=n.current[p];if(r&&o.current){const u=o.current,v=r,k=v.offsetLeft-u.offsetWidth/2+v.offsetWidth/2;u.scrollTo({left:k,behavior:"smooth"})}},[a,l]);return P(()=>{a&&(d(a),setTimeout(()=>{i(s)},100))},[a,i]),e(C,{className:"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4",children:c(D,{defaultValue:s?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(h,{value:t.title,children:e(w,{source:`${t?.mobileImg}, ${t?.img} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),c("div",{className:"desktop:py-6 w-full overflow-visible py-4",children:[e("div",{ref:o,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:e("div",{className:"w-fit rounded-full bg-[#EAEAEC]",children:e(E,{className:"flex w-max p-1",children:l.map((t,p)=>e(H,{ref:r=>{r&&(n.current[p]=r)},className:L("lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]",t.title===s?.title&&"bg-white"),onClick:()=>{i(t),d(t),g(t?.title)},value:t.title,children:e(m,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},p))})})}),e("div",{className:"desktop:px-6 mt-4 px-4",children:l.map(t=>e(h,{value:t.title,className:"desktop:text-[18px] text-base font-bold",children:t.description}))})]})]})})};var V=A(z);export{V as default};
+import{jsx as e,jsxs as c}from"react/jsx-runtime";import{Text as f,Picture as w,Button as y,Dialog as N,DialogContent as C,DialogTrigger as T}from"../../../../../../components/index.js";import{Content as x,List as E,Root as D,Trigger as H}from"@radix-ui/react-tabs";import{useCallback as h,useEffect as P,useMemo as I,useRef as k,useState as m}from"react";import{cn as L}from"../../../../../../helpers/index.js";import{useBizProductContext as _}from"../../../../BizProductProvider.js";import{withLayout as A}from"../../../../../../shared/Styles.js";import{gaTrack as R}from"../../../../../../shared/track.js";const z=()=>{const{product:l,variant:a}=_(),[g,s]=m(!1),o=I(()=>l?.payload?.components?.find(t=>t.componentKey==="ProductHighlight")?.data||{},[l?.payload]),[r,d]=m(o?.ksp?.[0]),i=h(t=>{R({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${a.sku}`,position:o?.title||"",button_name:t||o?.view||""}})},[o?.title,o?.view,a.sku]);return c("div",{className:"ipc-product-detail-highlight",children:[c("div",{className:"flex items-center justify-between",children:[o?.title&&e(f,{size:3,className:"font-bold leading-[1.2]",html:o?.title}),c(N,{open:g,onOpenChange:s,children:[e(T,{asChild:!0,children:e(y,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>i(),children:o?.view})}),e(B,{ksp:o?.ksp||[],clickActiveKspItem:r,gaTrackEvent:i})]})]}),e("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:o?.ksp?.map(t=>e("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:e(f,{size:3,onClick:()=>{d(t),s(!0),i(t?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:t?.title})},t?.title))})]})},B=({ksp:l,clickActiveKspItem:a,gaTrackEvent:g})=>{const s=k([]),o=k(null),[r,d]=m(null),i=h(t=>{const n=l.findIndex(u=>u.title===t?.title),p=s.current[n];if(p&&o.current){const u=o.current,v=p,b=v.offsetLeft-u.offsetWidth/2+v.offsetWidth/2;u.scrollTo({left:b,behavior:"smooth"})}},[a,l]);return P(()=>{a&&(d(a),setTimeout(()=>{i(r)},100))},[a,i]),e(C,{className:"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4",children:c(D,{defaultValue:r?.title,className:"w-full overflow-hidden",children:[l?.map(t=>e(x,{value:t.title,children:e(w,{source:`${t?.img}, ${t?.mobileImg} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:t.img.alt,imgClassName:"object-cover h-full"})},t.title)),c("div",{className:"desktop:py-6 w-full overflow-visible py-4",children:[e("div",{ref:o,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:e("div",{className:"w-fit rounded-full bg-[#EAEAEC]",children:e(E,{className:"flex w-max p-1",children:l?.map((t,n)=>e(H,{ref:p=>{p&&(s.current[n]=p)},className:L("lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]",t.title===r?.title&&"bg-white"),onClick:()=>{i(t),d(t),g(t?.title)},value:t.title,children:e(f,{html:t.title,className:"text-[14px] font-bold leading-[1.2]"})},n))})})}),e("div",{className:"desktop:px-6 mt-4 px-4",children:l?.map((t,n)=>e(x,{value:t.title,className:"desktop:text-[18px] text-[14px] font-bold",children:t.description},n+t.title))})]})]})})};var V=A(z);export{V as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport {\n  Text,\n  Picture,\n  Button,\n  Heading,\n  Dialog,\n  DialogContent,\n  DialogTrigger,\n} from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            clickActiveKspItem={activeKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  clickActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  clickActiveKspItem: any\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [clickActiveKspItem, ksp]\n  )\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4\">\n      <Root defaultValue={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.mobileImg}, ${item?.img} 767`}\n              className=\"desktop:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"desktop:py-6 w-full overflow-visible py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"desktop:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"desktop:px-6 mt-4 px-4\">\n            {ksp.map(item => (\n              <Content value={item.title} className=\"desktop:text-[18px] text-base font-bold\">\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "AA8CU,cAAAA,EAEF,QAAAC,MAFE,oBA7CV,OACE,QAAAC,EACA,WAAAC,EACA,UAAAC,EAEA,UAAAC,EACA,iBAAAC,EACA,iBAAAC,MACK,wCACP,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAC7C,OAAS,eAAAC,EAAa,aAAAC,EAAW,WAAAC,EAAS,UAAAC,EAAQ,YAAAC,MAAgB,QAClE,OAAS,MAAAC,MAAU,qCACnB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,cAAAC,MAAkB,qCAC3B,OAAS,WAAAC,MAAe,oCAExB,MAAMC,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAQ,EAAIL,EAAqB,EAC5C,CAACM,EAAMC,CAAO,EAAIT,EAAS,EAAK,EAEhCU,EAAuBZ,EAAQ,IAC5BQ,GAAS,SAAS,YAAY,KAAMK,GAAcA,EAAK,eAAiB,kBAAkB,GAAG,MAAQ,CAAC,EAC5G,CAACL,GAAS,OAAO,CAAC,EAEf,CAACM,EAAeC,CAAgB,EAAIb,EAASU,GAAsB,MAAM,CAAC,CAAC,EAE3EI,EAAelB,EAClBmB,GAAwB,CACvBX,EAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,WAAY,sBAAsBG,EAAQ,GAAG,GAC7C,SAAUG,GAAsB,OAAS,GACzC,YAAaK,GAAcL,GAAsB,MAAQ,EAC3D,CACF,CAAC,CACH,EACA,CAACA,GAAsB,MAAOA,GAAsB,KAAMH,EAAQ,GAAG,CACvE,EAEA,OACEtB,EAAC,OAAI,UAAU,+BACb,UAAAA,EAAC,OAAI,UAAU,oCACZ,UAAAyB,GAAsB,OACrB1B,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMwB,GAAsB,MAAO,EAExFzB,EAACI,EAAA,CAAO,KAAMmB,EAAM,aAAcC,EAChC,UAAAzB,EAACO,EAAA,CAAc,QAAO,GACpB,SAAAP,EAACI,EAAA,CAAO,QAAQ,OAAO,UAAU,2BAA2B,QAAS,IAAM0B,EAAa,EACrF,SAAAJ,GAAsB,KACzB,EACF,EACA1B,EAACgC,EAAA,CACC,IAAKN,GAAsB,KAAO,CAAC,EACnC,mBAAoBE,EACpB,aAAcE,EAChB,GACF,GACF,EACA9B,EAAC,OAAI,UAAU,4CACZ,SAAA0B,GAAsB,KAAK,IAAKC,GAC/B3B,EAAC,OAEC,UAAU,gKAEV,SAAAA,EAACE,EAAA,CACC,KAAM,EACN,QAAS,IAAM,CACb2B,EAAiBF,CAAI,EACrBF,EAAQ,EAAI,EACZK,EAAaH,GAAM,KAAK,CAC1B,EACA,UAAU,qGACV,KAAMA,GAAM,MACd,GAZKA,GAAM,KAab,CACD,EACH,GACF,CAEJ,EAEMK,EAAwB,CAAC,CAC7B,IAAAC,EACA,mBAAAC,EACA,aAAAJ,CACF,IAIM,CACJ,MAAMK,EAAepB,EAA4B,CAAC,CAAC,EAC7CqB,EAAqBrB,EAAuB,IAAI,EAChD,CAACa,EAAeC,CAAgB,EAAIb,EAAc,IAAI,EAEtDqB,EAAyBzB,EAC5BgB,GAAuB,CACtB,MAAMU,EAAWL,EAAI,UAAUN,GAAQA,EAAK,QAAUC,GAAe,KAAK,EACpEW,EAASJ,EAAa,QAAQG,CAAQ,EAE5C,GAAIC,GAAUH,EAAmB,QAAS,CACxC,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,CAACR,EAAoBD,CAAG,CAC1B,EAEA,OAAApB,EAAU,IAAM,CACTqB,IACLL,EAAiBK,CAAkB,EAGnC,WAAW,IAAM,CACfG,EAAuBT,CAAa,CACtC,EAAG,GAAG,EACR,EAAG,CAACM,EAAoBG,CAAsB,CAAC,EAG7CrC,EAACM,EAAA,CAAc,UAAU,qLACvB,SAAAL,EAACS,EAAA,CAAK,aAAckB,GAAe,MAAO,UAAU,yBACjD,UAAAK,GAAK,IAAIN,GACR3B,EAACQ,EAAA,CAAQ,MAAOmB,EAAK,MACnB,SAAA3B,EAACG,EAAA,CACC,OAAQ,GAAGwB,GAAM,SAAS,KAAKA,GAAM,GAAG,OACxC,UAAU,qCACV,IAAKA,EAAK,IAAI,IACd,aAAa,sBACf,GAN+BA,EAAK,KAOtC,CACD,EACD1B,EAAC,OAAI,UAAU,4CACb,UAAAD,EAAC,OACC,IAAKoC,EACL,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,UAAU,oCAEV,SAAApC,EAAC,OAAI,UAAU,kCACb,SAAAA,EAACS,EAAA,CAAK,UAAU,iBACb,SAAAwB,EAAI,IAAI,CAACN,EAAMgB,IACd3C,EAACW,EAAA,CACC,IAAKiC,GAAM,CACLA,IACFT,EAAa,QAAQQ,CAAK,EAAIC,EAElC,EACA,UAAW3B,EACT,qEACAU,EAAK,QAAUC,GAAe,OAAS,UACzC,EACA,QAAS,IAAM,CACbS,EAAuBV,CAAI,EAC3BE,EAAiBF,CAAI,EACrBG,EAAaH,GAAM,KAAK,CAC1B,EAEA,MAAOA,EAAK,MAEZ,SAAA3B,EAACE,EAAA,CAAK,KAAMyB,EAAK,MAAO,UAAU,sCAAsC,GAHnEgB,CAIP,CACD,EACH,EACF,EACF,EACA3C,EAAC,OAAI,UAAU,yBACZ,SAAAiC,EAAI,IAAIN,GACP3B,EAACQ,EAAA,CAAQ,MAAOmB,EAAK,MAAO,UAAU,0CACnC,SAAAA,EAAK,YACR,CACD,EACH,GACF,GACF,EACF,CAEJ,EAEA,IAAOkB,EAAQ1B,EAAWE,CAAgB",
+  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport {\n  Text,\n  Picture,\n  Button,\n  Heading,\n  Dialog,\n  DialogContent,\n  DialogTrigger,\n} from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            clickActiveKspItem={activeKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  clickActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  clickActiveKspItem: any\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [clickActiveKspItem, ksp]\n  )\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] tablet:rounded-2xl [&_.dialog-close-icon]:laptop:size-6 mx-auto w-full max-w-[326px] overflow-hidden rounded-xl border-none p-0 [&_.dialog-close-icon]:size-4\">\n      <Root defaultValue={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"desktop:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"desktop:py-6 w-full overflow-visible py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"desktop:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"w-fit rounded-full bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 h-[38px] shrink-0 rounded-full px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"desktop:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"desktop:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "Picture", "Button", "Dialog", "DialogContent", "DialogTrigger", "Content", "List", "Root", "Trigger", "useCallback", "useEffect", "useMemo", "useRef", "useState", "cn", "useBizProductContext", "withLayout", "gaTrack", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "ProductHighlight_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as g,useState as b}from"react";import{Dialog as v,DialogTrigger as N,DialogContent as C,DialogHeader as y,DialogTitle as E,Grid as p,GridItem as s,Text as D}from"../../../../../../components/index.js";import{useBizProductContext as h}from"../../../../BizProductProvider.js";import G from"./Select.js";import{useAiuiContext as I}from"../../../../../AiuiProvider/index.js";import{formatPrice as w}from"../../../../utils/index.js";import{ShopifyColorOption as k}from"./ShopifyColorOption.js";const P=()=>{const{locale:f="us"}=I(),{compareData:r,product:u}=h(),[d,x]=b();g(()=>{x(r?.availableCompareList[0]?.handle)},[r?.availableCompareList]);const c=[r?.currentProductCompareData?.product,r?.availableCompareList.find(t=>t.handle===d)?.product].filter(Boolean);return r?.specificationKeys?o(v,{children:[e(N,{children:e("button",{className:"text-base font-bold leading-[1.4]",children:"Compare"})}),o(C,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[e(y,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:e(E,{className:"text-sm text-[#6D6D6F]",children:"Compare"})}),o(p,{className:"laptop:gap-8 laptop:py-8 grid-cols-3 py-6",children:[e(s,{span:1}),c.map((t,i)=>e(s,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"size-[200px]",role:"presentation"})},i))]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(s,{span:1,children:e(D,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:r.currentProductCompareData?.shortName||u.title})}),d&&e(s,{span:1,children:e(G,{value:d,onChange:t=>{x(t)},list:r.options})})]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),c.map((t,i)=>{const l=t.variants[0],m=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(s,{span:1,className:"flex h-full",children:o("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:w({locale:f,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),m?.length&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:m.map(a=>e(k,{label:a,className:"size-[16px]"},a))})]})]})},i)})]}),e(p,{className:"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:r.specificationKeys?.map(t=>o(s,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),c.map((i,l)=>{let a=i.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var F=P;export{F as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useEffect as v,useState as b}from"react";import{Dialog as N,DialogTrigger as y,DialogContent as C,DialogHeader as E,DialogTitle as D,Grid as p,GridItem as i,Text as h}from"../../../../../../components/index.js";import{useBizProductContext as G}from"../../../../BizProductProvider.js";import I from"./Select.js";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{formatPrice as k}from"../../../../utils/index.js";import{ShopifyColorOption as P}from"./ShopifyColorOption.js";const z=()=>{const{locale:u="us",copyWriting:x}=w(),{compareData:r,product:g}=G(),[c,f]=b();v(()=>{f(r?.availableCompareList[0]?.handle)},[r?.availableCompareList]);const d=[r?.currentProductCompareData?.product,r?.availableCompareList.find(t=>t.handle===c)?.product].filter(Boolean);return r?.specificationKeys?o(N,{children:[e(y,{className:"text-base font-bold leading-[1.4]",children:x?.compare}),o(C,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[e(E,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:e(D,{className:"text-sm text-[#6D6D6F]",children:x?.compare})}),o(p,{className:"laptop:gap-8 laptop:py-8 grid-cols-3 py-6",children:[e(i,{span:1}),d.map((t,s)=>e(i,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"size-[200px]",role:"presentation"})},s))]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(i,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(i,{span:1,children:e(h,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:r.currentProductCompareData?.shortName||g.title})}),c&&e(i,{span:1,children:e(I,{value:c,onChange:t=>{f(t)},list:r.options})})]}),o(p,{className:"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(i,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),d.map((t,s)=>{const l=t.variants[0],m=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(i,{span:1,className:"flex h-full",children:o("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:k({locale:u,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),m?.length&&o("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:m.map(a=>e(P,{label:a,className:"size-[16px]"},a))})]})]})},s)})]}),e(p,{className:"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:r.specificationKeys?.map(t=>o(i,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),d.map((s,l)=>{let a=s.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var K=z;export{K as default};
 //# sourceMappingURL=CompareModal.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base font-bold leading-[1.4]\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 grid-cols-3 py-6\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img src={product.images[0].url} alt={product.title} className=\"size-[200px]\" role=\"presentation\" />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"size-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">{copyWriting?.compare}</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 grid-cols-3 py-6\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img src={product.images[0].url} alt={product.title} className=\"size-[200px]\" role=\"presentation\" />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"size-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Dialog as i,DialogTrigger as p,DialogContent as r,DialogHeader as g,DialogTitle as c,Grid as d,GridItem as n,Text as a}from"../../../../../../components/index.js";import{useBizProductContext as m}from"../../../../BizProductProvider.js";const D=()=>{const{product:l}=m();return t(i,{children:[o(p,{children:o("button",{className:"text-base font-bold leading-[1.4]",children:"Specs"})}),t(r,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[o(g,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:o(c,{className:"text-sm text-[#6D6D6F]",children:"Specs"})}),o(d,{className:"laptop:gap-8 laptop:py-8 py-6",children:l.metafields?.global?.specifications?.map(({key:s,value:e})=>t(n,{span:6,className:"flex flex-col gap-1",children:[o(a,{className:"text-[16px] font-bold",children:s}),o(a,{className:"text-[16px] font-bold text-[#86868C]",html:e?.trim().toLowerCase()==="true"?"\u2714\uFE0F":e?.trim().toLowerCase()==="false"?"\u274C":e})]}))})]})]})};export{D as SpecsModal};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useAiuiContext as p}from"../../../../../AiuiProvider/index.js";import{Dialog as r,DialogTrigger as c,DialogContent as g,DialogHeader as n,DialogTitle as d,Grid as m,GridItem as x,Text as i}from"../../../../../../components/index.js";import{useBizProductContext as f}from"../../../../BizProductProvider.js";const N=()=>{const{product:s}=f(),{copyWriting:a}=p();return t(r,{children:[o(c,{className:"text-base font-bold leading-[1.4]",children:a?.specs}),t(g,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[o(n,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:o(d,{className:"text-sm text-[#6D6D6F]",children:a?.specs})}),o(m,{className:"laptop:gap-8 laptop:py-8 py-6",children:s.metafields?.global?.specifications?.map(({key:l,value:e})=>t(x,{span:6,className:"flex flex-col gap-1",children:[o(i,{className:"text-[16px] font-bold",children:l}),o(i,{className:"text-[16px] font-bold text-[#86868C]",html:e?.trim().toLowerCase()==="true"?"\u2714\uFE0F":e?.trim().toLowerCase()==="false"?"\u274C":e})]},l))})]})]})};export{N as SpecsModal};
 //# sourceMappingURL=SpecsModal.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
-  "sourcesContent": ["import {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base font-bold leading-[1.4]\">Specs</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">Specs</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={6} className=\"flex flex-col gap-1\">\n              <Text className=\"text-[16px] font-bold\">{key}</Text>\n              <Text\n                className=\"text-[16px] font-bold text-[#86868C]\"\n                html={\n                  value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n                }\n              />\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAkBQ,cAAAA,EAWI,QAAAC,MAXJ,oBAlBR,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,wCACP,OAAS,wBAAAC,MAA4B,oCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EAEzC,OACET,EAACC,EAAA,CACC,UAAAF,EAACG,EAAA,CACC,SAAAH,EAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,EACAC,EAACG,EAAA,CACC,iBAAiB,UACjB,UAAU,8QAEV,UAAAJ,EAACK,EAAA,CAAa,UAAU,8DACtB,SAAAL,EAACM,EAAA,CAAY,UAAU,yBAAyB,iBAAK,EACvD,EACAN,EAACO,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,IAC7Db,EAACO,EAAA,CAAS,KAAM,EAAG,UAAU,sBAC3B,UAAAR,EAACS,EAAA,CAAK,UAAU,wBAAyB,SAAAI,EAAI,EAC7Cb,EAACS,EAAA,CACC,UAAU,uCACV,KACEK,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,GACF,CACD,EACH,GACF,GACF,CAEJ",
-  "names": ["jsx", "jsxs", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "key", "value"]
+  "sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n  const { copyWriting } = useAiuiContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">{copyWriting?.specs}</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n              <Text className=\"text-[16px] font-bold\">{key}</Text>\n              <Text\n                className=\"text-[16px] font-bold text-[#86868C]\"\n                html={\n                  value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n                }\n              />\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAmBM,cAAAA,EAUM,QAAAC,MAVN,oBAnBN,OAAS,kBAAAC,MAAsB,uCAC/B,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,wCACP,OAAS,wBAAAC,MAA4B,oCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EACnC,CAAE,YAAAG,CAAY,EAAIZ,EAAe,EAEvC,OACED,EAACE,EAAA,CACC,UAAAH,EAACI,EAAA,CAAc,UAAU,oCAAqC,SAAAU,GAAa,MAAM,EACjFb,EAACI,EAAA,CACC,iBAAiB,UACjB,UAAU,8QAEV,UAAAL,EAACM,EAAA,CAAa,UAAU,8DACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,yBAA0B,SAAAO,GAAa,MAAM,EACtE,EACAd,EAACQ,EAAA,CAAK,UAAU,gCACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,IAC7Df,EAACQ,EAAA,CAAS,KAAM,EAAa,UAAU,sBACrC,UAAAT,EAACU,EAAA,CAAK,UAAU,wBAAyB,SAAAK,EAAI,EAC7Cf,EAACU,EAAA,CACC,UAAU,uCACV,KACEM,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,IAPsBD,CAQxB,CACD,EACH,GACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "useAiuiContext", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "copyWriting", "key", "value"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as ve,jsx as e,jsxs as y}from"react/jsx-runtime";import{useAiuiContext as U}from"../../../../AiuiProvider/index.js";import{Text as ee,Picture as z,Badge as te}from"../../../../../components/index.js";import{useCallback as S,useMemo as D,useState as v,forwardRef as Z,useRef as A,useEffect as R,useImperativeHandle as le}from"react";import{Swiper as B,SwiperSlide as $}from"swiper/react";import{Navigation as F,Mousewheel as q,Thumbs as j,Pagination as J}from"swiper/modules";import{cn as E}from"../../../../../helpers/index.js";import{GalleryTabType as _}from"./types.js";import{Content as ae,List as ie,Root as oe,Trigger as re}from"@radix-ui/react-tabs";import{useBizProductContext as H}from"../../../BizProductProvider.js";import{useVariantMedia as se}from"../../../hooks/use-variant-media.js";import{SpecsModal as ne}from"./components/SpecsModal.js";import ce from"./components/CompareModal.js";import{formatPrice as de}from"../../../utils/index.js";import{withLayout as ue}from"../../../../../shared/Styles.js";import{gaTrack as pe}from"../../../../../shared/track.js";import{ExposureDetector as be}from"../../../../../components/index.js";const Q=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"})]}),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",{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"})]}),me=()=>{const{copyWriting:t}=U(),{product:s,variant:b,selectedOptions:k}=H(),d=se({product:s,variant:b}),[c,h]=v(null),C=A(null),u=b?.metafields?.component?.custom_media_list;let f,T,I,x;u&&u?.available?(f=u?.product||[],T=u?.scenarios||[],I=u?.keyFeatures||[],x=u?.video||[]):(f=d?.productList,T=d?.sceneList,I=d?.keyFeaturesList,x=d?.videoList);const a=D(()=>[...f,...T,...x],[f,T,x]),p={productList:f,sceneList:T,keyFeaturesList:I,videoList:x},l=D(()=>(s?.payload?.components?.find(r=>r.componentKey==="ProductGallery")?.data||[])?.map(r=>{let Y=p[r?.galleries]||[];if(r?.images&&Array.isArray(r.images)&&r.images.length>0){const O=r.images.map(n=>{const L=[];if(n.image_1920&&n.image_1920.trim()&&L.push(`${n.image_1920} 1920`),n.image_1440&&n.image_1440.trim()&&L.push(`${n.image_1440} 1440`),n.image_1024&&n.image_1024.trim()&&L.push(`${n.image_1024} 1024`),n.image_768&&n.image_768.trim()&&L.push(`${n.image_768} 767`),n.image_390&&n.image_390.trim()&&L.push(`${n.image_390} 390`),L.length>0){const K=L.join(", ");return{image:{url:K,altText:r.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(n=>n!==null);O.length>0&&(Y=O)}return{...r,galleries:Y}}).filter(r=>r.galleries.length>0),[s?.payload,p]),[w,N]=v(l?.[0]),[m,G]=v(0),[P,i]=v(null),g=S(()=>{const o=(m+1)%l.length;G(o),N(l[o]),i(0)},[m,l]),M=S(()=>{const o=m===0?l.length-1:m-1;G(o),N(l[o]);const r=l[o]?.galleries||[];i(r.length-1)},[m,l]);R(()=>{m!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(m)})},[m]),R(()=>{N(l[0]),G(0)},[b?.id]);const V=(o,r)=>{switch(o?.galleryTabType){case _.GALLERY_IMAGE_MAIN:return e(W,{...o,index:r,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});case _.GALLERY_IMAGE_FEATURES:return e(W,{...o,index:r,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});case _.GALLERY_IMAGE_SCENE:return e(W,{...o,index:r,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});case _.GALLERY_VIDEO:return e(fe,{...o,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:y(oe,{className:"relative",value:w?.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((o,r)=>e(ae,{className:"h-full",value:o.tabValue,children:V(o,r)},o.tabValue))}),e(ge,{ref:C,galleryTabs:l,activeGalleryTab:w,setActiveGalleryTab:N,setActiveTabIndex:G,setTargetSlideIndex:i})]})})},ge=Z((t,s)=>{const{galleryTabs:b,activeGalleryTab:k,setActiveGalleryTab:d,setActiveTabIndex:c,setTargetSlideIndex:h}=t,{product:C}=H(),u=A(null),f=A(new Map),T=S((a,p,l)=>{d(p),c(l),h(0),I(a)},[d,c,h]),I=S(a=>{if(u.current){const p=u.current,l=a.currentTarget,w=l.offsetLeft-p.offsetWidth/2+l.offsetWidth/2;p.scrollTo({left:w,behavior:"smooth"})}},[]),x=S(a=>{if(u.current&&b[a]){const p=u.current,l=b[a],w=f.current.get(l.tabValue);if(w){const N=w.offsetLeft-p.offsetWidth/2+w.offsetWidth/2;p.scrollTo({left:N,behavior:"smooth"})}}},[b]);return le(s,()=>({scrollToTab:x})),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(ie,{ref:u,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:b?.map((a,p)=>e(re,{ref:l=>{l?f.current.set(a.tabValue,l):f.current.delete(a.tabValue)},className:E("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",a.tabValue===k?.tabValue&&"bg-white"),onClick:l=>T(l,a,p),value:a.tabValue,children:a.tabLabel},a.tabValue))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:C.metafields?.global?.specifications&&y(ve,{children:[e(ne,{})," | ",e(ce,{})]})})]})}),W=Z((t,s)=>{const{locale:b="us",copyWriting:k}=U(),{variant:d,totalSavings:c}=H(),h=A(null),[C,u]=v(null),[f,T]=v(!0),[I,x]=v(!1),[a,p]=v(null),l=A(null),[w,N]=v(!1),m=D(()=>{if(t?.galleryTabType===_.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===_.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,_.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),G=S(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),P=S(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return R(()=>{a&&t.targetSlideIndex&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{ref:s,className:"h-full",onSwiper:p,onProgress:i=>{T(i.isBeginning),x(i.isEnd)},onTouchEnd:(i,g)=>{i.isBeginning&&i.swipeDirection==="prev"?G():i.isEnd&&i.swipeDirection==="next"&&P()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:C},modules:[q,j,F,J],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,g)=>{const M=`${t.tabValue}-${g}`,V=()=>{pe({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${d.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:g+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},o=i?._responsiveSource||i?.image?.url||"";return e($,{className:"h-full",children:e(be,{onExposure:V,exposureKey:M,threshold:.5,duration:2e3,className:"h-full",children:e(z,{source:o,alt:i?.image?.altText,className:E("h-full",m),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+g)})}),d.availableForSale&&!!c&&!t.index&&e(te,{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:`${de({amount:c,currencyCode:d?.price?.currencyCode,locale:b})} ${k?.off}`}),e("div",{className:E("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:G,children:e(Q,{className:E("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:E("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:P,children:e(X,{className:E("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:u,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[F,j],children:t?.galleries?.map((i,g)=>e($,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(z,{source:i.image?.url,alt:i.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+g))})}),!t?.index&&y("div",{className:"flex items-center gap-2",children:[e(z,{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("div",{ref:l,className:E("line-clamp-2"),style:{},children:e(ee,{html:t?.comment?.content,className:"lg-desktop:text-base 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]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),fe=t=>{const[s,b]=v(null),k=S(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),d=S(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return R(()=>{s&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{className:"h-full",onSwiper:b,onTouchEnd:(c,h)=>{c.isBeginning&&c.swipeDirection==="prev"?k():c.isEnd&&c.swipeDirection==="next"&&d()},modules:[q,j,F,J],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((c,h)=>e($,{className:"h-full",children:y("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:c?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:c?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:c?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:E("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:k,children:e(Q,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:E("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:d,children:e(X,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Re=t=>e("div",{children:"3D View"});var Ve=ue(me);export{Ve as default};
+import{Fragment as ve,jsx as e,jsxs as y}from"react/jsx-runtime";import{useAiuiContext as U}from"../../../../AiuiProvider/index.js";import{Text as ee,Picture as z,Badge as te}from"../../../../../components/index.js";import{useCallback as S,useMemo as D,useState as v,forwardRef as Z,useRef as A,useEffect as R,useImperativeHandle as le}from"react";import{Swiper as B,SwiperSlide as $}from"swiper/react";import{Navigation as F,Mousewheel as q,Thumbs as j,Pagination as J}from"swiper/modules";import{cn as E}from"../../../../../helpers/index.js";import{GalleryTabType as _}from"./types.js";import{Content as ae,List as ie,Root as oe,Trigger as re}from"@radix-ui/react-tabs";import{useBizProductContext as H}from"../../../BizProductProvider.js";import{useVariantMedia as se}from"../../../hooks/use-variant-media.js";import{SpecsModal as ne}from"./components/SpecsModal.js";import ce from"./components/CompareModal.js";import{formatPrice as de}from"../../../utils/index.js";import{withLayout as ue}from"../../../../../shared/Styles.js";import{gaTrack as pe}from"../../../../../shared/track.js";import{ExposureDetector as be}from"../../../../../components/index.js";const Q=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"})]}),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",{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"})]}),me=()=>{const{copyWriting:t}=U(),{product:s,variant:b,selectedOptions:k}=H(),u=se({product:s,variant:b}),[c,h]=v(null),C=A(null),p=b?.metafields?.component?.custom_media_list;let f,T,I,x;p&&p?.available?(f=p?.product||[],T=p?.scenarios||[],I=p?.keyFeatures||[],x=p?.video||[]):(f=u?.productList,T=u?.sceneList,I=u?.keyFeaturesList,x=u?.videoList);const a=D(()=>[...f,...T,...x],[f,T,x]),d={productList:f,sceneList:T,keyFeaturesList:I,videoList:x},l=D(()=>(s?.payload?.components?.find(r=>r.componentKey==="ProductGallery")?.data||[])?.map(r=>{let Y=d[r?.galleries]||[];if(r?.images&&Array.isArray(r.images)&&r.images.length>0){const O=r.images.map(n=>{const L=[];if(n.image_1920&&n.image_1920.trim()&&L.push(`${n.image_1920} 1920`),n.image_1440&&n.image_1440.trim()&&L.push(`${n.image_1440} 1440`),n.image_1024&&n.image_1024.trim()&&L.push(`${n.image_1024} 1024`),n.image_768&&n.image_768.trim()&&L.push(`${n.image_768} 767`),n.image_390&&n.image_390.trim()&&L.push(`${n.image_390} 390`),L.length>0){const K=L.join(", ");return{image:{url:K,altText:r.comment?.content||""},_fromImages:!0,_responsiveSource:K}}return null}).filter(n=>n!==null);O.length>0&&(Y=O)}return{...r,galleries:Y}}).filter(r=>r.galleries.length>0),[s?.payload,d]),[w,N]=v(l?.[0]),[m,G]=v(0),[P,i]=v(null),g=S(()=>{const o=(m+1)%l.length;G(o),N(l[o]),i(0)},[m,l]),M=S(()=>{const o=m===0?l.length-1:m-1;G(o),N(l[o]);const r=l[o]?.galleries||[];i(r.length-1)},[m,l]);R(()=>{m!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(m)})},[m]),R(()=>{N(l[0]),G(0)},[b?.id]);const V=(o,r)=>{switch(o?.galleryTabType){case _.GALLERY_IMAGE_MAIN:return e(W,{...o,index:r,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});case _.GALLERY_IMAGE_FEATURES:return e(W,{...o,index:r,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});case _.GALLERY_IMAGE_SCENE:return e(W,{...o,index:r,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});case _.GALLERY_VIDEO:return e(fe,{...o,onNextTab:g,onPrevTab:M,targetSlideIndex:P,onSlideChange:()=>i(null)});default:return null}};return e("div",{id:"ipc-product-gallery",children:y(oe,{className:"relative",value:w?.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((o,r)=>e(ae,{className:"h-full",value:o.tabValue,children:V(o,r)},o.tabValue))}),e(ge,{ref:C,galleryTabs:l,activeGalleryTab:w,setActiveGalleryTab:N,setActiveTabIndex:G,setTargetSlideIndex:i})]})})},ge=Z((t,s)=>{const{galleryTabs:b,activeGalleryTab:k,setActiveGalleryTab:u,setActiveTabIndex:c,setTargetSlideIndex:h}=t,{product:C}=H(),p=A(null),f=A(new Map),T=S((a,d,l)=>{u(d),c(l),h(0),I(a)},[u,c,h]),I=S(a=>{if(p.current){const d=p.current,l=a.currentTarget,w=l.offsetLeft-d.offsetWidth/2+l.offsetWidth/2;d.scrollTo({left:w,behavior:"smooth"})}},[]),x=S(a=>{if(p.current&&b[a]){const d=p.current,l=b[a],w=f.current.get(l.tabValue);if(w){const N=w.offsetLeft-d.offsetWidth/2+w.offsetWidth/2;d.scrollTo({left:N,behavior:"smooth"})}}},[b]);return le(s,()=>({scrollToTab:x})),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(ie,{ref:p,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:b?.map((a,d)=>e(re,{ref:l=>{l?f.current.set(a.tabValue,l):f.current.delete(a.tabValue)},className:E("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",a.tabValue===k?.tabValue&&"bg-white"),onClick:l=>T(l,a,d),value:a.tabValue,children:a.tabLabel},a.tabValue+d))})}),e("div",{className:"laptop:gap-2 laptop:flex hidden",children:C.metafields?.global?.specifications&&y(ve,{children:[e(ne,{})," | ",e(ce,{})]})})]})}),W=Z((t,s)=>{const{locale:b="us",copyWriting:k}=U(),{variant:u,totalSavings:c}=H(),h=A(null),[C,p]=v(null),[f,T]=v(!0),[I,x]=v(!1),[a,d]=v(null),l=A(null),[w,N]=v(!1),m=D(()=>{if(t?.galleryTabType===_.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===_.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,_.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),G=S(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),P=S(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return R(()=>{a&&t.targetSlideIndex&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{ref:s,className:"h-full",onSwiper:d,onProgress:i=>{T(i.isBeginning),x(i.isEnd)},onTouchEnd:(i,g)=>{i.isBeginning&&i.swipeDirection==="prev"?G():i.isEnd&&i.swipeDirection==="next"&&P()},pagination:{clickable:!0,el:h.current},thumbs:{swiper:C},modules:[q,j,F,J],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((i,g)=>{const M=`${t.tabValue}-${g}`,V=()=>{pe({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${u.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:g+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},o=i?._responsiveSource||i?.image?.url||"";return e($,{className:"h-full",children:e(be,{onExposure:V,exposureKey:M,threshold:.5,duration:2e3,className:"h-full",children:e(z,{source:o,alt:i?.image?.altText,className:E("h-full",m),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+g)})}),u.availableForSale&&!!c&&!t.index&&e(te,{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:`${de({amount:c,currencyCode:u?.price?.currencyCode,locale:b})} ${k?.off}`}),e("div",{className:E("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:G,children:e(Q,{className:E("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:E("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:P,children:e(X,{className:E("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:p,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[F,j],children:t?.galleries?.map((i,g)=>e($,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:e(z,{source:i.image?.url,alt:i.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+g))})}),!t?.index&&y("div",{className:"flex items-center gap-2",children:[e(z,{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("div",{ref:l,className:E("line-clamp-2"),style:{},children:e(ee,{html:t?.comment?.content,className:"lg-desktop:text-base 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]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),fe=t=>{const[s,b]=v(null),k=S(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),u=S(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return R(()=>{s&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),y("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(B,{className:"h-full",onSwiper:b,onTouchEnd:(c,h)=>{c.isBeginning&&c.swipeDirection==="prev"?k():c.isEnd&&c.swipeDirection==="next"&&u()},modules:[q,j,F,J],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((c,h)=>e($,{className:"h-full",children:y("video",{controls:!0,className:"size-full object-cover",children:[e("track",{kind:"captions"}),e("source",{src:c?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:c?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:c?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+h))}),e("div",{className:E("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:k,children:e(Q,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:E("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:u,children:e(X,{className:"tablet:size-10 lg-desktop:size-12"})})]})},Re=t=>e("div",{children:"3D View"});var Ve=ue(me);export{Ve as default};
 //# sourceMappingURL=index.js.map