@anker-in/headless-ui 1.0.26-temp-111005 → 1.0.26-temp.1

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-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"],
+  "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"],
   "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/ProductCompare/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Media, Theme, Shape } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface ProductItemData {
     /** 产品标签文本 */
     text?: string;
@@ -12,21 +12,37 @@ export interface ProductItemData {
     /** 移动端封面图（仅用于视频） */
     mobPoster?: string;
 }
+/** 标题类型 */
+export type TitleType = 'selling-point' | 'primary' | 'secondary';
+/** 文本对齐方式 */
+export type TextAlign = 'left' | 'center';
+/** 图片宽度比例（2张图片时） */
+export type TwoImageRatio = '2:3' | '1:1';
+/** 图片宽度比例（3张图片时） */
+export type ThreeImageRatio = '1:1:1';
 export interface ProductCompareProps {
     /** 组件数据 */
     data: {
         /** 主标题 */
         title?: string;
+        /** 标题类型：selling-point（卖点）、primary（一级标题）、secondary（二级标题） */
+        titleType?: TitleType;
+        /** 标题图标（仅当 titleType 为 selling-point 时有效） */
+        titleIcon?: Media;
         /** 副标题 */
         subtitle?: string;
-        /** 我们的产品数据 */
-        ourProduct?: ProductItemData;
-        /** 竞品数据 */
-        competitor?: ProductItemData;
+        /** 副标题下方的图片 */
+        subtitleImage?: Media;
+        /** 文本对齐方式：left（左对齐）、center（居中） */
+        textAlign?: TextAlign;
+        /** 产品列表（支持2-3个产品） */
+        products?: ProductItemData[];
+        /** 2张图片时的宽度比例 */
+        twoImageRatio?: TwoImageRatio;
+        /** 3张图片时的宽度比例 */
+        threeImageRatio?: ThreeImageRatio;
         /** 主题：light 或 dark */
         theme?: Theme;
-        /** 形状：rounded 或 square */
-        shape?: Shape;
     };
     /** 外层容器类名 */
     className?: string;

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

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var a in o)n(e,a,{get:o[a],enumerable:!0})},N=(e,o,a,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of h(o))!g.call(e,p)&&p!==a&&n(e,p,{get:()=>o[p],enumerable:!(r=b(o,p))||r.enumerable});return e};var w=e=>N(n({},"__esModule",{value:!0}),e);var k={};v(k,{default:()=>P});module.exports=w(k);var t=require("react/jsx-runtime"),i=require("react"),l=require("../../components/index.js"),c=require("../../helpers/index.js"),f=require("../../shared/Styles.js");function x({children:e,offset:o=800}){const[a,r]=(0,i.useState)(!1),p=(0,i.useRef)(null);return(0,i.useEffect)(()=>{const d=new IntersectionObserver(([m])=>m.isIntersecting&&r(!0),{rootMargin:`${o}px`});return p.current&&d.observe(p.current),()=>d.disconnect()},[o]),(0,t.jsx)("div",{ref:p,className:"size-full",children:a&&e})}function s({media:e,poster:o,className:a}){return e?.url?e.mimeType?.startsWith("video/")?(0,t.jsx)("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:o,preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:a,width:e.width,height:e.height}):(0,t.jsx)("img",{src:e.url,alt:e.alt||"",className:a,width:e.width,height:e.height}):null}function y(e){const{title:o,subtitle:a,ourProduct:r={},competitor:p={},theme:d="light",shape:m="rounded"}=e.data,u={rounded:"rounded-[12px] laptop:rounded-[16px]",square:"rounded-none"}[m];return(0,t.jsxs)("section",{className:(0,c.cn)("product-compare text-info-primary bg-container-primary",e.className,{"aiui-dark":d==="dark"}),children:[o&&(0,t.jsx)(l.Heading,{as:"h2",size:3,html:o,className:"section-title text-left"}),a&&(0,t.jsx)(l.Text,{as:"p",size:2,html:a,className:"section-subtitle mt-[4px] text-left text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,t.jsxs)("div",{className:"product-compare-container mt-[24px] flex w-full flex-col items-stretch gap-[16px] tablet:flex-row tablet:flex-nowrap",children:[(0,t.jsxs)("div",{className:(0,c.cn)("product-compare-item product-compare-competitor relative order-2 flex-shrink overflow-hidden tablet:order-1 tablet:w-[50%] laptop:w-[39.30%]",u),children:[(0,t.jsx)("div",{className:"product-compare-label product-compare-competitor-label absolute left-[16px] top-[16px] rounded-[24px] bg-[#000] bg-opacity-20 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]",children:(0,t.jsx)(l.Heading,{as:"h6",className:"font-bold",size:1,children:p.text})}),(0,t.jsxs)(x,{offset:1500,children:[(0,t.jsx)(s,{media:p.media,poster:p.poster,className:"product-compare-media product-compare-competitor-media hidden w-full h-full object-cover laptop:block"}),(0,t.jsx)(s,{media:p.mobMedia,poster:p.mobPoster,className:"product-compare-media product-compare-competitor-media-mobile block laptop:hidden"})]})]}),(0,t.jsxs)("div",{className:(0,c.cn)("product-compare-item product-compare-our-product relative order-1 flex-shrink overflow-hidden tablet:order-2 tablet:w-[50%] laptop:w-[59.53%]",u),children:[(0,t.jsx)("div",{className:"product-compare-label product-compare-our-product-label absolute left-[16px] top-[16px] rounded-[24px] bg-brand-0 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]",children:(0,t.jsx)(l.Heading,{as:"h6",className:"font-bold",size:1,children:r.text})}),(0,t.jsxs)(x,{offset:1500,children:[(0,t.jsx)(s,{media:r.media,poster:r.poster,className:"product-compare-media product-compare-our-product-media hidden w-full laptop:block"}),(0,t.jsx)(s,{media:r.mobMedia,poster:r.mobPoster,className:"product-compare-media product-compare-our-product-media-mobile block laptop:hidden"})]})]})]})]})}var P=(0,f.withLayout)(y);
+"use strict";var f=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},z=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of M(t))!R.call(e,o)&&o!==r&&f(e,o,{get:()=>t[o],enumerable:!(l=P(t,o))||l.enumerable});return e};var C=e=>z(f({},"__esModule",{value:!0}),e);var D={};k(D,{default:()=>j});module.exports=C(D);var a=require("react/jsx-runtime"),c=require("react"),n=require("../../components/index.js"),p=require("../../helpers/index.js"),b=require("../../shared/Styles.js");function L({children:e,offset:t=800}){const[r,l]=(0,c.useState)(!1),o=(0,c.useRef)(null);return(0,c.useEffect)(()=>{const i=new IntersectionObserver(([x])=>x.isIntersecting&&l(!0),{rootMargin:`${t}px`});return o.current&&i.observe(o.current),()=>i.disconnect()},[t]),(0,a.jsx)("div",{ref:o,className:"size-full",children:r&&e})}function h({media:e,poster:t,className:r}){return e?.url?e.mimeType?.startsWith("video/")?(0,a.jsx)("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:t,preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,"webkit-playsinline":"true","x5-video-player-type":"h5","x5-video-player-fullscreen":"false","x5-playsinline":"true",className:r,width:e.width,height:e.height}):(0,a.jsx)("img",{src:e.url,alt:e.alt||"",className:r,width:e.width,height:e.height}):null}function A(e,t,r){return t===2?r==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function E(e){const{title:t,titleType:r="primary",titleIcon:l,subtitle:o,subtitleImage:i,textAlign:x="left",products:m=[],twoImageRatio:y="2:3",threeImageRatio:H="1:1:1",theme:w="light"}=e.data,u=x==="center"?"text-center":"text-left laptop:text-left",g=()=>r==="secondary"?3:4,v=()=>t?r==="selling-point"&&l?(0,a.jsxs)("div",{className:(0,p.cn)("product-compare-title-wrapper flex items-center gap-[8px]",u==="text-center"?"justify-center":""),children:[(0,a.jsx)("img",{src:l.url,alt:l.alt||"",className:"product-compare-title-icon h-[24px] w-[24px] laptop:h-[32px] laptop:w-[32px]"}),(0,a.jsx)(n.Heading,{as:"h2",size:g(),html:t,className:"product-compare-title",style:{color:"#00BEFA"}})]}):(0,a.jsx)(n.Heading,{as:"h2",size:g(),html:t,className:(0,p.cn)("product-compare-title",u)}):null;return(0,a.jsxs)("section",{className:(0,p.cn)("product-compare text-info-primary",e.className,{"aiui-dark":w==="dark"}),children:[v(),o&&(0,a.jsx)(n.Text,{as:"p",size:2,html:o,className:(0,p.cn)("product-compare-subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",u)}),i&&(0,a.jsx)("div",{className:(0,p.cn)("product-compare-subtitle-image mt-[16px] laptop:mt-[24px]",u==="text-center"?"flex justify-center":""),children:(0,a.jsx)("img",{src:i.url,alt:i.alt||"",className:"max-w-full",width:i.width,height:i.height})}),(0,a.jsx)("div",{className:"product-compare-container mt-[24px] flex w-full flex-col items-stretch gap-[16px] tablet:flex-row tablet:flex-nowrap laptop:mt-[32px]",children:m.map((s,d)=>{const N=d===m.length-1,T=A(d,m.length,y),I=N?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return(0,a.jsxs)("div",{className:(0,p.cn)("product-compare-item relative flex-shrink overflow-hidden rounded-box",T,{"order-2 tablet:order-1":d===0&&m.length===2,"order-1 tablet:order-2":d===1&&m.length===2}),children:[s.text&&(0,a.jsx)("div",{className:(0,p.cn)("product-compare-label absolute left-[16px] top-[16px] z-10 rounded-btn px-[20px] pb-[10px] pt-[11px] font-bold text-[#fff] laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]",I),children:(0,a.jsx)(n.Heading,{as:"h6",className:"font-bold",size:1,children:s.text})}),(0,a.jsxs)(L,{offset:1500,children:[(0,a.jsx)(h,{media:s.media,poster:s.poster,className:"product-compare-media hidden h-full w-full object-cover laptop:block"}),(0,a.jsx)(h,{media:s.mobMedia,poster:s.mobPoster,className:"product-compare-media-mobile block w-full laptop:hidden"})]})]},d)})})]})}var j=(0,b.withLayout)(E);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductCompare/index.tsx"],
-  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme, Shape } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js';\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      ([entry]) => entry.isIntersecting && setLoaded(true),\n      { rootMargin: `${offset}px` }\n    )\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return <div ref={ref} className=\"size-full\">{loaded && children}</div>\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: string; className?: string }) {\n  if (!media?.url) return null\n  \n  const isVideo = media.mimeType?.startsWith('video/')\n  \n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n  \n  return (\n    <img\n      src={media.url}\n      alt={media.alt || ''}\n      className={className}\n      width={media.width}\n      height={media.height}\n    />\n  )\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: string\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: string\n}\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u6211\u4EEC\u7684\u4EA7\u54C1\u6570\u636E */\n    ourProduct?: ProductItemData\n    /** \u7ADE\u54C1\u6570\u636E */\n    competitor?: ProductItemData\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n    /** \u5F62\u72B6\uFF1Arounded \u6216 square */\n    shape?: Shape\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const { title, subtitle, ourProduct = {}, competitor = {}, theme = 'light', shape = 'rounded' } = props.data\n  \n  // \u6839\u636E\u5F62\u72B6\u8BBE\u7F6E\u5706\u89D2\n  const shapeClass = {\n    rounded: 'rounded-[12px] laptop:rounded-[16px]',\n    square: 'rounded-none',\n  }[shape]\n\n  return (\n    <section className={cn('product-compare text-info-primary bg-container-primary', props.className, { 'aiui-dark': theme === 'dark' })}>\n      {title && <Heading as={'h2'} size={3} html={title} className=\"section-title text-left\" />}\n      {subtitle && <Text\n        as=\"p\"\n        size={2}\n        html={subtitle}\n        className=\"section-subtitle mt-[4px] text-left text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />}\n      <div className=\"product-compare-container mt-[24px] flex w-full flex-col items-stretch gap-[16px] tablet:flex-row tablet:flex-nowrap\">\n        <div className={cn('product-compare-item product-compare-competitor relative order-2 flex-shrink overflow-hidden tablet:order-1 tablet:w-[50%] laptop:w-[39.30%]', shapeClass)}>\n          <div className=\"product-compare-label product-compare-competitor-label absolute left-[16px] top-[16px] rounded-[24px] bg-[#000] bg-opacity-20 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]\">\n            <Heading as={'h6'} className=\"font-bold\" size={1}>\n              {competitor.text}\n            </Heading>\n          </div>\n          <LazyMedia offset={1500}>\n            <MediaElement\n              media={competitor.media}\n              poster={competitor.poster}\n              className=\"product-compare-media product-compare-competitor-media hidden w-full h-full object-cover laptop:block\"\n            />\n            <MediaElement\n              media={competitor.mobMedia}\n              poster={competitor.mobPoster}\n              className=\"product-compare-media product-compare-competitor-media-mobile block laptop:hidden\"\n            />\n          </LazyMedia>\n        </div>\n        <div className={cn('product-compare-item product-compare-our-product relative order-1 flex-shrink overflow-hidden tablet:order-2 tablet:w-[50%] laptop:w-[59.53%]', shapeClass)}>\n          <div className=\"product-compare-label product-compare-our-product-label absolute left-[16px] top-[16px] rounded-[24px] bg-brand-0 px-[20px] pb-[10px] pt-[11px] font-bold laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]\">\n            <Heading as={'h6'} className=\"font-bold\" size={1}>\n              {ourProduct.text}\n            </Heading>\n          </div>\n          <LazyMedia offset={1500}>\n            <MediaElement\n              media={ourProduct.media}\n              poster={ourProduct.poster}\n              className=\"product-compare-media product-compare-our-product-media hidden w-full laptop:block\"\n            />\n            <MediaElement\n              media={ourProduct.mobMedia}\n              poster={ourProduct.mobPoster}\n              className=\"product-compare-media product-compare-our-product-media-mobile block laptop:hidden\"\n            />\n          </LazyMedia>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)"],
-  "mappings": "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",
-  "names": ["ProductCompare_exports", "__export", "ProductCompare_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "ProductCompare", "props", "title", "subtitle", "ourProduct", "competitor", "theme", "shape", "shapeClass"]
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme, Shape } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js';\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      ([entry]) => entry.isIntersecting && setLoaded(true),\n      { rootMargin: `${offset}px` }\n    )\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return <div ref={ref} className=\"size-full\">{loaded && children}</div>\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: string; className?: string }) {\n  if (!media?.url) return null\n  \n  const isVideo = media.mimeType?.startsWith('video/')\n  \n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n  \n  return (\n    <img\n      src={media.url}\n      alt={media.alt || ''}\n      className={className}\n      width={media.width}\n      height={media.height}\n    />\n  )\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: string\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: string\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n    titleType?: TitleType\n    /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n    titleIcon?: Media\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n    subtitleImage?: Media\n    /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n    textAlign?: TextAlign\n    /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n    products?: ProductItemData[]\n    /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    twoImageRatio?: TwoImageRatio\n    /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    threeImageRatio?: ThreeImageRatio\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n  if (totalProducts === 2) {\n    if (twoImageRatio === '1:1') {\n      return 'laptop:flex-[1]'\n    }\n    // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n    return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n  }\n\n  if (totalProducts === 3) {\n    // 1:1:1 \u6BD4\u4F8B\n    return 'laptop:flex-[1]'\n  }\n\n  return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const {\n    title,\n    titleType = 'primary',\n    titleIcon,\n    subtitle,\n    subtitleImage,\n    textAlign = 'left',\n    products = [],\n    twoImageRatio = '2:3',\n    threeImageRatio = '1:1:1',\n    theme = 'light',\n  } = props.data\n\n\n  // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n  const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n  // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n  const getTitleSize = () => {\n    if (titleType === 'secondary') return 3\n    return 4\n  }\n\n  // \u6E32\u67D3\u6807\u9898\n  const renderTitle = () => {\n    if (!title) return null\n\n    // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n    if (titleType === 'selling-point' && titleIcon) {\n      return (\n        <div className={cn('product-compare-title-wrapper flex items-center gap-[8px]', alignClasses === 'text-center' ? 'justify-center' : '')}>\n          <img src={titleIcon.url} alt={titleIcon.alt || ''} className=\"product-compare-title-icon h-[24px] w-[24px] laptop:h-[32px] laptop:w-[32px]\" />\n          <Heading\n            as=\"h2\"\n            size={getTitleSize()}\n            html={title}\n            className=\"product-compare-title\"\n            style={{ color: '#00BEFA' }}\n          />\n        </div>\n      )\n    }\n\n    // \u666E\u901A\u6807\u9898\n    return (\n      <Heading\n        as=\"h2\"\n        size={getTitleSize()}\n        html={title}\n        className={cn('product-compare-title', alignClasses)}\n      />\n    )\n  }\n\n  return (\n    <section\n      className={cn('product-compare text-info-primary', props.className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      {renderTitle()}\n\n      {/* \u526F\u6807\u9898 */}\n      {subtitle && (\n        <Text\n          as=\"p\"\n          size={2}\n          html={subtitle}\n          className={cn(\n            'product-compare-subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div className={cn('product-compare-subtitle-image mt-[16px] laptop:mt-[24px]', alignClasses === 'text-center' ? 'flex justify-center' : '')}>\n          <img\n            src={subtitleImage.url}\n            alt={subtitleImage.alt || ''}\n            className=\"max-w-full\"\n            width={subtitleImage.width}\n            height={subtitleImage.height}\n          />\n        </div>\n      )}\n\n      {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n      <div className=\"product-compare-container mt-[24px] flex w-full flex-col items-stretch gap-[16px] tablet:flex-row tablet:flex-nowrap laptop:mt-[32px]\">\n        {products.map((product, index) => {\n          const isLastProduct = index === products.length - 1\n          const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n          // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n          const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                'product-compare-item relative flex-shrink overflow-hidden rounded-box',\n                layoutClasses,\n                {\n                  'order-2 tablet:order-1': index === 0 && products.length === 2,\n                  'order-1 tablet:order-2': index === 1 && products.length === 2,\n                }\n              )}\n            >\n              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label absolute left-[16px] top-[16px] z-10 rounded-btn px-[20px] pb-[10px] pt-[11px] font-bold text-[#fff] laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px]',\n                    labelBgClass\n                  )}\n                >\n                  <Heading as=\"h6\" className=\"font-bold\" size={1}>\n                    {product.text}\n                  </Heading>\n                </div>\n              )}\n\n              {/* \u4EA7\u54C1\u5A92\u4F53 */}\n              <LazyMedia offset={1500}>\n                <MediaElement\n                  media={product.media}\n                  poster={product.poster}\n                  className=\"product-compare-media hidden h-full w-full object-cover laptop:block\"\n                />\n                <MediaElement\n                  media={product.mobMedia}\n                  poster={product.mobPoster}\n                  className=\"product-compare-media-mobile block w-full laptop:hidden\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)"],
+  "mappings": "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",
+  "names": ["ProductCompare_exports", "__export", "ProductCompare_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "getProductLayoutClasses", "index", "totalProducts", "twoImageRatio", "ProductCompare", "props", "title", "titleType", "titleIcon", "subtitle", "subtitleImage", "textAlign", "products", "threeImageRatio", "theme", "alignClasses", "getTitleSize", "renderTitle", "product", "isLastProduct", "layoutClasses", "labelBgClass"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var N=Object.create;var c=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)c(t,s,{get:e[s],enumerable:!0})},m=(t,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!g.call(t,r)&&r!==s&&c(t,r,{get:()=>e[r],enumerable:!(l=H(e,r))||l.enumerable});return t};var w=(t,e,s)=>(s=t!=null?N(P(t)):{},m(e||!t||!t.__esModule?c(s,"default",{value:t,enumerable:!0}):s,t)),T=t=>m(c({},"__esModule",{value:!0}),t);var E={};v(E,{default:()=>D});module.exports=T(E);var o=require("react/jsx-runtime"),a=w(require("react")),p=require("../../components/index.js"),n=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const y="image",L="product_hero",u=a.default.forwardRef(({data:t,className:e},s)=>{const{title:l,subtitle:r,ctaText:h,poster:b,mobPoster:x,ctaLink:_}=t,i=(0,a.useRef)(null);return(0,f.useExposure)(i,{componentType:y,componentName:L,componentTitle:l,componentDescription:r}),(0,a.useImperativeHandle)(s,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,n.cn)("product-hero flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",e),children:[(0,o.jsxs)("div",{className:"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(p.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(p.Heading,{as:"h4",size:2,html:r,className:"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(p.Text,{as:"p",size:2,html:r,className:"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(p.Button,{className:"product-hero__cta-button w-fit",children:h})})]}),(0,o.jsx)(p.Picture,{className:"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${b?.url}, ${x?.url} 768`})]})});u.displayName="ProductHero";var D=(0,d.withLayout)(u);
+"use strict";"use client";var N=Object.create;var c=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of g(e))!v.call(t,s)&&s!==r&&c(t,s,{get:()=>e[s],enumerable:!(l=H(e,s))||l.enumerable});return t};var y=(t,e,r)=>(r=t!=null?N(P(t)):{},m(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),T=t=>m(c({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=T(R);var o=require("react/jsx-runtime"),a=y(require("react")),p=require("../../components/index.js"),n=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",u=a.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:s,ctaText:h,poster:x,mobPoster:b,ctaLink:_,theme:k="light"}=t,i=(0,a.useRef)(null);return(0,f.useExposure)(i,{componentType:L,componentName:D,componentTitle:l,componentDescription:s}),(0,a.useImperativeHandle)(r,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,n.cn)("product-hero flex w-full flex-col items-center justify-between gap-[32px] text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",{"aiui-dark":k==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(p.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(p.Heading,{as:"h4",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(p.Text,{as:"p",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(p.Button,{className:"product-hero__cta-button w-fit",children:h})})]}),(0,o.jsx)(p.Picture,{className:"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${x?.url}, ${b?.url} 768`})]})});u.displayName="ProductHero";var E=(0,d.withLayout)(u);
 //# sourceMappingURL=ProductHero.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      <div className=\"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n          />\n        </div>\n        <a href={ctaLink} className=\"product-hero__cta-link\">\n          <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n        </a>\n      </div>\n      <Picture\n        className=\"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAlCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,oIACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,KACA,OAAC,KAAE,KAAMI,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GACF,KACA,OAAC,WACC,UAAU,iHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OAC3C,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
-  "names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "boxRef"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero flex w-full flex-col items-center justify-between gap-[32px] text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n          />\n        </div>\n        <a href={ctaLink} className=\"product-hero__cta-link\">\n          <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n        </a>\n      </div>\n      <Picture\n        className=\"product-hero__image aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMQ,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaD,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,KACA,OAAC,KAAE,KAAMI,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GACF,KACA,OAAC,WACC,UAAU,iHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OAC3C,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
+  "names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef"]
 }

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

@@ -1,4 +1,4 @@
-import type { Media } from '../../types/props';
+import type { Media, Theme } from '../../types/props';
 export interface ProductHeroProps {
     data: {
         /** 主标题 */
@@ -15,6 +15,8 @@ export interface ProductHeroProps {
         mobPoster: Media;
         /** 3D 模型源（可选，暂未使用） */
         modelSrc?: string;
+        /** 主题，默认 light */
+        theme?: Theme;
     };
     /** 自定义类名 */
     className?: string;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/types.ts"],
-  "sourcesContent": ["import type { Media } from '../../types/props'\n\nexport interface ProductHeroProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle: string\n    /** CTA \u6309\u94AE\u6587\u672C */\n    ctaText: string\n    /** CTA \u6309\u94AE\u94FE\u63A5 */\n    ctaLink: string\n    /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n    poster: Media\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n    mobPoster: Media\n    /** 3D \u6A21\u578B\u6E90\uFF08\u53EF\u9009\uFF0C\u6682\u672A\u4F7F\u7528\uFF09 */\n    modelSrc?: string\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props'\n\nexport interface ProductHeroProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle: string\n    /** CTA \u6309\u94AE\u6587\u672C */\n    ctaText: string\n    /** CTA \u6309\u94AE\u94FE\u63A5 */\n    ctaLink: string\n    /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n    poster: Media\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n    mobPoster: Media\n    /** 3D \u6A21\u578B\u6E90\uFF08\u53EF\u9009\uFF0C\u6682\u672A\u4F7F\u7528\uFF09 */\n    modelSrc?: string\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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

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

@@ -0,0 +1,2 @@
+"use strict";"use client";var P=Object.create;var x=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var H=(t,a)=>{for(var n in a)x(t,n,{get:a[n],enumerable:!0})},f=(t,a,n,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of L(a))!D.call(t,r)&&r!==n&&x(t,r,{get:()=>a[r],enumerable:!(c=T(a,r))||c.enumerable});return t};var M=(t,a,n)=>(n=t!=null?P(C(t)):{},f(a||!t||!t.__esModule?x(n,"default",{value:t,enumerable:!0}):n,t)),R=t=>f(x({},"__esModule",{value:!0}),t);var V={};H(V,{default:()=>j});module.exports=R(V);var e=require("react/jsx-runtime"),s=require("react"),m=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),i=require("../../components/index.js"),g=require("../../hooks/useExposure.js"),u=M(require("@radix-ui/react-popover"));const S="navigation",z="product_nav",B=t=>(0,e.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:(0,e.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),h=(0,s.forwardRef)(({className:t="",data:a,id:n},c)=>{const{tabLinks:r=[],anchorList:w=[],textLink:p,buyBtn:d,theme:b="light"}=a||{},[N,y]=(0,s.useState)(""),v=(0,s.useRef)(null);(0,s.useImperativeHandle)(c,()=>v.current),(0,g.useExposure)(v,{componentType:S,componentName:z}),(0,s.useEffect)(()=>{const o=()=>{y(window.location.hash)};return o(),window.addEventListener("hashchange",o),()=>{window.removeEventListener("hashchange",o)}},[]);const E=o=>{o.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})};return(0,e.jsxs)("div",{id:n,ref:v,className:(0,m.cn)("product-nav flex w-full justify-between py-0 text-info-primary bg-container-primary",{"aiui-dark":b==="dark"},t),children:[(0,e.jsxs)("div",{className:"product-nav-main flex w-full flex-col justify-start desktop:flex-row desktop:gap-[48px]",children:[(0,e.jsxs)("div",{className:"product-nav-header flex w-full flex-row items-center justify-between gap-[16px] pt-[14px] laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0",children:[(0,e.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[r.map((o,l)=>(0,e.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,e.jsx)("a",{href:o.link,className:(0,m.cn)("product-nav-tab-link text-nowrap hover:text-brand-color text-[14px] tracking-[-0.04em] font-bold",{"text-[#6D6D6F]":l!==0,"hidden desktop:block":l===1}),children:(0,e.jsx)("span",{children:o.label})}),l!==r.length-1&&(0,e.jsx)("div",{className:"product-nav-tab-divider hidden h-[14px] w-[1px] bg-[#E4E5E6] desktop:inline-block"})]},o.link||l)),r.length>1&&(0,e.jsxs)(u.Root,{children:[(0,e.jsx)(u.Trigger,{asChild:!0,children:(0,e.jsx)("button",{className:"product-nav-dropdown-trigger -ml-[4px] inline-block desktop:hidden","aria-label":"More products",children:(0,e.jsx)(B,{className:"text-[#1D1D1F]"})})}),(0,e.jsx)(u.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:r.slice(1).map(o=>(0,e.jsx)("a",{href:o.link,className:"product-nav-dropdown-link text-nowrap hover:text-brand-color",children:(0,e.jsx)("span",{children:o.label})},o.link))})]})]}),(0,e.jsxs)("div",{className:"product-nav-mobile-actions flex items-center gap-[16px] desktop:hidden desktop:gap-[24px]",children:[p?.link&&(0,e.jsx)("a",{href:p.link,target:p.target||"_self",className:"product-nav-text-link cursor-pointer hover:text-brand-color",children:(0,e.jsx)(i.Text,{size:2,className:"text-nowrap",children:p.text})}),d?.link&&(0,e.jsx)(i.Button,{as:"a",href:d.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:d.text})]})]}),(0,e.jsx)("div",{className:"product-nav-anchors hide-scrollbar flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] laptop:w-fit desktop:gap-[24px] desktop:py-[8px]",children:w.map(o=>(0,e.jsxs)("a",{href:`#${o.id}`,className:"product-nav-anchor-link",onClick:l=>{E(l)},children:[(0,e.jsx)(i.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:o.label}),(0,e.jsx)("div",{className:(0,m.cn)("product-nav-anchor-indicator relative top-[12px] h-[4px] w-full bg-transparent laptop:top-[12px] desktop:top-[10px]",{"bg-brand-color":N===`#${o.id}`})})]},o.id))})]}),(0,e.jsxs)("div",{className:"product-nav-desktop-actions hidden items-center gap-[16px] desktop:flex desktop:gap-[24px] desktop:py-[8px]",children:[p?.link&&(0,e.jsx)("a",{href:p.link,target:p.target||"_self",className:"product-nav-text-link cursor-pointer text-black hover:text-brand-color",children:(0,e.jsx)(i.Text,{size:2,className:"text-nowrap",children:p.text})}),d?.link&&(0,e.jsx)(i.Button,{as:"a",href:d.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:d.text})]})]})});h.displayName="ProductNav";var j=(0,k.withLayout)(h);
+//# sourceMappingURL=ProductNav.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
+  "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path\n        d=\"M5 7.5L10 12.5L15 7.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(({ className = '', data, id }, ref) => {\n  const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n  const [hash, setHash] = useState('')\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n  })\n\n  // \u76D1\u542Chash\u53D8\u5316\n  useEffect(() => {\n    const handleHashChange = () => {\n      setHash(window.location.hash)\n    }\n    handleHashChange()\n    window.addEventListener('hashchange', handleHashChange)\n    return () => {\n      window.removeEventListener('hashchange', handleHashChange)\n    }\n  }, [])\n\n  // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n  const handleAnchorClick = (e: React.MouseEvent) => {\n    const target = e.target as HTMLElement\n    target.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    })\n  }\n\n  return (\n    <div\n      id={id}\n      ref={innerRef}\n      className={cn(\n        'product-nav flex w-full justify-between py-0 text-info-primary bg-container-primary',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-nav-main flex w-full flex-col justify-start desktop:flex-row desktop:gap-[48px]\">\n        {/* Tab Links Section */}\n        <div className=\"product-nav-header flex w-full flex-row items-center justify-between gap-[16px] pt-[14px] laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0\">\n          <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n            {tabLinks.map((tabLink, index) => {\n              return (\n                <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n                  <a\n                    href={tabLink.link}\n                    className={cn('product-nav-tab-link text-nowrap hover:text-brand-color text-[14px] tracking-[-0.04em] font-bold', {\n                      'text-[#6D6D6F]': index !== 0,\n                      'hidden desktop:block': index === 1,\n                    })}\n                    // onClick={() => onShowSpecs?.(false)}\n                  >\n                    <span>{tabLink.label}</span>\n                  </a>\n                  {index !== tabLinks.length - 1 && (\n                    <div className=\"product-nav-tab-divider hidden h-[14px] w-[1px] bg-[#E4E5E6] desktop:inline-block\" />\n                  )}\n                </div>\n              )\n            })}\n\n            {/* Mobile Dropdown */}\n            {tabLinks.length > 1 && (\n              <Popover.Root>\n                <Popover.Trigger asChild>\n                  <button\n                    className=\"product-nav-dropdown-trigger -ml-[4px] inline-block desktop:hidden\"\n                    aria-label=\"More products\"\n                  >\n                    <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n                  </button>\n                </Popover.Trigger>\n                <Popover.Content\n                  className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n                  style={{\n                    boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n                  }}\n                  side=\"bottom\"\n                  align=\"end\"\n                  alignOffset={10}\n                  sideOffset={10}\n                >\n                  {tabLinks.slice(1).map(tabLink => (\n                    <a\n                      key={tabLink.link}\n                      href={tabLink.link}\n                      className=\"product-nav-dropdown-link text-nowrap hover:text-brand-color\"\n                    >\n                      <span>{tabLink.label}</span>\n                    </a>\n                  ))}\n                </Popover.Content>\n              </Popover.Root>\n            )}\n          </div>\n\n          {/* Mobile Actions */}\n          <div className=\"product-nav-mobile-actions flex items-center gap-[16px] desktop:hidden desktop:gap-[24px]\">\n            {/* {specs?.text && (\n                <Text\n                  size={2}\n                  onClick={handleSpecsClick}\n                  className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n                >\n                  {specs.text}\n                </Text>\n              )} */}\n            {textLink?.link && (\n              <a\n                href={textLink.link}\n                target={textLink.target || '_self'}\n                className=\"product-nav-text-link cursor-pointer hover:text-brand-color\"\n              >\n                <Text size={2} className=\"text-nowrap\">{textLink.text}</Text>\n              </a>\n            )}\n            {buyBtn?.link && (\n              <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n                {buyBtn.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Anchor Navigation */}\n        <div className=\"product-nav-anchors hide-scrollbar flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] laptop:w-fit desktop:gap-[24px] desktop:py-[8px]\">\n          {anchorList.map(anchor => (\n            <a\n              key={anchor.id}\n              href={`#${anchor.id}`}\n              className=\"product-nav-anchor-link\"\n              onClick={e => {\n                handleAnchorClick(e)\n              }}\n            >\n              <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n                {anchor.label}\n              </Text>\n              <div\n                className={cn(\n                  'product-nav-anchor-indicator relative top-[12px] h-[4px] w-full bg-transparent laptop:top-[12px] desktop:top-[10px]',\n                  {\n                    'bg-brand-color': hash === `#${anchor.id}`,\n                  }\n                )}\n              />\n            </a>\n          ))}\n        </div>\n      </div>\n\n      {/* Desktop Actions */}\n      <div className=\"product-nav-desktop-actions hidden items-center gap-[16px] desktop:flex desktop:gap-[24px] desktop:py-[8px]\">\n        {/* {specs?.text && (\n            <Text\n              size={2}\n              onClick={handleSpecsClick}\n              className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n            >\n              {specs.text}\n            </Text>\n          )} */}\n        {textLink?.link && (\n          <a\n            href={textLink.link}\n            target={textLink.target || '_self'}\n            className=\"product-nav-text-link cursor-pointer text-black hover:text-brand-color\"\n          >\n            <Text size={2} className=\"text-nowrap\">{textLink.text}</Text>\n          </a>\n        )}\n        {buyBtn?.link && (\n          <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n            {buyBtn.text}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
+  "mappings": "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",
+  "names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "hash", "setHash", "innerRef", "handleHashChange", "handleAnchorClick", "e", "tabLink", "index", "anchor"]
+}

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

@@ -0,0 +1,2 @@
+export { default } from './ProductNav.js';
+export * from './types.js';

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

@@ -0,0 +1,2 @@
+"use strict";var l=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(o,r)=>{for(var e in r)m(o,e,{get:r[e],enumerable:!0})},t=(o,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let f of b(r))!g.call(o,f)&&f!==e&&m(o,f,{get:()=>r[f],enumerable:!(a=u(r,f))||a.enumerable});return o},x=(o,r,e)=>(t(o,r,"default"),e&&t(e,r,"default")),i=(o,r,e)=>(e=o!=null?l(c(o)):{},t(r||!o||!o.__esModule?m(e,"default",{value:o,enumerable:!0}):e,o)),j=o=>t(m({},"__esModule",{value:!0}),o);var p={};h(p,{default:()=>d.default});module.exports=j(p);var d=i(require("./ProductNav.js"));x(p,require("./types.js"),module.exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ProductNav/index.ts"],
+  "sourcesContent": ["export { default } from './ProductNav.js'\nexport * from './types.js'"],
+  "mappings": "wmBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB,8BACxBC,EAAAJ,EAAc,sBADd",
+  "names": ["ProductNav_exports", "__export", "__toCommonJS", "import_ProductNav", "__reExport"]
+}

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

@@ -0,0 +1,35 @@
+import type { ComponentCommonProps, Theme } from '../../types/props.js';
+export interface TabLink {
+    link: string;
+    label: string;
+}
+export interface AnchorItem {
+    id: string;
+    label: string;
+}
+export interface BuyButton {
+    link: string;
+    text: string;
+}
+export interface TextLink {
+    /** 链接地址 */
+    link: string;
+    /** 链接文字 */
+    text: string;
+    /** 打开方式，默认为当前窗口 */
+    target?: '_self' | '_blank';
+}
+export interface ProductNavProps extends ComponentCommonProps {
+    data: {
+        /** 产品页签链接 */
+        tabLinks?: TabLink[];
+        /** 锚点导航列表 */
+        anchorList?: AnchorItem[];
+        /** 文字链接，显示在购买按钮左边 */
+        textLink?: TextLink;
+        /** 购买按钮 */
+        buyBtn?: BuyButton;
+        /** 主题，默认 light */
+        theme?: Theme;
+    };
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ProductNav/types.ts"],
+  "sourcesContent": ["import type { ComponentCommonProps, Theme } from '../../types/props.js'\n\nexport interface TabLink {\n  link: string\n  label: string\n}\n\nexport interface AnchorItem {\n  id: string\n  label: string\n}\n\nexport interface BuyButton {\n  link: string\n  text: string\n}\n\nexport interface TextLink {\n  /** \u94FE\u63A5\u5730\u5740 */\n  link: string\n  /** \u94FE\u63A5\u6587\u5B57 */\n  text: string\n  /** \u6253\u5F00\u65B9\u5F0F\uFF0C\u9ED8\u8BA4\u4E3A\u5F53\u524D\u7A97\u53E3 */\n  target?: '_self' | '_blank'\n}\n\nexport interface ProductNavProps extends ComponentCommonProps {\n  data: {\n    /** \u4EA7\u54C1\u9875\u7B7E\u94FE\u63A5 */\n    tabLinks?: TabLink[]\n    /** \u951A\u70B9\u5BFC\u822A\u5217\u8868 */\n    anchorList?: AnchorItem[]\n    /** \u6587\u5B57\u94FE\u63A5\uFF0C\u663E\u793A\u5728\u8D2D\u4E70\u6309\u94AE\u5DE6\u8FB9 */\n    textLink?: TextLink\n    /** \u8D2D\u4E70\u6309\u94AE */\n    buyBtn?: BuyButton\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n  }\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/{esm/src/biz-components/GraphicOverlay/GraphicOverlay.d.ts → cjs/biz-components/ProductNavigation/ProductNavigation.d.ts}

@@ -1,8 +1,7 @@
 import React from 'react';
-import type { GraphicOverlayProps } from './types';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicOverlayProps & 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>;
+import type { ProductNavigationProps } from './types.js';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ProductNavigationProps & React.RefAttributes<HTMLElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
-export type { GraphicOverlayProps };

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

@@ -0,0 +1,2 @@
+export { default } from './ProductNavigation.js';
+export type { ProductNavigationProps, ProductNavigationTab, ProductNavigationAction } from './types.js';

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

@@ -0,0 +1,45 @@
+import type { Theme } from '../../types/props.js';
+export interface ProductNavigationTab {
+    /** 标签唯一标识 */
+    id: string;
+    /** 标签标题 */
+    title: string;
+    /** 是否激活状态 */
+    active?: boolean;
+    /** 点击回调 */
+    onClick?: () => void;
+}
+export interface ProductNavigationAction {
+    /** 动作唯一标识 */
+    id: string;
+    /** 动作标题 */
+    title: string;
+    /** 动作类型 */
+    type: 'text' | 'button';
+    /** 按钮变体（仅当 type 为 button 时有效） */
+    variant?: 'primary' | 'secondary' | 'outline';
+    /** 按钮尺寸（仅当 type 为 button 时有效） */
+    size?: 'small' | 'large';
+    /** 点击回调 */
+    onClick?: () => void;
+    /** 链接地址 */
+    href?: string;
+}
+export interface ProductNavigationProps {
+    data: {
+        /** 产品名称 */
+        productName: string;
+        /** 导航标签列表 */
+        tabs: ProductNavigationTab[];
+        /** 右侧操作项列表 */
+        actions?: ProductNavigationAction[];
+        /** 主题 */
+        theme?: Theme;
+    };
+    /** 自定义类名 */
+    className?: string;
+    /** 标签点击回调 */
+    onTabClick?: (tab: ProductNavigationTab, index: number) => void;
+    /** 操作项点击回调 */
+    onActionClick?: (action: ProductNavigationAction, index: number) => void;
+}