@anker-in/headless-ui 1.0.23 → 1.0.25

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

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

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

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

package/dist/cjs/biz-components/SearchPage/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
-  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  LoadingDots,\n} from '../../components'\nimport { DownArrow } from '../HeaderNavigation/icons'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const listingLink = useMemo(() => {\n    return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [product?.handle, variant?.id])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: coupon ? variant?.price : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto relative\">\n      {product?.type === 'advertising' ? (\n        <Link href={product?.advertisingLink} className=\"h-full\">\n          <Picture\n            source={product?.advertisingBgImg?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"absolute z-[2] left-0 right-0 bottom-0 top-0 p-4 desktop:p-6 [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n            <Text html={product?.advertisingTitle} className=\"text-sm desktop:text-[18px] text-white font-bold\" />\n            <Heading\n              size={3}\n              html={product?.advertisingSubtitle}\n              className=\"font-bold mt-2 line-clamp-4 laptop:line-clamp-3 text-white\"\n            />\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\" no-underline h-full bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 flex flex-col desktop:p-6 desktop:pt-4 px-2 py-4 tablet:p-4\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:w-[196px] lg-desktop:h-[196px] w-[138px] h-[138px] mx-auto\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content flex-1 mt-1 desktop:mt-2 lg-desktop:mt-3 flex flex-col justify-between desktop:gap-6 gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"flex gap-2 mb-2 lg-desktop:h-[28px] h-[24px] mb-1\">\n                {tags?.map((tag: string) => (\n                  <Text\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 h-full rounded-full border-[1.6px] lg-desktop:px-2 px-[6px] border-[#00BEFA] text-sm font-bold !leading-[24px] lg-desktop:!leading-[28px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"text-xl desktop:text-2xl font-bold !leading-[1.2] line-clamp-3 tablet:line-clamp-2\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"text-sm lg-desktop:text-[18px] mt-1 font-bold line-clamp-2 tablet:line-clamp-1\"\n                html={highlightSearchWord(product.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price text-[18px] tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 flex flex-col laptop:flex-row items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"w-full laptop:w-auto\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onSecondaryButton?.()}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"w-full laptop:w-auto\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onPrimaryButton?.()}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting } = useAiuiContext()\n\n  const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n  return (\n    <div className=\"ipc_search_blog_item py-6 border-b border-[#E4E5E6]\">\n      <div className=\"ipc_search_blog_item_content flex flex-col gap-4 laptop:flex-row-reverse laptop:gap-8 desktop:gap-16\">\n        <div className=\"laptop:flex-[440] desktop:flex-[540] h-[240px] desktop:h-[280px]\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] flex flex-col justify-center desktop:flex-[704] lg-desktop:flex-[1056]\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1 line-clamp-2\"\n          />\n          <div className=\"mt-4 desktop:mt-6\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n  return (\n    <div className=\"ipc_search_page_items py-6 border-b border-[#E4E5E6]\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"mt-4 desktop:mt-6\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col gap-4 items-center justify-center\">\n      <Picture source={url} className=\"w-[240px] h-[180px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] font-bold text-sm leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" grid grid-cols-2 gap-y-4 gap-x-3 mt-6 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.id + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: currentTab?.advertisingBgImg,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div className=\"ipc_search_page desktop:py-[128px] py-16 tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4\">\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"text-base mt-6 desktop:mt-0 leading-[1.2] font-bold flex items-center\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('size-4 inline-block', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\" sideOffset={8} className=\"bg-white py-2 !px-0 rounded-none\">\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'px-3 laptop:px-4 py-4 text-sm laptop:text-base font-bold hover:bg-[#EAEAEC] hover:text-current',\n                        {\n                          'font-bold': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\"grid grid-cols-2 gap-y-4 gap-x-3 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={product.id + index}\n                  product={product}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"flex w-full mt-6 justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"flex mt-6 justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"flex mt-6 justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
+  "sourcesContent": ["import {\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Text,\n  Picture,\n  Link,\n  Button,\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  LoadingDots,\n} from '../../components'\nimport { DownArrow } from '../HeaderNavigation/icons'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay'\nimport type {\n  SearchPageProps,\n  SortKey,\n  SearchProductItemProps,\n  SearchBlogItemProps,\n  SearchPageItemProps,\n  SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n  product,\n  onSecondaryButton,\n  onPrimaryButton,\n  searchValue,\n  variantData,\n}: SearchProductItemProps) => {\n  const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const listingLink = useMemo(() => {\n    return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [product?.handle, variant?.id])\n\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: coupon ? variant?.price : 0,\n    currencyCode: product?.price?.currencyCode || 'USD',\n  })\n\n  const tags = useMemo(() => {\n    return product?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [product?.tags])\n\n  return (\n    <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto relative\">\n      {product?.type === 'advertising' ? (\n        <Link href={product?.advertisingLink} className=\"h-full\">\n          <Picture\n            source={product?.advertisingBgImg?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n          />\n          <div className=\"absolute z-[2] left-0 right-0 bottom-0 top-0 p-4 desktop:p-6 [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600\">\n            <Text html={product?.advertisingTitle} className=\"text-sm desktop:text-[18px] text-white font-bold\" />\n            <Heading\n              size={3}\n              html={product?.advertisingSubtitle}\n              className=\"font-bold mt-2 line-clamp-4 laptop:line-clamp-3 text-white\"\n            />\n          </div>\n        </Link>\n      ) : (\n        <a\n          href={listingLink}\n          className=\" no-underline h-full bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 flex flex-col desktop:p-6 desktop:pt-4 px-2 py-4 tablet:p-4\"\n        >\n          <div className=\"ipc_search_product_item_image\">\n            <Picture\n              className=\"lg-desktop:w-[196px] lg-desktop:h-[196px] w-[138px] h-[138px] mx-auto\"\n              source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n              alt={product.title}\n              imgClassName=\"object-cover size-full\"\n            />\n          </div>\n          <div className=\"ipc_search_product_item_content flex-1 mt-1 desktop:mt-2 lg-desktop:mt-3 flex flex-col justify-between desktop:gap-6 gap-4\">\n            <div className=\"flex-1\">\n              <div className=\"flex gap-2 mb-2 lg-desktop:h-[28px] h-[24px] mb-1\">\n                {tags?.map((tag: string) => (\n                  <Text\n                    as=\"p\"\n                    html={tag}\n                    className=\"text-brand-0 h-full rounded-full border-[1.6px] lg-desktop:px-2 px-[6px] border-[#00BEFA] text-sm font-bold !leading-[24px] lg-desktop:!leading-[28px]\"\n                  />\n                ))}\n              </div>\n              <Text\n                className=\"text-xl desktop:text-2xl font-bold !leading-[1.2] line-clamp-3 tablet:line-clamp-2\"\n                weight=\"bold\"\n                html={highlightSearchWord(product?.title || '', searchValue || '')}\n              />\n              <Text\n                as=\"p\"\n                className=\"text-sm lg-desktop:text-[18px] mt-1 font-bold line-clamp-2 tablet:line-clamp-1\"\n                html={highlightSearchWord(product.description, searchValue || '')}\n              />\n            </div>\n            <div>\n              <div className=\"mb-2 flex items-center\">\n                {!variant?.availableForSale ? (\n                  <div className=\"text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n                    {copyWriting?.soldOutText || 'Sold Out'}\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"final-price text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n                      {variant?.availableForSale ? price || '' : ''}\n                    </div>\n                    <div className=\"origin-price text-[18px] tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 font-bold line-through\">\n                      {variant?.availableForSale ? basePrice || '' : ''}\n                    </div>\n                  </>\n                )}\n              </div>\n              <div\n                className={cn(\n                  'ipc_search_product_item_button_group',\n                  'lg-desktop:gap-3 flex flex-col laptop:flex-row items-center gap-2'\n                )}\n              >\n                {copyWriting?.learnMoreText && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"w-full laptop:w-auto\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onSecondaryButton?.()}\n                  >\n                    {copyWriting?.learnMoreText}\n                  </Button>\n                )}\n                {copyWriting?.shopNowText && (\n                  <Button\n                    variant=\"primary\"\n                    className=\"w-full laptop:w-auto\"\n                    size=\"lg\"\n                    disabled={!variant?.availableForSale}\n                    onClick={() => onPrimaryButton?.()}\n                  >\n                    {copyWriting?.shopNowText}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        </a>\n      )}\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n  const { copyWriting } = useAiuiContext()\n\n  const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n  return (\n    <div className=\"ipc_search_blog_item py-6 border-b border-[#E4E5E6]\">\n      <div className=\"ipc_search_blog_item_content flex flex-col gap-4 laptop:flex-row-reverse laptop:gap-8 desktop:gap-16\">\n        <div className=\"laptop:flex-[440] desktop:flex-[540] h-[240px] desktop:h-[280px]\">\n          <Picture\n            source={blog?.image?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            alt={blog?.title}\n          />\n        </div>\n        <div className=\"laptop:flex-[424] flex flex-col justify-center desktop:flex-[704] lg-desktop:flex-[1056]\">\n          <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n          <Text\n            html={highlightSearchWord(blog?.content, searchValue)}\n            className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1 line-clamp-2\"\n          />\n          <div className=\"mt-4 desktop:mt-6\">\n            <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n              {copyWriting?.learnMoreText || 'Learn More'}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n  return (\n    <div className=\"ipc_search_page_items py-6 border-b border-[#E4E5E6]\">\n      <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n      <Text\n        as=\"p\"\n        html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n        className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1\"\n      />\n      <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"mt-4 desktop:mt-6\">\n        {copyWriting?.learnMoreText || 'Learn More'}\n      </Button>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n  return (\n    <div className=\"flex flex-col gap-4 items-center justify-center\">\n      <Picture source={url} className=\"w-[240px] h-[180px]\" imgClassName=\"object-cover\" />\n      <Text html={label} className=\"desktop:text-[18px] font-bold text-sm leading-[1.4]\" />\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n  products,\n  title,\n  buildProps,\n  onSecondaryButton,\n  onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n  const { products: buildProducts } = buildProps || {}\n  return (\n    <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n      <Heading size={4} weight=\"bold\" html={title} />\n      <div className=\" grid grid-cols-2 gap-y-4 gap-x-3 mt-6 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n        {products?.map((product: any, index: number) => {\n          const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n          const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n          return (\n            <SearchProductItem\n              product={buildProduct}\n              variantData={variant}\n              key={product.id + index}\n              onSecondaryButton={() => onSecondaryButton?.()}\n              onPrimaryButton={() => onPrimaryButton?.()}\n            />\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n  searchResult,\n  searchValue,\n  data,\n  onSecondaryButton,\n  onPrimaryButton,\n  // loadMore,\n  onChangeSort,\n  loading,\n  searchResultCount,\n  onChangeTab,\n  buildProps,\n}: SearchPageProps) => {\n  const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n  const isInsertAdvertising = useRef(false)\n  const [isOpenSort, setIsOpenSort] = useState(false)\n  const [currentSortKey, setCurrentSortKey] = useState<any>({\n    [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n      ?.sortKeys?.[0],\n    [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n    [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n  })\n\n  const searchProductsResult = useMemo(() => {\n    return searchResult?.products || []\n  }, [searchResult])\n\n  const searchBlogsResult = useMemo(() => {\n    return searchResult?.blogs || []\n  }, [searchResult])\n\n  const searchPagesResult = useMemo(() => {\n    return searchResult?.pages || []\n  }, [searchResult])\n\n  const totalCount = useMemo(() => {\n    return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n  }, [searchResultCount])\n\n  const searchProductsResultWithAdvertising = useMemo(() => {\n    const advertisingData = {\n      advertisingBgImg: currentTab?.advertisingBgImg,\n      advertisingTitle: currentTab?.advertisingTitle,\n      advertisingSubtitle: currentTab?.advertisingSubtitle,\n      advertisingLink: currentTab?.advertisingLink,\n      type: 'advertising',\n    }\n    if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n      if (searchProductsResult?.length >= 8) {\n        searchProductsResult?.splice(7, 0, advertisingData)\n        isInsertAdvertising.current = true\n      } else {\n        searchProductsResult?.push(advertisingData)\n        isInsertAdvertising.current = true\n      }\n    }\n    return searchProductsResult\n  }, [currentTab, searchProductsResult])\n\n  return (\n    <div className=\"ipc_search_page desktop:py-[128px] py-16 tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4\">\n      <Heading\n        size={4}\n        weight=\"bold\"\n        html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n      />\n      <div className=\"mt-6\">\n        <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n          <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n            <TabsList>\n              {data?.tabs?.map((tab: any) => (\n                <TabsTrigger\n                  onClick={() => {\n                    setCurrentTab(tab)\n                    onChangeTab?.(tab?.tabType)\n                  }}\n                  key={tab.id}\n                  defaultValue=\"products\"\n                  value={tab.tabType}\n                >\n                  {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            <DropdownMenu onOpenChange={setIsOpenSort}>\n              <DropdownMenuTrigger asChild>\n                <button className=\"text-base mt-6 desktop:mt-0 leading-[1.2] font-bold flex items-center\">\n                  {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n                  <DownArrow\n                    className={cn('size-4 inline-block', {\n                      'rotate-180': isOpenSort,\n                    })}\n                  />\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\" sideOffset={8} className=\"bg-white py-2 !px-0 rounded-none\">\n                {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n                  return (\n                    <DropdownMenuItem\n                      className={cn(\n                        'px-3 laptop:px-4 py-4 text-sm laptop:text-base font-bold hover:bg-[#EAEAEC] hover:text-current',\n                        {\n                          'font-bold': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n                        }\n                      )}\n                      onClick={() => {\n                        isInsertAdvertising.current = false\n                        onChangeSort?.(currentTab?.tabType, sortKey)\n                        setCurrentSortKey((prev: any) => ({\n                          ...prev,\n                          [currentTab?.tabType]: sortKey,\n                        }))\n                      }}\n                      key={sortKey.id}\n                    >\n                      {sortKey.label}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n          <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n            <div className=\"grid grid-cols-2 gap-y-4 gap-x-3 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n              {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n                <SearchProductItem\n                  searchValue={searchValue}\n                  key={product.id + index}\n                  product={product}\n                  onSecondaryButton={() => onSecondaryButton?.(product)}\n                  onPrimaryButton={() => onPrimaryButton?.(product)}\n                />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"flex w-full mt-6 justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchProductsResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n            <div>\n              {searchBlogsResult?.map((blog: any) => (\n                <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n              ))}\n              {loading ? (\n                <div className=\"flex mt-6 justify-center\">\n                  <LoadingDots />\n                </div>\n              ) : (\n                !searchBlogsResult?.length && (\n                  <>\n                    <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                    <SearchRecommendProducts\n                      products={data?.recommendProducts || []}\n                      buildProps={buildProps}\n                      title={data?.recommendProductsTitle}\n                    />\n                  </>\n                )\n              )}\n            </div>\n          </TabsContent>\n          <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n            <div>\n              {searchPagesResult?.map((page: any, index: number) => (\n                <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n              ))}\n            </div>\n            {loading ? (\n              <div className=\"flex mt-6 justify-center\">\n                <LoadingDots />\n              </div>\n            ) : (\n              !searchPagesResult?.length && (\n                <>\n                  <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n                  <SearchRecommendProducts\n                    products={data?.recommendProducts || []}\n                    buildProps={buildProps}\n                    title={data?.recommendProductsTitle}\n                  />\n                </>\n              )\n            )}\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n\nexport default SearchPage\n"],
   "mappings": "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",
   "names": ["SearchPage_exports", "__export", "SearchPage_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_types", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "index", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "sortKey", "prev"]
 }

package/dist/cjs/biz-components/Specs/dropdown.d.ts

@@ -0,0 +1,11 @@
+export type DropDownProps = {
+    index: number;
+    active: any;
+    list: any;
+    setActive: any;
+    setVisible: any;
+    visible: any;
+    filterActive: any;
+};
+declare const DropDown: ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
+export default DropDown;

package/dist/cjs/biz-components/Specs/dropdown.js

@@ -0,0 +1,3 @@
+"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(o,e)=>{for(var a in e)p(o,a,{get:e[a],enumerable:!0})},D=(o,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!v.call(o,t)&&t!==a&&p(o,t,{get:()=>e[t],enumerable:!(s=x(e,t))||s.enumerable});return o};var k=o=>D(p({},"__esModule",{value:!0}),o);var C={};y(C,{default:()=>E});module.exports=k(C);var c=require("react/jsx-runtime"),l=require("react");const g="openDropDown",w=({index:o,active:e,list:a,setActive:s,setVisible:t,visible:u,filterActive:i})=>{const f=(0,l.useRef)(null);(0,l.useEffect)(()=>{const n=r=>{const d=r?.target?.getAttribute?.("class");!f?.current?.contains(r?.target)&&!d?.includes(g)&&t({...u,[o]:!1})};return document.addEventListener("click",n),()=>document.removeEventListener("click",n)},[]);const h=(0,l.useMemo)(()=>{const n=Object.keys(i||{});return a?.filter(r=>!n?.find(b=>i?.[b]?.handle===r?.handle))},[i,a]);return(0,c.jsx)("div",{ref:f,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${u?.[o]?"block":"hidden"}`,children:(0,c.jsx)("div",{className:"m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0",children:h?.map((n,r)=>{const d=n?.sku||n?.variants?.[0]?.sku;return(0,c.jsx)("div",{onClick:()=>{s({...e,[r]:{sku:d,name:n?.name,handle:n?.handle}}),t({...u,[r]:!1})},title:n?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
+                ${n?.handle===e?.handle?"bg-[#EAEAEC]":""}`,children:n?.name},r)})})})};var E=w;
+//# sourceMappingURL=dropdown.js.map

package/dist/cjs/biz-components/Specs/dropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Specs/dropdown.tsx"],
+  "sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n  index: number\n  active: any\n  list: any\n  setActive: any\n  setVisible: any\n  visible: any\n  filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const isDel = event?.target?.getAttribute?.('class')\n      const isContainer = !dropDownRef?.current?.contains(event?.target)\n      if (isContainer && !isDel?.includes(clickContent)) {\n        setVisible({ ...visible, [index]: false })\n      }\n    }\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [])\n\n  const handleList = useMemo(() => {\n    const activeIndex = Object.keys(filterActive || {})\n    return list?.filter((item: { handle: any }) => {\n      const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n      return !currentIndex\n    })\n  }, [filterActive, list])\n\n  return (\n    <div\n      ref={dropDownRef}\n      className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n    >\n      <div className={'m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0'}>\n        {handleList?.map((item: any, index: number) => {\n          const currentSku = item?.sku || item?.variants?.[0]?.sku\n          return (\n            <div\n              key={index}\n              onClick={() => {\n                setActive({\n                  ...active,\n                  [index]: {\n                    sku: currentSku,\n                    name: item?.name,\n                    handle: item?.handle,\n                  },\n                })\n                setVisible({ ...visible, [index]: false })\n              }}\n              title={item?.name}\n              className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n                ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n            >\n              {item?.name}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default DropDown\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8CY,IAAAI,EAAA,6BA9CZC,EAA2C,iBAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,KAAc,UAAuB,IAAI,KAE/C,aAAU,IAAM,CACd,MAAMC,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,KAAa,WAAQ,IAAM,CAC/B,MAAMC,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,SACE,OAAC,OACC,IAAKK,EACL,UAAW,2GAA2GF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAE3J,mBAAC,OAAI,UAAW,+FACb,SAAAW,GAAY,IAAI,CAACE,EAAWb,IAAkB,CAC7C,MAAMe,EAAaF,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,SACE,OAAC,OAEC,QAAS,IAAM,CACbV,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKe,EACL,KAAMF,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFb,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAON,EAAQK",
+  "names": ["dropdown_exports", "__export", "dropdown_default", "__toCommonJS", "import_jsx_runtime", "import_react", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "currentSku"]
+}

package/dist/cjs/biz-components/Specs/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/cjs/biz-components/Specs/index.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var O=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var Q=(l,n)=>{for(var r in n)v(l,r,{get:n[r],enumerable:!0})},F=(l,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let b of $(n))!z.call(l,b)&&b!==r&&v(l,b,{get:()=>n[b],enumerable:!(u=V(n,b))||u.enumerable});return l};var S=(l,n,r)=>(r=l!=null?O(q(l)):{},F(n||!l||!l.__esModule?v(r,"default",{value:l,enumerable:!0}):r,l)),G=l=>F(v({},"__esModule",{value:!0}),l);var K={};Q(K,{default:()=>J});module.exports=G(K);var e=require("react/jsx-runtime"),A=S(require("./dropdown")),L=require("../AiuiProvider/index.js"),T=require("react-responsive"),f=require("react"),H=require("../../shared/Styles.js"),R=require("../ShelfDisplay/shelfDisplay.js"),d=require("../../components/index.js"),g=S(require("react"));const j=g.default.forwardRef((l,n)=>{const{data:r,buildData:u,onChange:b}=l||{},y=(0,T.useMediaQuery)({query:"(max-width: 768px)"}),[i,h]=(0,f.useState)({}),[w,N]=(0,f.useState)({}),D=(0,g.useRef)(null),{locale:P="us"}=(0,L.useAiuiContext)(),{LeftMenu:E,RightMenu:C,DefaultSelectMenu:k}=(0,f.useMemo)(()=>r?.data||{},[r?.data]),_=t=>{try{const o=new URL(t).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(o)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(t)}},I=(t,s)=>{const o=C?.menus?.find?.(p=>p?.handle===t?.handle),a=t?.variants?.find?.(p=>p?.sku===t?.sku||o?.sku),c=a?.coupons?.[0],{price:m,basePrice:x}=(0,R.formatVariantPrice)({locale:P||"us",amount:c?c?.variant_price4wscode:a?.price,baseAmount:c?a?.price:0,currencyCode:t?.price?.currencyCode||"USD"});return(0,e.jsxs)("div",{className:"box-border overflow-hidden specs-sku-node-wrap",children:[(0,e.jsxs)(d.Text,{className:"relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text",onClick:()=>N({...w,[s]:!w?.[s]}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between overflow-hidden",children:[(0,e.jsx)("div",{className:"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title",title:i?.[s]?.name,children:i?.[s]?.name||""}),(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:(0,e.jsx)("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})})]}),(0,e.jsx)(A.default,{index:s,list:u?.products,active:i,filterActive:i,setActive:h,visible:w,setVisible:N})]}),(0,e.jsx)("div",{className:"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]",children:(0,e.jsx)(d.Picture,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover"})}),a?.availableForSale?(0,e.jsxs)("div",{className:"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl",children:[(0,e.jsx)("div",{className:"text-[#1D1D1F] specs-sku-node-price",children:m||""}),x&&(0,e.jsx)("div",{className:"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price",children:x})]}):!1,k?.buttonText?(0,e.jsx)(d.Button,{onClick:()=>b?.(t),className:"specs-sku-node-button",children:k?.buttonText}):null]})},U=t=>{if(t)return t&&typeof t!="string"?(0,e.jsxs)("div",{className:"size-full",children:[(0,e.jsx)("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:t?.text||""}}),(0,e.jsx)(d.Picture,{source:t?.imgUrl,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"})]}):(0,e.jsx)("div",{className:"break-all",children:_(t)?(0,e.jsx)(d.Picture,{source:t,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"}):(0,e.jsx)("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:t||""}})})},M=t=>t.map((s,o)=>{const a=o===0;return(0,e.jsxs)("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col  specs-product-node-wrap",children:[(0,e.jsx)(d.Heading,{as:"h3",html:s||"",className:"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title"}),(0,e.jsx)("div",{className:"col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body",children:Object.keys(i)?.map?.(c=>{const m=i?.[c],x=C?.menus?.find?.(p=>p?.handle===m?.handle)?.subTitle;return U(x?.[s])})})]},s)}),B=t=>{if(!i)return;const{subTitle:s,isProduct:o}=t;return o?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product",children:[t?.title&&(0,e.jsx)(d.Heading,{as:"h3",html:t?.title||"",className:"l:hidden specs-item-product-title"}),(0,e.jsx)("div",{className:"col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body",children:Object.keys(i)?.map((a,c)=>{const m=i?.[a],x=u?.products?.find?.(p=>p?.handle===m?.handle);return(0,e.jsx)("div",{children:I({...x,sku:m?.sku,item:a},c)},a)})})]}),s?.length?M(s):null]}):M(s)};return(0,g.useImperativeHandle)(n,()=>D.current),(0,f.useEffect)(()=>{if(!u?.products?.length)return;const t=k?.sku?.split?.(",")||[];let s={};t?.forEach?.((o,a)=>{const c=u?.products?.find?.(m=>{if(m?.variants?.find?.(p=>p?.sku===o))return!0});c&&(s={...s,[a]:{sku:o,name:c?.name,handle:c?.handle}})}),h(s)},[u]),(0,f.useEffect)(()=>{if(y){const t=Object.keys(i||{});if(t?.length>2){const s=t?.slice?.(0,2);let o={};s?.forEach?.(a=>{o={...o,[a]:i?.[a]}}),h(o)}}},[y]),(0,e.jsx)("div",{className:"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper",ref:D,children:E?.data?(0,e.jsx)("div",{className:"box-border w-full overflow-hidden specs-wrapper-content",children:E?.data?.map?.((t,s)=>(0,e.jsx)("div",{className:"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item",children:B(t)},s))}):null})});j.displayName="Specs";var J=(0,H.withLayout)(j);
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Specs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Specs/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    return (\n      <div className=\"box-border overflow-hidden specs-sku-node-wrap\">\n        <Text\n          className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n          onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n              title={active?.[index]?.name}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"25\"\n              viewBox=\"0 0 24 25\"\n              fill=\"none\"\n              className=\"openDropDown\"\n            >\n              <path\n                d=\"M6 9.5L12 15.5L18 9.5\"\n                stroke=\"#1D1D1F\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n            <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {DefaultSelectMenu?.buttonText ? (\n          <Button onClick={() => onChange?.(product)} className=\"specs-sku-node-button\">\n            {DefaultSelectMenu?.buttonText}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (!v) return\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n          />\n          <div\n            className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
+  "mappings": "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",
+  "names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
+}

package/dist/cjs/biz-components/TabsGroup/index.d.ts

@@ -0,0 +1,7 @@
+import type { TabsGroupProps } from './types.js';
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TabsGroupProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/cjs/biz-components/TabsGroup/index.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var N=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var h=(a,e)=>{for(var s in e)o(a,s,{get:e[s],enumerable:!0})},n=(a,e,s,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of v(e))!d.call(a,i)&&i!==s&&o(a,i,{get:()=>e[i],enumerable:!(m=g(e,i))||m.enumerable});return a};var p=(a,e,s)=>(s=a!=null?N(P(a)):{},n(e||!a||!a.__esModule?o(s,"default",{value:a,enumerable:!0}):s,a)),y=a=>n(o({},"__esModule",{value:!0}),a);var C={};h(C,{default:()=>L});module.exports=y(C);var r=require("react/jsx-runtime"),l=require("../../shared/Styles.js"),b=p(require("../../components/tabs.js")),c=require("../../helpers/index.js"),u=p(require("react"));const k=u.default.forwardRef(({data:a,className:e},s)=>{const{theme:m,shape:i,align:f,tabs:T}=a;return(0,r.jsx)("section",{ref:s,className:(0,c.cn)(m==="dark"?"aiui-dark":"",e),children:(0,r.jsxs)(b.Tabs,{shape:i,align:f,defaultValue:T[0].tabName,children:[(0,r.jsx)(b.TabsList,{className:"tabs-list",children:T.map(t=>(0,r.jsx)(b.TabsTrigger,{value:t.tabName,className:"tabs-trigger",children:t.tabName},t.tabName))}),T.map(t=>(0,r.jsx)(b.TabsContent,{value:t.tabName,className:"tabs-content",children:t.children(t.tabContent?.[0])},t.tabName))]})})});var L=(0,l.withLayout)(k);
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/TabsGroup/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/TabsGroup/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsGroupProps } from './types.js'\nimport React from 'react'\n\nconst TabsGroup = React.forwardRef<HTMLDivElement, TabsGroupProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs } = data\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {tab.children(tab.tabContent?.[0])}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(TabsGroup)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAYM,IAAAI,EAAA,6BAXNC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmB,kCAEnBC,EAAkB,oBAElB,MAAMC,EAAY,EAAAC,QAAM,WAA2C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CACxG,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,CAAK,EAAIN,EAEtC,SACE,OAAC,WAAQ,IAAKE,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAIF,CAAS,EACtF,oBAACN,EAAc,KAAd,CAAmB,MAAOS,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,oBAACX,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAW,EAAK,IAAIC,MACR,OAACZ,EAAc,YAAd,CAA4C,MAAOY,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCD,EAAK,IAAIC,MACR,OAACZ,EAAc,YAAd,CAA4C,MAAOY,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SAASA,EAAI,aAAa,CAAC,CAAC,GADHA,EAAI,OAEpC,CACD,GACH,EACF,CAEJ,CAAC,EAED,IAAOhB,KAAQ,cAAWO,CAAS",
+  "names": ["TabsGroup_exports", "__export", "TabsGroup_default", "__toCommonJS", "import_jsx_runtime", "import_Styles", "TabsPrimitive", "import_helpers", "import_react", "TabsGroup", "React", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "tab"]
+}

package/dist/cjs/biz-components/TabsGroup/types.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { Align, Shape, Theme } from '../../types/props.js';
+export type TabsGroupProps = {
+    data: {
+        sectionTitle?: string;
+        theme: Theme;
+        shape: Shape;
+        align: Align;
+        tabs: {
+            tabName: string;
+            tabContent: any[];
+            children: (data: any) => React.ReactNode;
+        }[];
+    };
+    className?: string;
+};

package/dist/cjs/biz-components/TabsGroup/types.js

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

package/dist/cjs/biz-components/TabsGroup/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/TabsGroup/types.ts"],
+  "sourcesContent": ["import type React from 'react'\nimport type { Align, Shape, Theme } from '../../types/props.js'\n\nexport type TabsGroupProps = {\n  data: {\n    sectionTitle?: string\n    theme: Theme\n    shape: Shape\n    align: Align\n    tabs: {\n      tabName: string\n      tabContent: any[]\n      children: (data: any) => React.ReactNode\n    }[]\n  }\n  className?: string\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/cjs/biz-components/index.d.ts

@@ -30,3 +30,5 @@ export { default as AiuiProvider } from './AiuiProvider/index.js';
 export { default as Tabs } from './Tabs/index.js';
 export { default as CreativeModule } from './CreativeModule/index.js';
 export { default as GraphicOverlay } from './GraphicOverlay/index.js';
+export { default as Specs } from './Specs/index.js';
+export { default as TabGroup } from './TabsGroup/index.js';

package/dist/cjs/biz-components/index.js

@@ -1,2 +1,2 @@
-"use strict";var N=Object.create;var p=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var R=(a,r)=>{for(var t in r)p(a,t,{get:r[t],enumerable:!0})},s=(a,r,t,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of w(r))!O.call(a,f)&&f!==t&&p(a,f,{get:()=>r[f],enumerable:!(u=_(r,f))||u.enumerable});return a};var e=(a,r,t)=>(t=a!=null?N(D(a)):{},s(r||!a||!a.__esModule?p(t,"default",{value:a,enumerable:!0}):t,a)),W=a=>s(p({},"__esModule",{value:!0}),a);var z={};R(z,{AccordionCards:()=>P.default,AiuiProvider:()=>j.default,BrandEquity:()=>d.default,Category:()=>n.default,CreativeModule:()=>I.default,Evaluate:()=>h.default,Faq:()=>q.default,FooterNavigation:()=>T.default,Graphic:()=>g.default,GraphicAttractionBlock:()=>v.default,GraphicOverlay:()=>F.default,HeaderNavigation:()=>E.default,HeroBanner:()=>M.default,IPC_SEARCH_PAGE:()=>l.IPC_SEARCH_PAGE,Marquee:()=>C.default,MarqueeImageContent:()=>o.MarqueeImageContent,MarqueeItem:()=>o.MarqueeItem,MarqueeTextContent:()=>o.MarqueeTextContent,MediaPlayerBase:()=>B.default,MediaPlayerMulti:()=>S.default,MediaPlayerSticky:()=>G.default,MemberEquity:()=>i.default,MultiLayoutGraphicBlock:()=>A.default,SearchPage:()=>L.default,SearchPageTabType:()=>l.SearchPageTabType,ShelfDisplay:()=>y.default,Slogan:()=>m.default,Spacer:()=>c.default,Tabs:()=>H.default,Title:()=>x.default,WhyChoose:()=>k.default,withLayout:()=>b.withLayout});module.exports=W(z);var d=e(require("./BrandEquity/index.js")),i=e(require("./MemberEquity/index.js")),m=e(require("./Slogan/index.js")),x=e(require("./Title/index.js")),c=e(require("./Spacer/index.js")),y=e(require("./ShelfDisplay/index.js")),h=e(require("./Evaluate/index.js")),n=e(require("./Category/index.js")),M=e(require("./HeroBanner/index.js")),P=e(require("./AccordionCards/index.js")),g=e(require("./Graphic/index.js")),B=e(require("./MediaPlayerBase/index.js")),G=e(require("./MediaPlayerSticky/index.js")),S=e(require("./MediaPlayerMulti/index.js")),C=e(require("./Marquee/index.js")),k=e(require("./WhyChoose/index.js")),q=e(require("./Faq/index.js")),o=require("./Marquee/index.js"),A=e(require("./MultiLayoutGraphicBlock/index.js")),v=e(require("./GraphicAttractionBlock/index.js")),E=e(require("./HeaderNavigation/index.js")),T=e(require("./FooterNavigation/index.js")),L=e(require("./SearchPage/index.js")),l=require("./SearchPage/types.js"),b=require("../shared/Styles.js"),j=e(require("./AiuiProvider/index.js")),H=e(require("./Tabs/index.js")),I=e(require("./CreativeModule/index.js")),F=e(require("./GraphicOverlay/index.js"));
+"use strict";var w=Object.create;var p=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var z=(a,r)=>{for(var o in r)p(a,o,{get:r[o],enumerable:!0})},s=(a,r,o,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of O(r))!W.call(a,f)&&f!==o&&p(a,f,{get:()=>r[f],enumerable:!(u=D(r,f))||u.enumerable});return a};var e=(a,r,o)=>(o=a!=null?w(R(a)):{},s(r||!a||!a.__esModule?p(o,"default",{value:a,enumerable:!0}):o,a)),J=a=>s(p({},"__esModule",{value:!0}),a);var K={};z(K,{AccordionCards:()=>P.default,AiuiProvider:()=>j.default,BrandEquity:()=>d.default,Category:()=>n.default,CreativeModule:()=>I.default,Evaluate:()=>h.default,Faq:()=>q.default,FooterNavigation:()=>E.default,Graphic:()=>G.default,GraphicAttractionBlock:()=>v.default,GraphicOverlay:()=>F.default,HeaderNavigation:()=>T.default,HeroBanner:()=>M.default,IPC_SEARCH_PAGE:()=>l.IPC_SEARCH_PAGE,Marquee:()=>C.default,MarqueeImageContent:()=>t.MarqueeImageContent,MarqueeItem:()=>t.MarqueeItem,MarqueeTextContent:()=>t.MarqueeTextContent,MediaPlayerBase:()=>S.default,MediaPlayerMulti:()=>B.default,MediaPlayerSticky:()=>g.default,MemberEquity:()=>m.default,MultiLayoutGraphicBlock:()=>A.default,SearchPage:()=>b.default,SearchPageTabType:()=>l.SearchPageTabType,ShelfDisplay:()=>y.default,Slogan:()=>x.default,Spacer:()=>c.default,Specs:()=>N.default,TabGroup:()=>_.default,Tabs:()=>H.default,Title:()=>i.default,WhyChoose:()=>k.default,withLayout:()=>L.withLayout});module.exports=J(K);var d=e(require("./BrandEquity/index.js")),m=e(require("./MemberEquity/index.js")),x=e(require("./Slogan/index.js")),i=e(require("./Title/index.js")),c=e(require("./Spacer/index.js")),y=e(require("./ShelfDisplay/index.js")),h=e(require("./Evaluate/index.js")),n=e(require("./Category/index.js")),M=e(require("./HeroBanner/index.js")),P=e(require("./AccordionCards/index.js")),G=e(require("./Graphic/index.js")),S=e(require("./MediaPlayerBase/index.js")),g=e(require("./MediaPlayerSticky/index.js")),B=e(require("./MediaPlayerMulti/index.js")),C=e(require("./Marquee/index.js")),k=e(require("./WhyChoose/index.js")),q=e(require("./Faq/index.js")),t=require("./Marquee/index.js"),A=e(require("./MultiLayoutGraphicBlock/index.js")),v=e(require("./GraphicAttractionBlock/index.js")),T=e(require("./HeaderNavigation/index.js")),E=e(require("./FooterNavigation/index.js")),b=e(require("./SearchPage/index.js")),l=require("./SearchPage/types.js"),L=require("../shared/Styles.js"),j=e(require("./AiuiProvider/index.js")),H=e(require("./Tabs/index.js")),I=e(require("./CreativeModule/index.js")),F=e(require("./GraphicOverlay/index.js")),N=e(require("./Specs/index.js")),_=e(require("./TabsGroup/index.js"));
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/biz-components/index.ts"],
-  "sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,q6BAAAE,EAAAF,GAAA,IAAAG,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAiC,+BACjCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCACtCC,EAA0C,wCAC1CC,EAAmC,iCACnCC,EAA2C,yCAC3CC,EAA6C,2CAC7CC,EAA4C,0CAC5CC,EAAmC,iCACnCC,EAAqC,mCACrCC,EAA+B,6BAC/BF,EAAqE,8BACrEG,EAAmD,iDAEnDC,EAAkD,gDAElDC,EAA4C,0CAC5CC,EAA4C,0CAC5CC,EAAsC,oCAEtCC,EAAmD,iCAEnDC,EAA2B,+BAC3BC,EAAwC,sCACxCC,EAAgC,8BAChCC,EAA0C,wCAC1CC,EAA0C",
-  "names": ["biz_components_exports", "__export", "__toCommonJS", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_Title", "import_Spacer", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "import_MediaPlayerBase", "import_MediaPlayerSticky", "import_MediaPlayerMulti", "import_Marquee", "import_WhyChoose", "import_Faq", "import_MultiLayoutGraphicBlock", "import_GraphicAttractionBlock", "import_HeaderNavigation", "import_FooterNavigation", "import_SearchPage", "import_types", "import_Styles", "import_AiuiProvider", "import_Tabs", "import_CreativeModule", "import_GraphicOverlay"]
+  "sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,g9BAAAE,EAAAF,GAAA,IAAAG,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAiC,+BACjCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCACtCC,EAA0C,wCAC1CC,EAAmC,iCACnCC,EAA2C,yCAC3CC,EAA6C,2CAC7CC,EAA4C,0CAC5CC,EAAmC,iCACnCC,EAAqC,mCACrCC,EAA+B,6BAC/BF,EAAqE,8BACrEG,EAAmD,iDAEnDC,EAAkD,gDAElDC,EAA4C,0CAC5CC,EAA4C,0CAC5CC,EAAsC,oCAEtCC,EAAmD,iCAEnDC,EAA2B,+BAC3BC,EAAwC,sCACxCC,EAAgC,8BAChCC,EAA0C,wCAC1CC,EAA0C,wCAC1CC,EAAiC,+BACjCC,EAAoC",
+  "names": ["biz_components_exports", "__export", "__toCommonJS", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_Title", "import_Spacer", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "import_MediaPlayerBase", "import_MediaPlayerSticky", "import_MediaPlayerMulti", "import_Marquee", "import_WhyChoose", "import_Faq", "import_MultiLayoutGraphicBlock", "import_GraphicAttractionBlock", "import_HeaderNavigation", "import_FooterNavigation", "import_SearchPage", "import_types", "import_Styles", "import_AiuiProvider", "import_Tabs", "import_CreativeModule", "import_GraphicOverlay", "import_Specs", "import_TabsGroup"]
 }

package/dist/cjs/stories/specs.stories.d.ts

@@ -0,0 +1,13 @@
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<any, "ref"> & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }, "ref"> & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;