npm - @anker-in/headless-ui - Versions diffs - 1.3.34 → 1.3.35 - Mend

@anker-in/headless-ui 1.3.34 → 1.3.35

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

Files changed (85) hide show

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n  sm: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  base: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  lg: 'laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n  data: MultiLayoutGraphicBlockProps['data']\n  onSecondaryButtonClick?: () => void\n  onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n *  - slidesPerView=1, loop=true, each Item occupies full-width slide\n *  - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n *  - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n *  - Video pause/play on slide change\n *  - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n  ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n    const items = data.items || []\n    const carousel = data.carouselConfig\n\n    const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n    const showDots = carousel?.showDots ?? true\n    const autoplaySeconds = carousel?.autoplaySeconds\n    const size = carousel?.size ?? 'base'\n\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n    // Slide container refs for imperative video pause via querySelectorAll\n    const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n      items.map(() => React.createRef<HTMLDivElement>())\n    )\n\n    // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n    // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n    useEffect(() => {\n      const swiper = swiperRef.current\n      if (!swiper || !paginationEl) return\n      if (swiper.pagination) {\n        swiper.pagination.el = paginationEl\n        swiper.pagination.init()\n        swiper.pagination.render()\n        swiper.pagination.update()\n      }\n    }, [paginationEl])\n\n    const activeTheme = items[activeIndex]?.theme ?? 'light'\n    const isDark = activeTheme === 'dark'\n\n    useEffect(() => {\n      const handleVisibilityChange = () => {\n        const swiper = swiperRef.current\n        if (!swiper) return\n\n        if (document.visibilityState === 'hidden') {\n          swiper.autoplay?.stop()\n        } else {\n          swiper.autoplay?.start()\n          const currentIndex = swiper.realIndex ?? 0\n          slideContainerRefs.current.forEach((cRef, i) => {\n            if (!cRef.current) return\n            cRef.current.querySelectorAll('video').forEach(v => {\n              if (i !== currentIndex) v.pause()\n            })\n          })\n        }\n      }\n      document.addEventListener('visibilitychange', handleVisibilityChange)\n      return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n    }, [])\n\n    const swiperModules =\n      autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n    const autoplayConfig =\n      autoplaySeconds != null && autoplaySeconds > 0\n        ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n        : false\n\n    const handleSlideChange = useCallback((swiper: SwiperType) => {\n      const newIndex = swiper.realIndex\n      slideContainerRefs.current.forEach((cRef, i) => {\n        if (i !== newIndex && cRef.current) {\n          cRef.current.querySelectorAll('video').forEach(v => {\n            v.pause()\n            v.currentTime = 0\n          })\n        }\n      })\n      const activeContainer = slideContainerRefs.current[newIndex]\n      if (activeContainer?.current) {\n        activeContainer.current.querySelectorAll('video').forEach(v => {\n          if (v.paused) {\n            const p = v.play()\n            p?.catch(() => {})\n          }\n        })\n      }\n      setActiveIndex(newIndex)\n    }, [])\n\n    const { locale } = useAiuiContext()\n    const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n    const { sectionTitle, shape } = data\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          'multilayout-graphic-block-carousel group relative w-full',\n          'laptop:overflow-hidden',\n          'laptop:block flex flex-col',\n          currentSizeClasses,\n          { 'aiui-dark': isDark },\n          className\n        )}\n        {...rest}\n      >\n        {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n        <div className=\"laptop:h-full laptop:pb-0 relative shrink-0 pb-5\">\n          <Swiper\n            className=\"laptop:h-full h-[400px]\"\n            onSwiper={s => (swiperRef.current = s)}\n            onSlideChange={handleSlideChange}\n            modules={swiperModules}\n            slidesPerView={1}\n            loop={true}\n            initialSlide={0}\n            allowTouchMove={true}\n            autoplay={autoplayConfig}\n            pagination={\n              showDots\n                ? {\n                    clickable: true,\n                    el: paginationEl,\n                    renderBullet: (_index: number, className: string) =>\n                      `<span class=\"${className} banner-dot\"></span>`,\n                  }\n                : false\n            }\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"h-full\">\n                <div\n                  ref={slideContainerRefs.current[index]}\n                  className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n                    'aiui-dark': item.theme === 'dark',\n                    'rounded-box': true,\n                  })}\n                >\n                  {/* Block link overlay */}\n                  {(item.blockLink || item.secondaryButton?.link) && (\n                    <a\n                      className=\"absolute inset-0 z-10\"\n                      href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n                      aria-hidden=\"true\"\n                      tabIndex={-1}\n                    />\n                  )}\n\n                  {/* Background media */}\n                  <div className=\"absolute inset-0\">\n                    {isVideo(item.imageUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageUrl?.url}\n                        alt={item.imageUrl?.alt || ''}\n                        className=\"tablet:block hidden h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                    {isVideo(item.imageMobileUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageMobileUrl?.url || item.imageUrl?.url}\n                        alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n                        className=\"tablet:hidden block h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                  </div>\n\n                  {/* Text content */}\n                  <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n                    <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n                      <div className=\"flex flex-col gap-1\">\n                        <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n                        <Text\n                          className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n                          html={item.description}\n                        />\n                      </div>\n                      <div className=\"lg-desktop:gap-3 flex gap-2\">\n                        {item.secondaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-left\"\n                            variant=\"secondary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n                            onClick={onSecondaryButtonClick}\n                          >\n                            {item.secondaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                        {item.primaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-right\"\n                            variant=\"primary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n                            onClick={onPrimaryButtonClick}\n                          >\n                            {item.primaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {/* Arrow navigation */}\n          {showArrowControls && (\n            <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slidePrev()}\n                aria-label=\"Previous slide\"\n              >\n                <ChevronLeft />\n              </button>\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slideNext()}\n                aria-label=\"Next slide\"\n              >\n                <ChevronRight />\n              </button>\n            </div>\n          )}\n\n          {/* Pagination dots */}\n          {showDots && (\n            <div\n              ref={setPaginationEl}\n              className={cn(\n                'multilayout-carousel-pagination swiper-pagination',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n                '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n                '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n                '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n                'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n                'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0',\n                { 'aiui-dark': isDark }\n              )}\n            />\n          )}\n        </div>\n      </section>\n    )\n  }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
-  "mappings": "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",
-  "names": ["MultiLayoutGraphicBlockCarousel_exports", "__export", "MultiLayoutGraphicBlockCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_helpers", "import_Title", "import_components", "import_text", "import_mimeType", "import_AiuiProvider", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "React", "data", "className", "onSecondaryButtonClick", "onPrimaryButtonClick", "rest", "ref", "items", "carousel", "showArrowControls", "showDots", "autoplaySeconds", "size", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "slideContainerRefs", "swiper", "isDark", "handleVisibilityChange", "currentIndex", "cRef", "i", "v", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "locale", "currentSizeClasses", "sectionTitle", "shape", "Title", "s", "_index", "item", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport Title from '../Title/index.js'\nimport { Button, Heading, Picture } from '../../components/index.js'\nimport { Text } from '../../components/text.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { MultiLayoutGraphicBlockProps } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    className=\"lg-desktop:size-14 size-10\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n// \u2500\u2500 Size \u2192 aspect-ratio mapping (aligned with grid full-width) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// \u53C2\u8003 MultiLayoutGraphicBlock.tsx handleAspect() \u4E2D spanType='full' \u7684\u6BD4\u4F8B\n// mobile: h-400px \u56FA\u5B9A\u9AD8\u5EA6\uFF0Ctablet+: aspect-ratio \u5BF9\u9F50 grid full-width\n\nconst sizeClasses: Record<string, string> = {\n  sm: 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  base: 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n  lg: 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]',\n}\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {\n  data: MultiLayoutGraphicBlockProps['data']\n  onSecondaryButtonClick?: () => void\n  onPrimaryButtonClick?: () => void\n}\n\n/**\n * MultiLayoutGraphicBlockCarousel \u2014 full-width banner carousel for MultiLayoutGraphicBlock.\n *\n * Architecture:\n *  - slidesPerView=1, loop=true, each Item occupies full-width slide\n *  - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)\n *  - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2\n *  - Video pause/play on slide change\n *  - No withLayout wrapper (carousel is inner implementation)\n */\nconst MultiLayoutGraphicBlockCarousel = React.forwardRef<HTMLElement, MultiLayoutGraphicBlockCarouselProps>(\n  ({ data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest }, ref) => {\n    const items = data.items || []\n    const carousel = data.carouselConfig\n\n    const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n    const showDots = carousel?.showDots ?? true\n    const autoplaySeconds = carousel?.autoplaySeconds\n    const size = carousel?.size ?? 'base'\n\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n    // Slide container refs for imperative video pause via querySelectorAll\n    const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n      items.map(() => React.createRef<HTMLDivElement>())\n    )\n\n    // paginationEl \u6302\u8F7D\u540E\u91CD\u65B0\u7ED1\u5B9A Swiper pagination\n    // \u89E3\u51B3 next/dynamic + ssr:false \u73AF\u5883\u4E0B Swiper \u521D\u59CB\u5316\u65F6 paginationEl \u5C1A\u4E3A null \u7684\u65F6\u5E8F\u95EE\u9898\n    useEffect(() => {\n      const swiper = swiperRef.current\n      if (!swiper || !paginationEl) return\n      if (swiper.pagination) {\n        swiper.pagination.el = paginationEl\n        swiper.pagination.init()\n        swiper.pagination.render()\n        swiper.pagination.update()\n      }\n    }, [paginationEl])\n\n    const activeTheme = items[activeIndex]?.theme ?? 'light'\n    const isDark = activeTheme === 'dark'\n\n    useEffect(() => {\n      const handleVisibilityChange = () => {\n        const swiper = swiperRef.current\n        if (!swiper) return\n\n        if (document.visibilityState === 'hidden') {\n          swiper.autoplay?.stop()\n        } else {\n          swiper.autoplay?.start()\n          const currentIndex = swiper.realIndex ?? 0\n          slideContainerRefs.current.forEach((cRef, i) => {\n            if (!cRef.current) return\n            cRef.current.querySelectorAll('video').forEach(v => {\n              if (i !== currentIndex) v.pause()\n            })\n          })\n        }\n      }\n      document.addEventListener('visibilitychange', handleVisibilityChange)\n      return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n    }, [])\n\n    const swiperModules =\n      autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n    const autoplayConfig =\n      autoplaySeconds != null && autoplaySeconds > 0\n        ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n        : false\n\n    const handleSlideChange = useCallback((swiper: SwiperType) => {\n      const newIndex = swiper.realIndex\n      slideContainerRefs.current.forEach((cRef, i) => {\n        if (i !== newIndex && cRef.current) {\n          cRef.current.querySelectorAll('video').forEach(v => {\n            v.pause()\n            v.currentTime = 0\n          })\n        }\n      })\n      const activeContainer = slideContainerRefs.current[newIndex]\n      if (activeContainer?.current) {\n        activeContainer.current.querySelectorAll('video').forEach(v => {\n          if (v.paused) {\n            const p = v.play()\n            p?.catch(() => {})\n          }\n        })\n      }\n      setActiveIndex(newIndex)\n    }, [])\n\n    const { locale } = useAiuiContext()\n    const currentSizeClasses = sizeClasses[size] ?? sizeClasses.base\n    const { sectionTitle } = data\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          'multilayout-graphic-block-carousel group relative w-full',\n          'laptop:overflow-hidden',\n          'laptop:block flex flex-col',\n          className\n        )}\n        {...rest}\n      >\n        {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n        <div\n          className={cn('laptop:mb-0 relative mb-5 shrink-0', currentSizeClasses, {\n            'aiui-dark': isDark,\n          })}\n        >\n          <Swiper\n            className=\"tablet:h-full h-[400px]\"\n            onSwiper={s => (swiperRef.current = s)}\n            onSlideChange={handleSlideChange}\n            modules={swiperModules}\n            slidesPerView={1}\n            loop={true}\n            initialSlide={0}\n            allowTouchMove={true}\n            autoplay={autoplayConfig}\n            pagination={\n              showDots\n                ? {\n                    clickable: true,\n                    el: paginationEl,\n                    renderBullet: (_index: number, className: string) =>\n                      `<span class=\"${className} banner-dot\"></span>`,\n                  }\n                : false\n            }\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"h-full\">\n                <div\n                  ref={slideContainerRefs.current[index]}\n                  className={cn('item-wrapper text-info-primary relative size-full overflow-hidden', {\n                    'aiui-dark': item.theme === 'dark',\n                    'rounded-box': true,\n                  })}\n                >\n                  {/* Block link overlay */}\n                  {(item.blockLink || item.secondaryButton?.link) && (\n                    <a\n                      className=\"absolute inset-0 z-10\"\n                      href={getLocalizedPath(item.blockLink || item.secondaryButton?.link || '', locale || 'us')}\n                      aria-hidden=\"true\"\n                      tabIndex={-1}\n                    />\n                  )}\n\n                  {/* Background media */}\n                  <div className=\"absolute inset-0\">\n                    {isVideo(item.imageUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:block hidden size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageUrl?.url}\n                        alt={item.imageUrl?.alt || ''}\n                        className=\"tablet:block hidden h-full overflow-hidden\"\n                        imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n                      />\n                    )}\n                    {isVideo(item.imageMobileUrl?.mimeType) ? (\n                      <video\n                        autoPlay\n                        muted\n                        playsInline\n                        loop\n                        className=\"tablet:hidden block size-full overflow-hidden object-cover\"\n                      >\n                        <source src={item.imageMobileUrl?.url} type=\"video/mp4\" />\n                      </video>\n                    ) : (\n                      <Picture\n                        source={item.imageMobileUrl?.url || item.imageUrl?.url}\n                        alt={item.imageMobileUrl?.alt || item.imageUrl?.alt || ''}\n                        className=\"tablet:hidden block h-full overflow-hidden\"\n                        imgClassName=\"h-full object-cover\"\n                      />\n                    )}\n                  </div>\n\n                  {/* Text content */}\n                  <div className=\"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end\">\n                    <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n                      <div className=\"flex flex-col gap-1\">\n                        <Heading size={3} as=\"h3\" className=\"item-title\" html={item.title} />\n                        <Text\n                          className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n                          html={item.description}\n                        />\n                      </div>\n                      <div className=\"lg-desktop:gap-3 flex gap-2\">\n                        {item.secondaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-left\"\n                            variant=\"secondary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.secondaryButton.link || '', locale || 'us')}\n                            onClick={onSecondaryButtonClick}\n                          >\n                            {item.secondaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                        {item.primaryButton?.text && (\n                          <Button\n                            aria-label={item.title ?? item.description}\n                            className=\"link-right\"\n                            variant=\"primary\"\n                            as=\"a\"\n                            href={getLocalizedPath(item.primaryButton.link || '', locale || 'us')}\n                            onClick={onPrimaryButtonClick}\n                          >\n                            {item.primaryButton.text}\n                            <span className=\"sr-only\">{item.title ?? item.description}</span>\n                          </Button>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {/* Arrow navigation */}\n          {showArrowControls && (\n            <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slidePrev()}\n                aria-label=\"Previous slide\"\n              >\n                <ChevronLeft />\n              </button>\n              <button\n                type=\"button\"\n                className=\"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n                onClick={() => swiperRef.current?.slideNext()}\n                aria-label=\"Next slide\"\n              >\n                <ChevronRight />\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Pagination dots \u2014 outside aiui-dark wrapper to avoid theme-dependent colors */}\n        {showDots && (\n          <div\n            ref={setPaginationEl}\n            className={cn(\n              'multilayout-carousel-pagination swiper-pagination',\n              '[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary',\n              '[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8',\n              '[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2',\n              '[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out',\n              '[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100',\n              'absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2',\n              'laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0'\n            )}\n          />\n        )}\n      </section>\n    )\n  }\n)\n\nMultiLayoutGraphicBlockCarousel.displayName = 'MultiLayoutGraphicBlockCarousel'\n\nexport default MultiLayoutGraphicBlockCarousel\n"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlockCarousel_exports", "__export", "MultiLayoutGraphicBlockCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_helpers", "import_Title", "import_components", "import_text", "import_mimeType", "import_AiuiProvider", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "React", "data", "className", "onSecondaryButtonClick", "onPrimaryButtonClick", "rest", "ref", "items", "carousel", "showArrowControls", "showDots", "autoplaySeconds", "size", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "slideContainerRefs", "swiper", "isDark", "handleVisibilityChange", "currentIndex", "cRef", "i", "v", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "locale", "currentSizeClasses", "sectionTitle", "Title", "s", "_index", "item", "index"]
 }

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

@@ -1,4 +1,4 @@
-import type { Media, Shape, Theme } from '../../types/props';
+import type { Media, Theme } from '../../types/props';
 export type Item = {
     theme?: Theme;
     title: string;
@@ -43,7 +43,6 @@ export type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {
     onSecondaryButtonClick?: () => void;
     onPrimaryButtonClick?: () => void;
     data: {
-        shape?: Shape;
         sectionTitle?: string;
         mode?: 'grid' | 'carousel';
         groupByTab?: boolean;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
-  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n  id?: string\n}\n\nexport interface MultiLayoutCarouselConfig {\n  /** \u662F\u5426\u663E\u793A prev/next arrow \u5BFC\u822A\uFF0Citems \u2265 2 \u65F6\u6709\u6548\u3002\u9ED8\u8BA4 true */\n  showArrows?: boolean\n  /** \u662F\u5426\u663E\u793A dots \u5206\u9875\u6307\u793A\u5668\u3002\u9ED8\u8BA4 true */\n  showDots?: boolean\n  /** \u5FAA\u73AF\u64AD\u653E\uFF08Swiper loop\uFF09\u3002\u9ED8\u8BA4 true */\n  loop?: boolean\n  /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u79D2\u6570\u3002\u672A\u8BBE\u7F6E\u6216 \u2264 0 \u65F6\u4E0D\u81EA\u52A8\u8F6E\u64AD */\n  autoplaySeconds?: number\n  /**\n   * Slide \u5BBD\u9AD8\u6BD4\u5C3A\u5BF8\uFF0C\u63A7\u5236 carousel wrapper \u9AD8\u5EA6\u3002\n   * sm \u2014 \u77ED\u6A2A\u5E45\uFF1Bbase \u2014 \u6807\u51C6\u9AD8\u5EA6\uFF08\u9ED8\u8BA4\uFF09\uFF1Blg \u2014 \u5927\u5C3A\u5BF8\n   * @default 'base'\n   */\n  size?: 'sm' | 'base' | 'lg'\n}\n\nexport type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {\n  onSecondaryButtonClick?: () => void\n  onPrimaryButtonClick?: () => void\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    mode?: 'grid' | 'carousel'\n    groupByTab?: boolean\n    carouselConfig?: MultiLayoutCarouselConfig\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n  id?: string\n}\n\nexport interface MultiLayoutCarouselConfig {\n  /** \u662F\u5426\u663E\u793A prev/next arrow \u5BFC\u822A\uFF0Citems \u2265 2 \u65F6\u6709\u6548\u3002\u9ED8\u8BA4 true */\n  showArrows?: boolean\n  /** \u662F\u5426\u663E\u793A dots \u5206\u9875\u6307\u793A\u5668\u3002\u9ED8\u8BA4 true */\n  showDots?: boolean\n  /** \u5FAA\u73AF\u64AD\u653E\uFF08Swiper loop\uFF09\u3002\u9ED8\u8BA4 true */\n  loop?: boolean\n  /** \u81EA\u52A8\u8F6E\u64AD\u95F4\u9694\u79D2\u6570\u3002\u672A\u8BBE\u7F6E\u6216 \u2264 0 \u65F6\u4E0D\u81EA\u52A8\u8F6E\u64AD */\n  autoplaySeconds?: number\n  /**\n   * Slide \u5BBD\u9AD8\u6BD4\u5C3A\u5BF8\uFF0C\u63A7\u5236 carousel wrapper \u9AD8\u5EA6\u3002\n   * sm \u2014 \u77ED\u6A2A\u5E45\uFF1Bbase \u2014 \u6807\u51C6\u9AD8\u5EA6\uFF08\u9ED8\u8BA4\uFF09\uFF1Blg \u2014 \u5927\u5C3A\u5BF8\n   * @default 'base'\n   */\n  size?: 'sm' | 'base' | 'lg'\n}\n\nexport type MultiLayoutGraphicBlockProps = React.HTMLAttributes<HTMLElement> & {\n  onSecondaryButtonClick?: () => void\n  onPrimaryButtonClick?: () => void\n  data: {\n    sectionTitle?: string\n    mode?: 'grid' | 'carousel'\n    groupByTab?: boolean\n    carouselConfig?: MultiLayoutCarouselConfig\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
-  "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, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.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, className, ...rest }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus({ preventScroll: true })\n      }\n    }, [])\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          window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n        }\n      },\n      [isComposing, searchValue, locale, data?.moreLink]\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        const type = item.__typename || item.type\n        switch (type) {\n          case 'Product':\n            return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n          case 'Article':\n            return getLocalizedPath(\n              `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n              locale\n            )\n          default:\n            break\n        }\n      },\n      [searchValue, locale]\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, isSearching])\n\n    return (\n      <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n        <style>\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 gap-4 border-b border-b-gray-200 py-4 text-black\">\n          <input\n            ref={inputRef}\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=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] 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-1\">\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                      iconClassName=\"size-4\"\n                      href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\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=\"rounded-sidebar-shelf 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 key=\"predict-advertising-card\">\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                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf 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                  )}\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\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 = getLocalizedPath(\n                        `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n                        locale\n                      )\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={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\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 key=\"empty-advertising-card\">\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                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\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                  )}\n                  {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = getLocalizedPath(\n                      `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n                      locale\n                    )\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.shopify_id || 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    <Link href={listingLink} className=\"block no-underline hover:text-current\">\n      <div\n        className={cn(\n          'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n          className\n        )}\n      >\n        <div className=\"shrink-0\">\n          <img\n            src={productImage}\n            loading=\"lazy\"\n            alt={productName}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\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-[22px]\"\n              />\n            )}\n          </div>\n          <div>\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            {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    </Link>\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={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n          key={index}\n          className=\"rounded-sidebar-shelf 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 withLayout(NavigationSearch)\n"],
-  "mappings": "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",
-  "names": ["NavigationSearch_exports", "__export", "canSearch", "NavigationSearch_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_AiuiProvider", "import_utils", "import_Styles", "import_types", "import_es_toolkit", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "e", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "SearchIcon", "CloseIcon", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index"]
+  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem, Badge } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useNavContext } from '../HeaderNavigation/NavProvider.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.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, className, ...rest }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus({ preventScroll: true })\n      }\n    }, [])\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          window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n        }\n      },\n      [isComposing, searchValue, locale, data?.moreLink]\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        const type = item.__typename || item.type\n        switch (type) {\n          case 'Product':\n            return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n          case 'Article':\n            return getLocalizedPath(\n              `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n              locale\n            )\n          default:\n            break\n        }\n      },\n      [searchValue, locale]\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, isSearching])\n\n    return (\n      <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n        <style>\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 gap-4 border-b border-b-gray-200 py-4 text-black\">\n          <input\n            ref={inputRef}\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=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] 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-1\">\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                      iconClassName=\"size-4\"\n                      href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\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=\"rounded-sidebar-shelf 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 key=\"predict-advertising-card\">\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                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf 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                  )}\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\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 = getLocalizedPath(\n                        `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n                        locale\n                      )\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={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\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 key=\"empty-advertising-card\">\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                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\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                  )}\n                  {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = getLocalizedPath(\n                      `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n                      locale\n                    )\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.shopify_id || 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  const { componentOverrides } = useNavContext()\n  const badgeVariant = componentOverrides?.badge?.variant\n  return (\n    <Link href={listingLink} className=\"block no-underline hover:text-current\">\n      <div\n        className={cn(\n          'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n          className\n        )}\n      >\n        <div className=\"shrink-0\">\n          <img\n            src={productImage}\n            loading=\"lazy\"\n            alt={productName}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\" h-[24px] \">\n            {productBadge && (\n              <Badge size=\"sm\" variant={badgeVariant} className=\"mb-1\">\n                {productBadge}\n              </Badge>\n            )}\n          </div>\n          <div>\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            {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    </Link>\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={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n          key={index}\n          className=\"rounded-sidebar-shelf 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 withLayout(NavigationSearch)\n"],
+  "mappings": "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",
+  "names": ["NavigationSearch_exports", "__export", "canSearch", "NavigationSearch_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_AiuiProvider", "import_NavProvider", "import_utils", "import_Styles", "import_types", "import_es_toolkit", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "e", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "SearchIcon", "CloseIcon", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "componentOverrides", "badgeVariant", "index"]
 }

package/dist/cjs/biz-components/SearchPage/index.d.ts CHANGED Viewed

@@ -2,5 +2,5 @@ import type { SearchPageProps } from './types';
 /**
  * 搜索页面
  */
-declare const SearchPage: ({ searchResult, searchValue, data, onSecondaryButton, onPrimaryButton, onChangeSort, loading, shopNowLoadingProductId, searchResultCount, onChangeTab, buildProps, className, ...rest }: SearchPageProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchPage: ({ searchResult, searchValue, data, onSecondaryButton, onPrimaryButton, onChangeSort, loading, shopNowLoadingProductId, searchResultCount, onChangeTab, buildProps, componentOverrides, className, ...rest }: SearchPageProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchPage;

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

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