@anker-in/headless-ui 1.1.16 → 1.1.17-alpha-1765978730

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any, index: number) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div key={`${componentData.blockType}-${index}`} className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return (\n                <Spacer\n                  key={`${componentData.blockType}-${index}`}\n                  data={componentData}\n                  style={componentData?.style}\n                  className=\"!bg-transparent\"\n                />\n              )\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nSubBox.displayName = 'SubBox'\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    autoplay={false}\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                  loading=\"lazy\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\nMediaPlayerSticky.displayName = 'MediaPlayerSticky'\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "index", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withLayout(MemberEquity)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "MemberEquity", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
 }

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

@@ -1,4 +1,4 @@
-import{Fragment as $,jsx as s,jsxs as a}from"react/jsx-runtime";import{Picture as x,Text as r,Button as G,Container as j,Link as u,Heading as y,Grid as q,GridItem as z}from"../../components/index.js";import{Search as K,Close as H}from"../HeaderNavigation/icons/index.js";import{forwardRef as M,useCallback as w,useMemo as C,useState as L}from"react";import{useAiuiContext as V}from"../AiuiProvider/index.js";import{SearchStatus as m}from"./types.js";import{debounce as J}from"es-toolkit";import{cn as b,atobID as D,highlightSearchWord as O}from"../../helpers/utils.js";const Q=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),U=M(({data:t,onSearch:l,onClose:n,searchResult:o,isSearching:c,keywords:p},P)=>{const{locale:d="us",copyWriting:Y}=V(),[i,S]=L(""),[f,N]=L(!1),E=J(e=>{l(e)},300),I=w(e=>{e.key==="Enter"&&!f&&l(i)},[f,i,l]),T=C(()=>Array.isArray(p)&&p?.length?p.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[p,t?.popularWords]),A=w(e=>{switch(e.type){case"Product":return`/products${e.path}?q=${i.toLowerCase()}`;case"Article":return`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${i.toLowerCase()}`;default:break}},[i]),k=C(()=>{if(i){if(o?.totalCount)return m.Predict;if(!c)return m.Empty}else return m.Default},[o?.totalCount,i]);return a(j,{childClassName:"!bg-white",className:"relative",ref:P,children:[s("style",{jsx:!0,global:!0,children:`
+import{Fragment as S,jsx as a,jsxs as s}from"react/jsx-runtime";import{Picture as x,Text as r,Button as j,Container as q,Link as u,Heading as y,Grid as z,GridItem as K}from"../../components/index.js";import{Search as H,Close as M}from"../HeaderNavigation/icons/index.js";import{forwardRef as V,useCallback as w,useMemo as C,useState as L}from"react";import{useAiuiContext as J}from"../AiuiProvider/index.js";import{SearchStatus as m}from"./types.js";import{debounce as O}from"es-toolkit";import{cn as b,atobID as D,highlightSearchWord as Q}from"../../helpers/utils.js";const U=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),F=V(({data:t,onSearch:l,onClose:n,searchResult:o,isSearching:c,keywords:p},P)=>{const{locale:d="us",copyWriting:Y}=J(),[i,E]=L(""),[f,N]=L(!1),I=O(e=>{l(e)},300),T=w(e=>{e.key==="Enter"&&!f&&l(i)},[f,i,l]),A=C(()=>Array.isArray(p)&&p?.length?p.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[p,t?.popularWords]),B=w(e=>{switch(e.type){case"Product":return`/products${e.path}?q=${i.toLowerCase()}`;case"Article":return`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${i.toLowerCase()}`;default:break}},[i]),k=C(()=>{if(i){if(o?.totalCount)return m.Predict;if(!c)return m.Empty}else return m.Default},[o?.totalCount,i]);return s(q,{childClassName:"!bg-white",className:"relative",ref:P,children:[a("style",{jsx:!0,global:!0,children:`
             .navigation-search-component input:-webkit-autofill,
             .navigation-search-component input:-webkit-autofill:hover,
             .navigation-search-component input:-webkit-autofill:focus {
@@ -7,5 +7,5 @@ import{Fragment as $,jsx as s,jsxs as a}from"react/jsx-runtime";import{Picture a
               transition: background-color 9999s ease-in-out 0s !important;
               caret-color: #000;
             }
-          `}),a("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[s("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:I,onChange:e=>{S(e.target.value),e.target.value&&E(e.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none",placeholder:t?.placeholder}),a("div",{className:"flex items-center gap-3",children:[s(K,{className:"size-5 cursor-pointer",onClick:()=>l(i)}),s("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),s(H,{className:"size-5 cursor-pointer",onClick:n})]})]}),s("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===m.Predict?a($,{children:[a("div",{children:[a("div",{className:"flex items-center gap-2",children:[s(r,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),o?.items?.length>6&&s(G,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),s("div",{className:"mt-2 flex flex-col",children:o?.items?.filter(e=>Q(e)).slice(0,6)?.map(e=>s(u,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:A(e),children:s(r,{html:O(e.title,i),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),a("div",{children:[s(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[s(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative",children:[s(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[s(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:b("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),s(r,{html:t?.advertisingSubtitle||"20.000mAh",className:b("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),o?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const g=e?.variants?.[0],h=`${g?.image?.url||e?.images?.[0]?.url}`,v=e?.title||e?.name,B=e?.description,W=e?.badge||"",_=`/products/${e?.handle}?variant=${D(g?.id)}`;return s(F,{productImage:h,productName:v,productDesc:B,productBadge:W,listingLink:_},e.id)})]})]})]}):a($,{children:[k===m.Empty&&s(r,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{children:[s(r,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"mt-2",children:[s(X,{data:t,keywords:T,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&s(q,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>s(z,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:s("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),a("div",{children:[s(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[s(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[s(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[s(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),s(r,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const g=e?.custom_description,h=e?.badge||"",v=`/products/${e?.handle}?variant=${D(e?.shopify_id)}`;return s(F,{productImage:e?.image,productName:e?.name,productDesc:g,productBadge:h,listingLink:v},e.id)})]})]})]})})]})}),F=({productImage:t,productName:l,productDesc:n,productBadge:o,className:c,listingLink:p})=>a("div",{className:b("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",c),children:[s("div",{className:"shrink-0",children:s(x,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),a("div",{className:"relative",children:[s("div",{className:" h-[24px] ",children:o&&s(r,{as:"p",html:o,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),a("div",{children:[s(u,{href:p,className:"no-underline hover:text-current",children:s(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l})}),n&&s(r,{as:"p",html:n,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),X=({data:t,keywords:l,locale:n})=>s("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:l?.map((o,c)=>s("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${o?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:o},c))});var ie=U;export{Q as canSearch,ie as default};
+          `}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[a("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:T,onChange:e=>{E(e.target.value),e.target.value&&I(e.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none ",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[a(H,{className:"size-5 cursor-pointer",onClick:()=>l(i)}),a("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),a(M,{className:"size-5 cursor-pointer",onClick:n})]})]}),a("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===m.Predict?s(S,{children:[s("div",{children:[s("div",{className:"flex items-center gap-2",children:[a(r,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),o?.items?.length>6&&a(j,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),a("div",{className:"mt-2 flex flex-col",children:o?.items?.filter(e=>U(e)).slice(0,6)?.map(e=>a(u,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:B(e),children:a(r,{html:Q(e.title,i),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),s("div",{children:[a(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[a(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:s("div",{className:"relative",children:[a(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[a(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:b("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),a(r,{html:t?.advertisingSubtitle||"20.000mAh",className:b("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),o?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const g=e?.variants?.[0],h=`${g?.image?.url||e?.images?.[0]?.url}`,v=e?.title||e?.name,W=e?.description,_=e?.badge||"",G=`/products/${e?.handle}?variant=${D(g?.id)}`;return a($,{productImage:h,productName:v,productDesc:W,productBadge:_,listingLink:G},e.id)})]})]})]}):s(S,{children:[k===m.Empty&&a(r,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{children:[a(r,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"mt-2",children:[a(X,{data:t,keywords:A,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&a(z,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>a(K,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:a("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[a(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[a(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:s("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[a(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[a(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),a(r,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const g=e?.custom_description,h=e?.badge||"",v=`/products/${e?.handle}?variant=${D(e?.shopify_id)}`;return a($,{productImage:e?.image,productName:e?.name,productDesc:g,productBadge:h,listingLink:v},e.id)})]})]})]})})]})});F.displayName="NavigationSearch";const $=({productImage:t,productName:l,productDesc:n,productBadge:o,className:c,listingLink:p})=>s("div",{className:b("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",c),children:[a("div",{className:"shrink-0",children:a(x,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),s("div",{className:"relative",children:[a("div",{className:" h-[24px] ",children:o&&a(r,{as:"p",html:o,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),s("div",{children:[a(u,{href:p,className:"no-underline hover:text-current",children:a(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l})}),n&&a(r,{as:"p",html:n,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),X=({data:t,keywords:l,locale:n})=>a("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:l?.map((o,c)=>a("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${o?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:o},c))});var ie=F;export{U as canSearch,ie as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
-  "sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          onSearch(searchValue)\n        }\n      },\n      [isComposing, searchValue, onSearch]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        switch (item.type) {\n          case 'Product':\n            return `/products${item.path}?q=${searchValue.toLowerCase()}`\n          case 'Article':\n            return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n          default:\n            break\n        }\n      },\n      [searchValue]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue])\n\n    return (\n      <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n        <style jsx global>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black\">\n          <input\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-2\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"relative\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"laptop:h-[120px] h-[114px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className={cn('font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className={cn('text-sm font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, 7)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"laptop:h-[120px] h-[114px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className=\"font-bold text-white\"\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className=\"text-sm font-bold text-white\"\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110', className)}>\n      <div className=\"shrink-0\">\n        <Picture\n          source={productImage}\n          width={90}\n          height={90}\n          className=\"size-[96px]\"\n          imgClassName=\"object-contain h-full\"\n        />\n      </div>\n      <div className=\"relative\">\n        <div className=\" h-[24px] \">\n          {productBadge && (\n            <Text\n              as=\"p\"\n              html={productBadge}\n              className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n            />\n          )}\n        </div>\n        <div>\n          <Link href={listingLink} className=\"no-underline hover:text-current\">\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n          </Link>\n          {productDesc && (\n            <Text\n              as=\"p\"\n              html={productDesc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n          key={index}\n          className=\"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default NavigationSearch\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          onSearch(searchValue)\n        }\n      },\n      [isComposing, searchValue, onSearch]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        switch (item.type) {\n          case 'Product':\n            return `/products${item.path}?q=${searchValue.toLowerCase()}`\n          case 'Article':\n            return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n          default:\n            break\n        }\n      },\n      [searchValue]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue])\n\n    return (\n      <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n        {/* TODO: @Seasail \u7528tailwind \u539F\u5B50\u7C7B\u6216\u8005\u884C\u5185\u6837\u5F0F(Inline Style)\u4EE3\u66FF jsx global */}\n        <style jsx global>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black\">\n          <input\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none \"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-2\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"relative\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"laptop:h-[120px] h-[114px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className={cn('font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className={cn('text-sm font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, 7)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"laptop:h-[120px] h-[114px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className=\"font-bold text-white\"\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className=\"text-sm font-bold text-white\"\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110', className)}>\n      <div className=\"shrink-0\">\n        <Picture\n          source={productImage}\n          width={90}\n          height={90}\n          className=\"size-[96px]\"\n          imgClassName=\"object-contain h-full\"\n        />\n      </div>\n      <div className=\"relative\">\n        <div className=\" h-[24px] \">\n          {productBadge && (\n            <Text\n              as=\"p\"\n              html={productBadge}\n              className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n            />\n          )}\n        </div>\n        <div>\n          <Link href={listingLink} className=\"no-underline hover:text-current\">\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n          </Link>\n          {productDesc && (\n            <Text\n              as=\"p\"\n              html={productDesc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n          key={index}\n          className=\"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default NavigationSearch\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useAiuiContext", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "className", "index", "NavigationSearch_default"]
 }

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { Media } from '../../types/props.js';
+/**
+ * PromotionalBar 业务组件数据接口
+ */
+export interface PromotionalBarData {
+    title?: string;
+    /** 组件标题 */
+    subtitle?: string;
+    /** 组件内容标题 */
+    contentTitle?: string;
+    /** 组件内容描述 */
+    contentDesc?: string;
+    /** 按钮文本 */
+    buttonText?: string;
+    /** 按钮链接 */
+    buttonLink?: string;
+    /** 背景图片 */
+    bgImage1919?: Media;
+    bgImage1439?: Media;
+    bgImage1023?: Media;
+    bgImage767?: Media;
+    bgImage390?: Media;
+}
+export interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: PromotionalBarData;
+}
+/**
+ * PromotionalBar - 推广栏
+ *
+ * @description 推广栏
+ */
+declare const PromotionalBar: React.ForwardRefExoticComponent<PromotionalBarProps & React.RefAttributes<HTMLDivElement>>;
+export default PromotionalBar;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import*as i from"react";import{cn as x}from"../../helpers/index.js";import{Heading as d,Button as b,Picture as f,Container as v}from"../../components/index.js";const s=i.forwardRef(({className:m,data:t,...c},u)=>{const{bgImage1919:o,bgImage1439:a,bgImage1023:l,bgImage767:r,bgImage390:n}=t,g=i.useMemo(()=>`${o?.url}, ${a?.url} 1919, ${l?.url} 1439, ${r?.url} 1023, ${n?.url} 767`,[o?.url,a?.url,l?.url,r?.url,n?.url]);return e("div",{ref:u,className:x("w-full",m),...c,children:e(v,{className:"laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",children:p("div",{className:"promotional-bar-content rounded-box relative h-full overflow-hidden",children:[p("div",{className:"laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4",children:[t.contentTitle&&e(d,{className:"text-[#F5F6F7]",size:3,children:t.contentTitle}),t.contentDesc&&e("p",{className:"laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",children:t.contentDesc}),e("div",{className:"laptop:mt-4 mt-1",children:t.buttonText&&e(b,{as:"a",variant:"link",className:"!p-0 text-[#F5F6F7]",href:t.buttonLink,children:t.buttonText})})]}),e(f,{source:g,className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"})]})})})});s.displayName="PromotionalBar";var M=s;export{M as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture, Container } from '../../components/index.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  title?: string\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  subtitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 */\n  bgImage1919?: Media\n  bgImage1439?: Media\n  bgImage1023?: Media\n  bgImage767?: Media\n  bgImage390?: Media\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ className, data, ...props }, ref) => {\n  const { bgImage1919, bgImage1439, bgImage1023, bgImage767, bgImage390 } = data\n  const pictureSource = React.useMemo(() => {\n    return `${bgImage1919?.url}, ${bgImage1439?.url} 1919, ${bgImage1023?.url} 1439, ${bgImage767?.url} 1023, ${bgImage390?.url} 767`\n  }, [bgImage1919?.url, bgImage1439?.url, bgImage1023?.url, bgImage767?.url, bgImage390?.url])\n  return (\n    <div ref={ref} className={cn('w-full', className)} {...props}>\n      {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n      <Container className=\"laptop:h-[192px] lg-desktop:h-[240px] h-[240px]\">\n        <div className=\"promotional-bar-content rounded-box relative h-full overflow-hidden\">\n          <div className=\"laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 relative z-20 flex h-full flex-col p-4\">\n            {data.contentTitle && (\n              <Heading className=\"text-[#F5F6F7]\" size={3}>\n                {data.contentTitle}\n              </Heading>\n            )}\n            {data.contentDesc && (\n              <p className=\"laptop:text-[16px] laptop:line-clamp-2 lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#F5F6F7]\">\n                {data.contentDesc}\n              </p>\n            )}\n            <div className=\"laptop:mt-4 mt-1\">\n              {data.buttonText && (\n                <Button as=\"a\" variant=\"link\" className=\"!p-0 text-[#F5F6F7]\" href={data.buttonLink}>\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture source={pictureSource} className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n        </div>\n      </Container>\n    </div>\n  )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default PromotionalBar\n"],
+  "mappings": "aAkDU,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAhDV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,aAAAC,MAAiB,4BAoCpD,MAAMC,EAAiBN,EAAM,WAAgD,CAAC,CAAE,UAAAO,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACnH,KAAM,CAAE,YAAAC,EAAa,YAAAC,EAAa,YAAAC,EAAa,WAAAC,EAAY,WAAAC,CAAW,EAAIP,EACpEQ,EAAgBhB,EAAM,QAAQ,IAC3B,GAAGW,GAAa,GAAG,KAAKC,GAAa,GAAG,UAAUC,GAAa,GAAG,UAAUC,GAAY,GAAG,UAAUC,GAAY,GAAG,OAC1H,CAACJ,GAAa,IAAKC,GAAa,IAAKC,GAAa,IAAKC,GAAY,IAAKC,GAAY,GAAG,CAAC,EAC3F,OACEjB,EAAC,OAAI,IAAKY,EAAK,UAAWT,EAAG,SAAUM,CAAS,EAAI,GAAGE,EAErD,SAAAX,EAACO,EAAA,CAAU,UAAU,kDACnB,SAAAN,EAAC,OAAI,UAAU,sEACb,UAAAA,EAAC,OAAI,UAAU,2JACZ,UAAAS,EAAK,cACJV,EAACI,EAAA,CAAQ,UAAU,iBAAiB,KAAM,EACvC,SAAAM,EAAK,aACR,EAEDA,EAAK,aACJV,EAAC,KAAE,UAAU,mHACV,SAAAU,EAAK,YACR,EAEFV,EAAC,OAAI,UAAU,mBACZ,SAAAU,EAAK,YACJV,EAACK,EAAA,CAAO,GAAG,IAAI,QAAQ,OAAO,UAAU,sBAAsB,KAAMK,EAAK,WACtE,SAAAA,EAAK,WACR,EAEJ,GACF,EACAV,EAACM,EAAA,CAAQ,OAAQY,EAAe,UAAU,wBAAwB,aAAa,sBAAsB,GACvG,EACF,EACF,CAEJ,CAAC,EAEDV,EAAe,YAAc,iBAC7B,IAAOW,EAAQX",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "Container", "PromotionalBar", "className", "data", "props", "ref", "bgImage1919", "bgImage1439", "bgImage1023", "bgImage767", "bgImage390", "pictureSource", "PromotionalBar_default"]
+}

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

@@ -1,2 +1,2 @@
-import{Fragment as P,jsx as e,jsxs as l}from"react/jsx-runtime";import{Heading as N,Tabs as G,TabsList as W,TabsTrigger as K,TabsContent as w,Text as f,Picture as _,Link as U,Button as S,DropdownMenu as H,DropdownMenuTrigger as V,DropdownMenuContent as q,DropdownMenuItem as J,LoadingDots as C}from"../../components/index.js";import{DownArrow as Q}from"../HeaderNavigation/icons/index.js";import{useMemo as c,useRef as X,useState as L}from"react";import{cn as B,atobID as Y,highlightSearchWord as k}from"../../helpers/utils.js";import{useAiuiContext as I}from"../AiuiProvider/index.js";import{formatVariantPrice as Z}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as u}from"./types.js";const O=({product:t,onSecondaryButton:o,onPrimaryButton:a,searchValue:n,variantData:g})=>{const i=c(()=>g||t?.variants?.[0],[t,g]),{locale:d="us",copyWriting:p}=I(),h=c(()=>`/products/${t?.handle}?variant=${Y(i?.id)}`,[t?.handle,i?.id]),m=i?.coupons?.[0],{price:r,basePrice:T}=Z({locale:d,amount:m?m.variant_price4wscode:i?.price,baseAmount:m?i?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),y=c(()=>t?.tags?.filter?.(x=>x?.startsWith?.("CLtag"))?.map?.(x=>x?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"?l(U,{href:t?.advertisingLink,className:"h-full",children:[e(_,{source:t?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),l("div",{className:"desktop:p-6 [&_img]:hover:duration-600 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[e(f,{html:t?.advertisingTitle,className:"desktop:text-[18px] text-sm font-bold text-white"}),e(N,{size:3,html:t?.advertisingSubtitle,className:"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white"})]})]}):l("a",{href:h,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(_,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${i?.image?.url||t?.images?.[0]?.url}}`,alt:t.title,imgClassName:"object-cover size-full"})}),l("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[l("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:y?.map(x=>e(f,{as:"p",html:x,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"}))}),e(f,{className:"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:k(t?.title||"",n||"")}),e(f,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:k(t.description,n||"")})]}),l("div",{children:[e("div",{className:"mb-2 flex items-center",children:i?.availableForSale?l(P,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:i?.availableForSale&&r||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:i?.availableForSale&&T||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:p?.soldOutText||"Sold Out"})}),l("div",{className:B("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[p?.learnMoreText&&e(S,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,onClick:()=>o?.(),children:p?.learnMoreText}),p?.shopNowText&&e(S,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,onClick:()=>a?.(),children:p?.shopNowText})]})]})]})]})})},ee=({blog:t,searchValue:o})=>{const{copyWriting:a}=I(),n=c(()=>`blogs/${t?.handle}/${t?.handle.replace("storefront-","")}`,[t]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:l("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:e(_,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),l("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(N,{size:3,html:k(t?.title,o)}),e(f,{html:k(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(S,{as:"a",href:n,variant:"secondary",size:"lg",children:a?.learnMoreText||"Learn More"})})]})]})})},te=({searchValue:t,page:o})=>{const{copyWriting:a,locale:n="us"}=I(),g=c(()=>`${n==="us"?"":`/${n}`}/${o?.handle}`,[o,n]);return l("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(N,{size:3,html:k(o?.name,t)}),e(f,{as:"p",html:k(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(S,{as:"a",href:g,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:a?.learnMoreText||"Learn More"})]})},z=({url:t,label:o})=>l("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(_,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(f,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),D=({products:t,title:o,buildProps:a,onSecondaryButton:n,onPrimaryButton:g})=>{const{products:i}=a||{};return l("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(N,{size:4,weight:"bold",html:o}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((d,p)=>{const h=i?.find(r=>r.handle===d.handle),m=h?.variants?.find(r=>r.sku===d.sku);return e(O,{product:h,variantData:m,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>g?.()},d.id+p)})})]})},se=({searchResult:t,searchValue:o,data:a,onSecondaryButton:n,onPrimaryButton:g,onChangeSort:i,loading:d,searchResultCount:p,onChangeTab:h,buildProps:m})=>{const[r,T]=L(a?.tabs?.[0]),y=X(!1),[x,R]=L(!1),[E,j]=L({[u.PRODUCTS]:a?.tabs?.find(s=>s.tabType===u.PRODUCTS)?.sortKeys?.[0],[u.BLOGS]:a?.tabs?.find(s=>s.tabType===u.BLOGS)?.sortKeys?.[0],[u.PAGES]:a?.tabs?.find(s=>s.tabType===u.PAGES)?.sortKeys?.[0]}),b=c(()=>t?.products||[],[t]),M=c(()=>t?.blogs||[],[t]),A=c(()=>t?.pages||[],[t]),$=c(()=>Object.values(p||{}).reduce((s,v)=>s+v,0),[p]),F=c(()=>{const s={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&b?.length&&(b?.length>=8?(b?.splice(7,0,s),y.current=!0):(b?.push(s),y.current=!0)),b},[r,b]);return l("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[e(N,{size:4,weight:"bold",html:a?.title?.replace("$totalCount",$?.toString())?.replace("$inputValue",`"${o}"`)}),e("div",{className:"mt-6",children:l(G,{className:"ipc_search_page_tabs",defaultValue:"products",children:[l("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(W,{children:a?.tabs?.map(s=>l(K,{onClick:()=>{T(s),h?.(s?.tabType)},defaultValue:"products",value:s.tabType,children:[s.label," (",p?.[s.tabType],")"]},s.id))}),l(H,{onOpenChange:R,children:[e(V,{asChild:!0,children:l("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[r?.sortLabel," ",E?.[r?.tabType]?.label," ",e(Q,{className:B("inline-block size-4",{"rotate-180":x})})]})}),e(q,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:r?.sortKeys?.map(s=>e(J,{className:B("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"font-bold":E?.[r?.tabType]?.value===s.value}),onClick:()=>{y.current=!1,i?.(r?.tabType,s),j(v=>({...v,[r?.tabType]:s}))},children:s.label},s.id))})]})]}),l(w,{value:u.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:F?.map((s,v)=>e(O,{searchValue:o,product:s,onSecondaryButton:()=>n?.(s),onPrimaryButton:()=>g?.(s)},s.id+v))}),d?e("div",{className:"mt-6 flex w-full justify-center",children:e(C,{})}):!b?.length&&l(P,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]}),e(w,{value:u.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:l("div",{children:[M?.map(s=>e(ee,{blog:s,searchValue:o},s.id)),d?e("div",{className:"mt-6 flex justify-center",children:e(C,{})}):!M?.length&&l(P,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]})}),l(w,{value:u.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:A?.map((s,v)=>e(te,{page:s,searchValue:o},s.global_id+v))}),d?e("div",{className:"mt-6 flex justify-center",children:e(C,{})}):!A?.length&&l(P,{children:[e(z,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(D,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]})]})})]})};var me=se;export{me as default};
+import{Fragment as P,jsx as e,jsxs as l}from"react/jsx-runtime";import{Heading as N,Tabs as G,TabsList as W,TabsTrigger as K,TabsContent as C,Text as f,Picture as _,Link as U,Button as S,DropdownMenu as H,DropdownMenuTrigger as V,DropdownMenuContent as q,DropdownMenuItem as J,LoadingDots as L}from"../../components/index.js";import{DownArrow as Q}from"../HeaderNavigation/icons/index.js";import{useMemo as c,useRef as X,useState as B}from"react";import{cn as I,atobID as Y,highlightSearchWord as k}from"../../helpers/utils.js";import{useAiuiContext as z}from"../AiuiProvider/index.js";import{formatVariantPrice as Z}from"../ShelfDisplay/shelfDisplay.js";import{SearchPageTabType as u}from"./types.js";const R=({product:t,onSecondaryButton:o,onPrimaryButton:a,searchValue:n,variantData:g})=>{const i=c(()=>g||t?.variants?.[0],[t,g]),{locale:d="us",copyWriting:p}=z(),h=c(()=>`/products/${t?.handle}?variant=${Y(i?.id)}`,[t?.handle,i?.id]),m=i?.coupons?.[0],{price:r,basePrice:T}=Z({locale:d,amount:m?m.variant_price4wscode:i?.price,baseAmount:m?i?.price:0,currencyCode:t?.price?.currencyCode||"USD"}),y=c(()=>t?.tags?.filter?.(x=>x?.startsWith?.("CLtag"))?.map?.(x=>x?.replace?.("CLtag:",""))?.slice?.(0,2),[t?.tags]);return e("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] relative h-auto",children:t?.type==="advertising"?l(U,{href:t?.advertisingLink,className:"h-full",children:[e(_,{source:t?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),l("div",{className:"desktop:p-6 [&_img]:hover:duration-600 absolute inset-0 z-[2] p-4 [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[e(f,{html:t?.advertisingTitle,className:"desktop:text-[18px] text-sm font-bold text-white"}),e(N,{size:3,html:t?.advertisingSubtitle,className:"laptop:line-clamp-3 mt-2 line-clamp-4 font-bold text-white"})]})]}):l("a",{href:h,className:" tablet:hover:bg-info-white desktop:p-6 desktop:pt-4 tablet:p-4 flex h-full flex-col bg-[#EAEAEC] px-2 py-4 no-underline duration-300",children:[e("div",{className:"ipc_search_product_item_image",children:e(_,{className:"lg-desktop:size-[196px] mx-auto size-[138px]",source:`${i?.image?.url||t?.images?.[0]?.url}}`,alt:t.title,imgClassName:"object-cover size-full"})}),l("div",{className:"ipc_search_product_item_content desktop:mt-2 lg-desktop:mt-3 desktop:gap-6 mt-1 flex flex-1 flex-col justify-between gap-4",children:[l("div",{className:"flex-1",children:[e("div",{className:"lg-desktop:h-[28px] mb-2 flex h-[24px] gap-2",children:y?.map((x,w)=>e(f,{as:"p",html:x,className:"text-brand-0 lg-desktop:px-2 lg-desktop:!leading-[28px] h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"},w))}),e(f,{className:"desktop:text-2xl tablet:line-clamp-2 line-clamp-3 text-xl font-bold !leading-[1.2]",weight:"bold",html:k(t?.title||"",n||"")}),e(f,{as:"p",className:"lg-desktop:text-[18px] tablet:line-clamp-1 mt-1 line-clamp-2 text-sm font-bold",html:k(t.description,n||"")})]}),l("div",{children:[e("div",{className:"mb-2 flex items-center",children:i?.availableForSale?l(P,{children:[e("div",{className:"final-price text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:i?.availableForSale&&r||""}),e("div",{className:"origin-price tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 text-[18px] font-bold line-through",children:i?.availableForSale&&T||""})]}):e("div",{className:"text-info-primary tablet:text-xl lg-desktop:text-2xl text-[18px] font-bold",children:p?.soldOutText||"Sold Out"})}),l("div",{className:I("ipc_search_product_item_button_group","lg-desktop:gap-3 laptop:flex-row flex flex-col items-center gap-2"),children:[p?.learnMoreText&&e(S,{variant:"secondary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,onClick:()=>o?.(),children:p?.learnMoreText}),p?.shopNowText&&e(S,{variant:"primary",className:"laptop:w-auto w-full",size:"lg",disabled:!i?.availableForSale,onClick:()=>a?.(),children:p?.shopNowText})]})]})]})]})})},ee=({blog:t,searchValue:o})=>{const{copyWriting:a}=z(),n=c(()=>`blogs/${t?.handle}/${t?.handle.replace("storefront-","")}`,[t]);return e("div",{className:"ipc_search_blog_item border-b border-[#E4E5E6] py-6",children:l("div",{className:"ipc_search_blog_item_content laptop:flex-row-reverse laptop:gap-8 desktop:gap-16 flex flex-col gap-4",children:[e("div",{className:"laptop:flex-[440] desktop:flex-[540] desktop:h-[280px] h-[240px]",children:e(_,{source:t?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:t?.title})}),l("div",{className:"laptop:flex-[424] desktop:flex-[704] lg-desktop:flex-[1056] flex flex-col justify-center",children:[e(N,{size:3,html:k(t?.title,o)}),e(f,{html:k(t?.content,o),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"}),e("div",{className:"desktop:mt-6 mt-4",children:e(S,{as:"a",href:n,variant:"secondary",size:"lg",children:a?.learnMoreText||"Learn More"})})]})]})})},te=({searchValue:t,page:o})=>{const{copyWriting:a,locale:n="us"}=z(),g=c(()=>`${n==="us"?"":`/${n}`}/${o?.handle}`,[o,n]);return l("div",{className:"ipc_search_page_items border-b border-[#E4E5E6] py-6",children:[e(N,{size:3,html:k(o?.name,t)}),e(f,{as:"p",html:k(o?.bodySummary||"",t),className:"lg-desktop:text-[18px] desktop:text-[16px] mt-1 text-sm font-bold leading-[1.4]"}),e(S,{as:"a",href:g,variant:"secondary",size:"lg",className:"desktop:mt-6 mt-4",children:a?.learnMoreText||"Learn More"})]})},D=({url:t,label:o})=>l("div",{className:"flex flex-col items-center justify-center gap-4",children:[e(_,{source:t,className:"h-[180px] w-[240px]",imgClassName:"object-cover"}),e(f,{html:o,className:"desktop:text-[18px] text-sm font-bold leading-[1.4]"})]}),E=({products:t,title:o,buildProps:a,onSecondaryButton:n,onPrimaryButton:g})=>{const{products:i}=a||{};return l("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[e(N,{size:4,weight:"bold",html:o}),e("div",{className:" tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 mt-6 grid grid-cols-2 gap-x-3 gap-y-4",children:t?.map((d,p)=>{const h=i?.find(r=>r.handle===d.handle),m=h?.variants?.find(r=>r.sku===d.sku);return e(R,{product:h,variantData:m,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>g?.()},d.id+p)})})]})},se=({searchResult:t,searchValue:o,data:a,onSecondaryButton:n,onPrimaryButton:g,onChangeSort:i,loading:d,searchResultCount:p,onChangeTab:h,buildProps:m})=>{const[r,T]=B(a?.tabs?.[0]),y=X(!1),[x,w]=B(!1),[M,j]=B({[u.PRODUCTS]:a?.tabs?.find(s=>s.tabType===u.PRODUCTS)?.sortKeys?.[0],[u.BLOGS]:a?.tabs?.find(s=>s.tabType===u.BLOGS)?.sortKeys?.[0],[u.PAGES]:a?.tabs?.find(s=>s.tabType===u.PAGES)?.sortKeys?.[0]}),b=c(()=>t?.products||[],[t]),A=c(()=>t?.blogs||[],[t]),O=c(()=>t?.pages||[],[t]),$=c(()=>Object.values(p||{}).reduce((s,v)=>s+v,0),[p]),F=c(()=>{const s={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&b?.length&&(b?.length>=8?(b?.splice(7,0,s),y.current=!0):(b?.push(s),y.current=!0)),b},[r,b]);return l("div",{className:"ipc_search_page desktop:py-[128px] tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4 py-16",children:[e(N,{size:4,weight:"bold",html:a?.title?.replace("$totalCount",$?.toString())?.replace("$inputValue",`"${o}"`)}),e("div",{className:"mt-6",children:l(G,{className:"ipc_search_page_tabs",defaultValue:"products",children:[l("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[e(W,{children:a?.tabs?.map(s=>l(K,{onClick:()=>{T(s),h?.(s?.tabType)},defaultValue:"products",value:s.tabType,children:[s.label," (",p?.[s.tabType],")"]},s.id))}),l(H,{onOpenChange:w,children:[e(V,{asChild:!0,children:l("button",{className:"desktop:mt-0 mt-6 flex items-center text-base font-bold leading-[1.2]",children:[r?.sortLabel," ",M?.[r?.tabType]?.label," ",e(Q,{className:I("inline-block size-4",{"rotate-180":x})})]})}),e(q,{align:"start",sideOffset:8,className:"rounded-none bg-white !px-0 py-2",children:r?.sortKeys?.map(s=>e(J,{className:I("laptop:px-4 laptop:text-base px-3 py-4 text-sm font-bold hover:bg-[#EAEAEC] hover:text-current",{"font-bold":M?.[r?.tabType]?.value===s.value}),onClick:()=>{y.current=!1,i?.(r?.tabType,s),j(v=>({...v,[r?.tabType]:s}))},children:s.label},s.id))})]})]}),l(C,{value:u.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[e("div",{className:"tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4 grid grid-cols-2 gap-x-3 gap-y-4",children:F?.map((s,v)=>e(R,{searchValue:o,product:s,onSecondaryButton:()=>n?.(s),onPrimaryButton:()=>g?.(s)},s.id+v))}),d?e("div",{className:"mt-6 flex w-full justify-center",children:e(L,{})}):!b?.length&&l(P,{children:[e(D,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(E,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]}),e(C,{value:u.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:l("div",{children:[A?.map(s=>e(ee,{blog:s,searchValue:o},s.id)),d?e("div",{className:"mt-6 flex justify-center",children:e(L,{})}):!A?.length&&l(P,{children:[e(D,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(E,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]})}),l(C,{value:u.PAGES,className:"ipc_search_page_tabs_pages_content",children:[e("div",{children:O?.map((s,v)=>e(te,{page:s,searchValue:o},s.global_id+v))}),d?e("div",{className:"mt-6 flex justify-center",children:e(L,{})}):!O?.length&&l(P,{children:[e(D,{url:a?.noResultImage?.url,label:a?.noResultLabel}),e(E,{products:a?.recommendProducts||[],buildProps:m,title:a?.recommendProductsTitle})]})]})]})})]})};var me=se;export{me as default};
 //# sourceMappingURL=index.js.map