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/esm/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": ["jsx", "jsxs", "React", "useRef", "useCallback", "useState", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "cn", "getLocalizedPath", "Title", "Button", "Heading", "Picture", "Text", "isVideo", "useAiuiContext", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "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", "s", "_index", "item", "index", "MultiLayoutGraphicBlockCarousel_default"]
+  "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": ["jsx", "jsxs", "React", "useRef", "useCallback", "useState", "useEffect", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "cn", "getLocalizedPath", "Title", "Button", "Heading", "Picture", "Text", "isVideo", "useAiuiContext", "ChevronLeft", "ChevronRight", "sizeClasses", "MultiLayoutGraphicBlockCarousel", "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", "s", "_index", "item", "index", "MultiLayoutGraphicBlockCarousel_default"]
 }

package/dist/esm/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/esm/biz-components/NavigationSearch/index.js CHANGED Viewed

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

package/dist/esm/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": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useEffect", "useRef", "useAiuiContext", "getLocalizedPath", "withLayout", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index", "NavigationSearch_default"]
+  "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": "AA8FQ,OAqCI,YAAAA,EArCJ,OAAAC,EA6BE,QAAAC,MA7BF,oBA7FR,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,EAAW,QAAAC,EAAM,WAAAC,EAAS,QAAAC,EAAM,YAAAC,EAAU,SAAAC,MAAa,4BACvF,OAAS,UAAUC,EAAY,SAASC,MAAiB,qCACzD,OAAS,cAAAC,EAAY,eAAAC,EAAa,WAAAC,EAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAE9E,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,iBAAAC,OAAqB,qCAC9B,OAAS,oBAAAC,MAAwB,yBACjC,OAAS,cAAAC,OAAkB,yBAE3B,OAAS,gBAAAC,MAAoB,aAE7B,OAAS,YAAAC,OAAgB,aACzB,OAAS,MAAAC,EAAI,UAAAC,EAAQ,uBAAAC,OAA2B,yBAEzC,MAAMC,GAAaC,GACjB,EACLA,EAAO,YAAY,QAAQ,YAC3BA,EAAO,YAAY,KAAK,QACxBA,EAAO,YAAY,KAAK,SAAS,SAI/BC,EAAmBjB,EACvB,CAAC,CAAE,KAAAkB,EAAM,SAAAC,EAAU,QAAAC,EAAS,aAAAC,EAAc,YAAAC,EAAa,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CAC7F,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,EAAY,EAAItB,EAAe,EAEhD,CAACuB,EAAaC,CAAc,EAAI3B,EAAS,EAAE,EAC3C,CAAC4B,EAAaC,CAAc,EAAI7B,EAAS,EAAK,EAC9C8B,EAAW5B,EAAyB,IAAI,EAG9CD,EAAU,IAAM,CACV6B,EAAS,SACXA,EAAS,QAAQ,MAAM,CAAE,cAAe,EAAK,CAAC,CAElD,EAAG,CAAC,CAAC,EAEL,MAAMC,EAAoBvB,GAAUwB,GAAkB,CACpDhB,EAASgB,CAAK,CAChB,EAAG,GAAG,EAEAC,EAAgBnC,EACnB,GAA6C,CACxC,EAAE,MAAQ,SAAW,CAAC8B,GACxB,OAAO,KAAKvB,EAAiB,GAAGU,GAAM,QAAQ,MAAMW,EAAY,YAAY,CAAC,GAAIF,CAAM,EAAG,OAAO,CAErG,EACA,CAACI,EAAaF,EAAaF,EAAQT,GAAM,QAAQ,CACnD,EAEMmB,EAAiBnC,EAAQ,IACzB,MAAM,QAAQqB,CAAQ,GAAKA,GAAU,OAChCA,EAAS,IAAKe,GAAiBA,EAAQ,WAAW,EAEvD,MAAM,QAAQpB,GAAM,YAAY,GAAKA,GAAM,cAAc,OACpDA,GAAM,aAAa,IAAKqB,GAAcA,EAAK,WAAW,EAExD,CAAC,EACP,CAAChB,EAAUL,GAAM,YAAY,CAAC,EAE3BsB,EAAUvC,EACbwC,GAAc,CAEb,OADaA,EAAK,YAAcA,EAAK,KACvB,CACZ,IAAK,UACH,OAAOjC,EAAiB,YAAYiC,EAAK,IAAI,MAAMZ,EAAY,YAAY,CAAC,GAAIF,CAAM,EACxF,IAAK,UACH,OAAOnB,EACL,UAAUiC,EAAK,KAAK,MAAM,IAAIA,EAAK,OAAO,QAAQ,cAAe,EAAE,CAAC,MAAMZ,EAAY,YAAY,CAAC,GACnGF,CACF,EACF,QACE,KACJ,CACF,EACA,CAACE,EAAaF,CAAM,CACtB,EAEMe,EAAexC,EAAQ,IAAM,CACjC,GAAK2B,EAGE,IAAIR,GAAc,WAEvB,OAAOX,EAAa,QACf,GAAI,CAACY,EAEV,OAAOZ,EAAa,UANpB,QAAOA,EAAa,OAQxB,EAAG,CAACW,GAAc,WAAYQ,EAAaP,CAAW,CAAC,EAEvD,OACElC,EAACI,EAAA,CAAU,eAAe,YAAa,GAAGiC,EAAM,UAAWb,EAAG,WAAYY,CAAS,EAAG,IAAKE,EACzF,UAAAvC,EAAC,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAUH,EACAC,EAAC,OAAI,UAAU,+JACb,UAAAD,EAAC,SACC,IAAK8C,EACL,MAAOJ,EACP,mBAAoB,IAAMG,EAAe,EAAI,EAC7C,iBAAkB,IAAMA,EAAe,EAAK,EAC5C,UAAWI,EACX,SAAU,GAAK,CACbN,EAAe,EAAE,OAAO,KAAK,EACzB,EAAE,OAAO,OACXI,EAAkB,EAAE,OAAO,KAAK,CAEpC,EACA,KAAK,OACL,UAAU,sHACV,YAAahB,GAAM,YACrB,EACA9B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACW,EAAA,CAAW,UAAU,wBAAwB,QAAS,IAAMqB,EAASU,CAAW,EAAG,EACpF1C,EAAC,OAAI,UAAU,6BAA6B,EAC5CA,EAACY,EAAA,CAAU,UAAU,wBAAwB,QAASqB,EAAS,GACjE,GACF,EACAjC,EAAC,OAAI,UAAU,kEACZ,SAAAuD,IAAiBhC,EAAa,QAC7BtB,EAAAF,EAAA,CACE,UAAAE,EAAC,OACC,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAK,KAAM4B,GAAM,YAAa,UAAU,iDAAiD,EACzFG,GAAc,OAAO,OAAS,GAC7BlC,EAACI,EAAA,CACC,GAAG,IACH,cAAc,SACd,KAAMiB,EAAiB,GAAGU,GAAM,QAAQ,MAAMW,EAAY,YAAY,CAAC,GAAIF,CAAM,EACjF,UAAU,wCACV,QAAQ,OAEP,SAAAT,GAAM,SACT,GAEJ,EACA/B,EAAC,OAAI,UAAU,qBACZ,SAAAkC,GAAc,OACX,OAAQoB,GAAc1B,GAAU0B,CAAI,CAAC,EACtC,MAAM,EAAG,CAAC,GACT,IAAKA,GACLtD,EAACM,EAAA,CACC,UAAU,sFACV,KAAM+C,EAAQC,CAAI,EAGlB,SAAAtD,EAACG,EAAA,CACC,KAAMwB,GAAoB2B,EAAK,MAAOZ,CAAW,EACjD,UAAU,iDACZ,GALKY,EAAK,EAMZ,CACD,EACL,GACF,EACArD,EAAC,OACC,UAAAD,EAACG,EAAA,CAAK,KAAM4B,GAAM,gBAAiB,UAAU,iDAAiD,EAC9F9B,EAAC,OAAI,UAAU,mIACZ,UAAA8B,GAAM,kBAAkB,KACvB/B,EAACM,EAAA,CAAK,QAAS,CAACyB,GAAM,gBAAiB,KAAMV,EAAiBU,GAAM,gBAAiBS,CAAM,EACzF,SAAAvC,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACE,EAAA,CACC,OAAQ6B,GAAM,kBAAkB,IAChC,UAAU,6BACV,aAAa,sBACf,EACA9B,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACO,EAAA,CACC,KAAM,EACN,KAAMwB,GAAM,kBAAoB,eAChC,UAAWN,EAAG,uBAAwB,CACpC,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,EACA/B,EAACG,EAAA,CACC,KAAM4B,GAAM,qBAAuB,YACnC,UAAWN,EAAG,+BAAgC,CAC5C,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,GACF,GACF,EACF,EAEDG,GAAc,OACX,OAAQoB,GAAcA,EAAK,KAAK,YAAY,IAAM,SAAS,EAC5D,MAAM,EAAGvB,GAAM,kBAAkB,IAAM,EAAI,CAAC,GAC3C,IAAKuB,GAAc,CACnB,MAAME,EAAUF,GAAM,WAAW,CAAC,EAC5BG,EAAe,GAAGD,GAAS,OAAO,KAAOF,GAAM,SAAS,CAAC,GAAG,GAAG,GAC/DI,EAAcJ,GAAM,OAASA,GAAM,KACnCK,EAAcL,GAAM,YACpBM,EAAeN,GAAM,OAAS,GAC9BO,EAAcxC,EAClB,aAAaiC,GAAM,MAAM,YAAY5B,EAAO8B,GAAS,EAAY,CAAC,GAClEhB,CACF,EACA,OACExC,EAAC8D,EAAA,CACC,aAAcL,EACd,YAAaC,EACb,YAAaC,EACb,aAAcC,EACd,YAAaC,GACRP,EAAK,EACZ,CAEJ,CAAC,GACL,IArDO,0BAsDT,GACF,EAEArD,EAAAF,EAAA,CACG,UAAAwD,IAAiBhC,EAAa,OAC7BvB,EAACG,EAAA,CACC,KAAM4B,GAAM,aACZ,GAAG,IACH,UAAU,gFACZ,EAEF9B,EAAC,OACC,UAAAD,EAACG,EAAA,CAAK,KAAM4B,GAAM,YAAa,UAAU,iDAAiD,EAC1F9B,EAAC,OAAI,UAAU,OACb,UAAAD,EAAC+D,GAAA,CAAc,KAAMhC,EAAM,SAAUmB,EAAgB,OAAQV,EAAQ,EACpE,MAAM,QAAQT,GAAM,YAAY,GAAK,CAAC,CAACA,GAAM,cAAc,QAC1D/B,EAACQ,EAAA,CAAK,UAAU,sCACb,SAAAuB,GAAM,cAAc,IAAKuB,GACxBtD,EAACS,EAAA,CAEC,UAAU,gGAEV,SAAAT,EAAC,KACC,KAAMqB,EAAiB,GAAGU,GAAM,QAAQ,MAAMuB,GAAM,YAAY,YAAY,CAAC,GAAId,CAAM,EACvF,UAAU,8DAET,SAAAc,GAAM,YACT,GARKA,GAAM,EASb,CACD,EACH,GAEJ,GACF,EACArD,EAAC,OACC,UAAAD,EAACG,EAAA,CAAK,KAAM4B,GAAM,gBAAiB,UAAU,iDAAiD,EAC9F9B,EAAC,OAAI,UAAU,mIACZ,UAAA8B,GAAM,kBAAkB,KACvB/B,EAACM,EAAA,CAAK,QAAS,CAACyB,GAAM,gBAAiB,KAAMV,EAAiBU,GAAM,gBAAiBS,CAAM,EACzF,SAAAvC,EAAC,OAAI,UAAU,iIACb,UAAAD,EAACE,EAAA,CACC,OAAQ6B,GAAM,kBAAkB,IAChC,UAAU,6BACV,aAAa,sBACf,EACA9B,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACO,EAAA,CACC,KAAM,EACN,KAAMwB,GAAM,kBAAoB,eAChC,UAAWN,EAAG,uBAAwB,CACpC,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,EACA/B,EAACG,EAAA,CACC,KAAM4B,GAAM,qBAAuB,YACnC,UAAWN,EAAG,+BAAgC,CAC5C,aAAcM,GAAM,mBAAqB,MAC3C,CAAC,EACH,GACF,GACF,EACF,EAEDA,GAAM,aAAa,MAAM,EAAGA,GAAM,kBAAkB,IAAM,EAAI,CAAC,GAAG,IAAKuB,GAAc,CACpF,MAAMK,EAAcL,GAAM,mBACpBM,EAAeN,GAAM,OAAS,GAC9BO,EAAcxC,EAClB,aAAaiC,GAAM,MAAM,YAAY5B,EAAO4B,GAAM,UAAoB,CAAC,GACvEd,CACF,EACA,OACExC,EAAC8D,EAAA,CACC,aAAcR,GAAM,MACpB,YAAaA,GAAM,KACnB,YAAaK,EACb,aAAcC,EACd,YAAaC,GACRP,EAAK,YAAcA,EAAK,EAC/B,CAEJ,CAAC,GACH,IA/CO,wBAgDT,GACF,EAEJ,GACF,CAEJ,CACF,EAEAxB,EAAiB,YAAc,mBAE/B,MAAMgC,EAAgB,CAAC,CACrB,aAAAL,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAvB,EACA,YAAAwB,CACF,IAOM,CACJ,KAAM,CAAE,mBAAAG,CAAmB,EAAI5C,GAAc,EACvC6C,EAAeD,GAAoB,OAAO,QAChD,OACEhE,EAACM,EAAA,CAAK,KAAMuD,EAAa,UAAU,wCACjC,SAAA5D,EAAC,OACC,UAAWwB,EACT,sIACAY,CACF,EAEA,UAAArC,EAAC,OAAI,UAAU,WACb,SAAAA,EAAC,OACC,IAAKyD,EACL,QAAQ,OACR,IAAKC,EACL,MAAO,GACP,OAAQ,GACR,UAAU,6BACZ,EACF,EACAzD,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,OAAI,UAAU,aACZ,SAAA4D,GACC5D,EAACU,EAAA,CAAM,KAAK,KAAK,QAASuD,EAAc,UAAU,OAC/C,SAAAL,EACH,EAEJ,EACA3D,EAAC,OACC,UAAAD,EAACG,EAAA,CACC,UAAU,iGACV,KAAMuD,EACR,EACCC,GACC3D,EAACG,EAAA,CACC,GAAG,IACH,KAAMwD,EACN,UAAU,sFACZ,GAEJ,GACF,GACF,EACF,CAEJ,EAEMI,GAAgB,CAAC,CAAE,KAAAhC,EAAM,SAAAK,EAAU,OAAAI,CAAO,IAE5CxC,EAAC,OAAI,UAAU,oCACZ,SAAAoC,GAAU,IAAI,CAACe,EAAce,IAC5BlE,EAAC,KACC,KAAMqB,EAAiB,GAAGU,GAAM,QAAQ,MAAMoB,GAAS,YAAY,CAAC,GAAIX,CAAM,EAE9E,UAAU,qHAET,SAAAW,GAHIe,CAIP,CACD,EACH,EAIJ,IAAOC,GAAQ7C,GAAWQ,CAAgB",
+  "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "Badge", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useEffect", "useRef", "useAiuiContext", "useNavContext", "getLocalizedPath", "withLayout", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "componentOverrides", "badgeVariant", "index", "NavigationSearch_default"]
 }

package/dist/esm/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/esm/biz-components/SearchPage/index.js CHANGED Viewed

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