@anker-in/headless-ui 1.3.21 → 1.3.22-alpha.1781754422536

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

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

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

@@ -0,0 +1,7 @@
+import type { NotifyMeDialogProps } from './types.js';
+declare const NotifyMeDialog: {
+    ({ open, onOpenChange, copy, classNames, checkboxes, subscriptionMeta, onSubmit, }: NotifyMeDialogProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NotifyMeDialog;
+export type { NotifyMeDialogProps };

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

@@ -0,0 +1,2 @@
+"use strict";"use client";var k=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var Z=Object.prototype.hasOwnProperty;var O=(d,n)=>{for(var x in n)k(d,x,{get:n[x],enumerable:!0})},ee=(d,n,x,m)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of Y(n))!Z.call(d,o)&&o!==x&&k(d,o,{get:()=>n[o],enumerable:!(m=V(n,o))||m.enumerable});return d};var te=d=>ee(k({},"__esModule",{value:!0}),d);var le={};O(le,{default:()=>oe});module.exports=te(le);var e=require("react/jsx-runtime"),s=require("react"),t=require("../../components/index.js"),c=require("../../helpers/index.js");const ae=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,B=({open:d,onOpenChange:n,copy:x,classNames:m,checkboxes:o=[],subscriptionMeta:w,onSubmit:N})=>{const{title:z,subTitle:C,emailLabel:I="Email address",emailPlaceholder:L="your@email.com",submitBtnText:H="Notify Me",errorEmpty:P,errorInvalidEmail:R,errorCheckboxRequired:j,errorSubmit:D="Something went wrong. Please try again.",errorSubmitDetail:q,successTitle:A,successDesc:E,successBtnText:S}=x,[g,T]=(0,s.useState)(""),[y,M]=(0,s.useState)(()=>o.map(()=>!1)),[u,b]=(0,s.useState)("idle"),[F,v]=(0,s.useState)(()=>o.map(()=>!1)),[r,f]=(0,s.useState)("idle"),[_,h]=(0,s.useState)(null),G=_?q?.find(a=>a.code===_)?.message??D:D,W=r!=="loading"&&r!=="success",X=(0,s.useCallback)(a=>{M(i=>{const l=[...i];return l[a]=!l[a],l}),v(i=>{const l=[...i];return l[a]=!1,l}),u!=="idle"&&b("idle"),r==="error-submit"&&(f("idle"),h(null))},[u,r]),$=(0,s.useCallback)(a=>{T(a.target.value),u!=="idle"&&b("idle"),v(i=>i.some(Boolean)?i.map(()=>!1):i),r==="error-submit"&&(f("idle"),h(null))},[u,r]),J=(0,s.useCallback)(async()=>{let a=!1;g.trim()?ae.test(g.trim())?b("idle"):(b("error-format"),a=!0):(b("error-empty"),a=!0);const i=o.map((l,p)=>l.label&&l.required&&!y[p]?(a=!0,!0):!1);if(v(i),!a){f("loading");try{const l=o.map((p,U)=>p.checkbox_id!==void 0?{checkbox_id:p.checkbox_id,checked:y[U]}:null).filter(p=>p!==null);await N({email:g.trim(),checkedItems:l,meta:w}),f("success")}catch(l){const p=l&&typeof l=="object"&&"code"in l?String(l.code):null;h(p),f("error-submit")}}},[g,o,y,w,N]);(0,s.useEffect)(()=>{if(r!=="error-submit")return;const a=setTimeout(()=>{f("idle"),h(null)},3e3);return()=>clearTimeout(a)},[r]);const K=(0,s.useCallback)(a=>{a||(T(""),M(o.map(()=>!1)),b("idle"),v(o.map(()=>!1)),f("idle"),h(null)),n(a)},[o,n]),Q=o.some(a=>a.label);return(0,e.jsx)(t.Dialog,{open:d,onOpenChange:K,children:(0,e.jsxs)(t.DialogContent,{"aria-describedby":"notify-me-content",className:(0,c.cn)("laptop:max-w-[480px] laptop:[&_.dialog-close-icon]:size-6 laptop:gap-8 rounded-box laptop:p-8 max-h-[90vh] w-[calc(100%-32px)] gap-6 overflow-y-auto bg-white p-6 [&._dialog-close-icon]:size-5",m?.root),children:[r!=="success"&&(0,e.jsxs)(t.DialogHeader,{className:(0,c.cn)(m?.header),children:[(0,e.jsx)(t.DialogTitle,{children:(0,e.jsx)(t.Heading,{as:"h2",size:2,className:(0,c.cn)("text-info-primary text-center font-bold",m?.title),children:z})}),C&&(0,e.jsx)(t.DialogDescription,{asChild:!0,children:(0,e.jsx)(t.Text,{as:"p",className:(0,c.cn)("text-info-primary laptop:text-base mt-1 text-center text-sm",m?.subTitle),children:C})})]}),r==="success"?(0,e.jsxs)("div",{className:(0,c.cn)("flex flex-col items-center text-center",m?.successText),children:[(0,e.jsx)("div",{className:"flex size-20 items-center justify-center",children:(0,e.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"80",height:"80",viewBox:"0 0 80 80",fill:"none",children:[(0,e.jsx)("circle",{cx:"40",cy:"40",r:"35",fill:"#30D158"}),(0,e.jsx)("path",{d:"M23.3333 38.3333L36.6666 50L56.6666 30",stroke:"white",strokeWidth:"6.66667",strokeLinecap:"round",strokeLinejoin:"round"})]})}),(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(t.Heading,{as:"h3",size:2,className:"text-info-primary font-bold",children:A}),E&&(0,e.jsx)(t.Text,{as:"p",className:"text-info-primary laptop:text-base mt-1 text-sm",children:E})]}),S&&(0,e.jsx)(t.Button,{variant:"primary",size:"lg",onClick:()=>n(!1),className:"laptop:mt-8 mt-6 w-full",children:S})]}):(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:m?.emailInput,children:[(0,e.jsx)(t.Text,{as:"label",htmlFor:"notify-me-email",className:"text-info-primary laptop:text-base mb-2 block text-sm",children:I}),(0,e.jsx)(t.Input,{id:"notify-me-email",type:"email",placeholder:L,value:g,onChange:$,disabled:r==="loading",className:(0,c.cn)("placeholder:text-info-tertiary text-info-primary laptop:h-[54px] laptop:text-base laptop:p-4 border-lines-1 h-[44px] w-full bg-white p-3 text-sm font-bold placeholder:font-bold focus-visible:!outline-none",u!=="idle"&&"border-error-0")}),u==="error-empty"&&(0,e.jsx)(t.Text,{as:"p",className:"text-error-0 laptop:text-base mt-2 text-sm",children:P}),u==="error-format"&&(0,e.jsx)(t.Text,{as:"p",className:"text-error-0 laptop:text-base mt-2 text-sm",children:R})]}),Q&&(0,e.jsx)("div",{className:(0,c.cn)("laptop:gap-4 flex flex-col gap-2",m?.checkboxes),children:o.map((a,i)=>a.label?(0,e.jsxs)("div",{children:[(0,e.jsxs)("label",{className:(0,c.cn)("text-info-tertiary flex cursor-pointer items-start gap-2",m?.checkboxItem),children:[(0,e.jsx)(t.Checkbox,{checked:y[i],onCheckedChange:()=>X(i),disabled:r==="loading",className:"border-info-secondary data-[state=checked]:bg-info-secondary mt-0.5 shrink-0"}),(0,e.jsx)(t.Text,{as:"span",className:"text-info-tertiary laptop:text-base [&_a]:text-brand-0 text-sm leading-snug [&_a]:underline",html:a.label})]}),F[i]&&(0,e.jsx)(t.Text,{as:"p",className:"text-error-0 laptop:text-base mt-2 text-sm",children:j})]},i):null)}),(0,e.jsx)(t.Button,{variant:"primary",size:"lg",loading:r==="loading",disabled:!W,onClick:J,className:(0,c.cn)("w-full",m?.submitBtn),children:H}),r==="error-submit"&&(0,e.jsx)(t.Text,{as:"p",className:(0,c.cn)("text-error-0 laptop:text-base text-sm",m?.errorText),children:G})]})]})})};B.displayName="NotifyMeDialog";var oe=B;
+//# sourceMappingURL=NotifyMeDialog.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/NotifyMeDialog/NotifyMeDialog.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport {\n  Button,\n  Text,\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  Input,\n  Checkbox,\n  Heading,\n} from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { NotifyMeDialogProps } from './types.js'\n\ntype EmailState = 'idle' | 'error-empty' | 'error-format'\ntype SubmitState = 'idle' | 'loading' | 'success' | 'error-submit'\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nconst NotifyMeDialog = ({\n  open,\n  onOpenChange,\n  copy,\n  classNames,\n  checkboxes = [],\n  subscriptionMeta,\n  onSubmit,\n}: NotifyMeDialogProps) => {\n  const {\n    title,\n    subTitle,\n    emailLabel = 'Email address',\n    emailPlaceholder = 'your@email.com',\n    submitBtnText = 'Notify Me',\n    errorEmpty,\n    errorInvalidEmail,\n    errorCheckboxRequired,\n    errorSubmit = 'Something went wrong. Please try again.',\n    errorSubmitDetail,\n    successTitle,\n    successDesc,\n    successBtnText,\n  } = copy\n\n  const [email, setEmail] = useState('')\n  const [checkedStates, setCheckedStates] = useState<boolean[]>(() => checkboxes.map(() => false))\n  const [emailState, setEmailState] = useState<EmailState>('idle')\n  const [checkboxErrors, setCheckboxErrors] = useState<boolean[]>(() => checkboxes.map(() => false))\n  const [submitState, setSubmitState] = useState<SubmitState>('idle')\n  const [errorCode, setErrorCode] = useState<string | null>(null)\n\n  // \u6839\u636E\u9519\u8BEF\u7801\u5339\u914D\u5BF9\u5E94\u6587\u6848\uFF0C\u672A\u5339\u914D\u5230\u5219\u56DE\u9000\u5230 errorSubmit\n  const resolvedErrorMessage = errorCode\n    ? (errorSubmitDetail?.find(d => d.code === errorCode)?.message ?? errorSubmit)\n    : errorSubmit\n\n  // \u662F\u5426\u53EF\u4EE5\u70B9\u51FB\u63D0\u4EA4\uFF08loading/success \u65F6\u7981\u7528\uFF09\n  const canSubmit = submitState !== 'loading' && submitState !== 'success'\n\n  // checkbox \u72B6\u6001\u53D8\u5316\n  const updateCheckedState = useCallback(\n    (index: number) => {\n      setCheckedStates(prev => {\n        const next = [...prev]\n        next[index] = !next[index]\n        return next\n      })\n      // \u6E05\u9664\u5F53\u524D checkbox \u7684\u9519\u8BEF\u72B6\u6001\n      setCheckboxErrors(prev => {\n        const next = [...prev]\n        next[index] = false\n        return next\n      })\n      // \u6E05\u9664\u90AE\u7BB1\u9519\u8BEF\u548C\u63D0\u4EA4\u9519\u8BEF\n      if (emailState !== 'idle') setEmailState('idle')\n      if (submitState === 'error-submit') {\n        setSubmitState('idle')\n        setErrorCode(null)\n      }\n    },\n    [emailState, submitState]\n  )\n\n  // \u90AE\u7BB1\u8F93\u5165\u53D8\u5316\n  const handleEmailChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setEmail(e.target.value)\n      if (emailState !== 'idle') setEmailState('idle')\n      setCheckboxErrors(prev => (prev.some(Boolean) ? prev.map(() => false) : prev))\n      if (submitState === 'error-submit') {\n        setSubmitState('idle')\n        setErrorCode(null)\n      }\n    },\n    [emailState, submitState]\n  )\n\n  /**\n   * \u5BA2\u6237\u7AEF onSubmit \u8C03\u7528\u793A\u4F8B\n   *\n   * \u63A5\u53E3\u5931\u8D25\u65F6\u9700 throw { code } \u4EE5\u4FBF\u7EC4\u4EF6\u6309 errorSubmitDetail \u5339\u914D\u5BF9\u5E94\u63D0\u793A\u6587\u6848\uFF0C\n   * code \u4E3A number \u7C7B\u578B\u65F6\u7EC4\u4EF6\u4F1A\u81EA\u52A8\u8F6C\u4E3A string \u8FDB\u884C\u5339\u914D\u3002\n   *\n   * @example\n   * const handleNotifyMeSubmit = useCallback(\n   *   async (params) => {\n   *     const { email, checkedItems, meta } = params\n   *     const res = await fetch('/api/multipass/shopifyservices/product_arrival_notices', {\n   *       method: 'POST',\n   *       headers: {\n   *         'Content-Type': 'application/json',\n   *         'current-language': locale,\n   *       },\n   *       body: JSON.stringify({\n   *         email,\n   *         locale,\n   *         sku: variant.sku,\n   *         shop: shop.primaryDomain?.host,\n   *       }),\n   *     })\n   *     if (res.ok) {\n   *       if (checkedItems?.some?.((item) => item.checked && item.checkbox_id === 'subscribe')) {\n   *         subscribe({ email, dealsType: 'outStockNotify_subscribe_emails' })\n   *       }\n   *     } else {\n   *       throw { code: res.status }\n   *     }\n   *   },\n   *   [locale, variant.sku, shop.primaryDomain?.host, subscribe],\n   * )\n   */\n  // \u70B9\u51FB\u63D0\u4EA4\n  const handleSubmit = useCallback(async () => {\n    let hasError = false\n\n    // \u6821\u9A8C\u90AE\u7BB1\u975E\u7A7A\n    if (!email.trim()) {\n      setEmailState('error-empty')\n      hasError = true\n    } else if (!EMAIL_REGEX.test(email.trim())) {\n      setEmailState('error-format')\n      hasError = true\n    } else {\n      setEmailState('idle')\n    }\n\n    // \u6821\u9A8C required checkbox\n    const newCheckboxErrors = checkboxes.map((cb, i) => {\n      if (cb.label && cb.required && !checkedStates[i]) {\n        hasError = true\n        return true\n      }\n      return false\n    })\n    setCheckboxErrors(newCheckboxErrors)\n\n    if (hasError) return\n\n    setSubmitState('loading')\n    try {\n      const checkedItems = checkboxes\n        .map((cb, i) =>\n          cb.checkbox_id !== undefined ? { checkbox_id: cb.checkbox_id!, checked: checkedStates[i] } : null\n        )\n        .filter((item): item is { checkbox_id: string; checked: boolean } => item !== null)\n      await onSubmit({ email: email.trim(), checkedItems, meta: subscriptionMeta })\n      setSubmitState('success')\n    } catch (err: unknown) {\n      const code =\n        err && typeof err === 'object' && 'code' in err ? String((err as Record<string, unknown>).code) : null\n      setErrorCode(code)\n      setSubmitState('error-submit')\n    }\n  }, [email, checkboxes, checkedStates, subscriptionMeta, onSubmit])\n\n  // error-submit 3s \u540E\u81EA\u52A8\u6D88\u5931\n  useEffect(() => {\n    if (submitState !== 'error-submit') return\n    const timer = setTimeout(() => {\n      setSubmitState('idle')\n      setErrorCode(null)\n    }, 3000)\n    return () => clearTimeout(timer)\n  }, [submitState])\n\n  // \u5173\u95ED\u5F39\u7A97\u65F6\u91CD\u7F6E\n  const handleOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        setEmail('')\n        setCheckedStates(checkboxes.map(() => false))\n        setEmailState('idle')\n        setCheckboxErrors(checkboxes.map(() => false))\n        setSubmitState('idle')\n        setErrorCode(null)\n      }\n      onOpenChange(isOpen)\n    },\n    [checkboxes, onOpenChange]\n  )\n\n  const hasCheckboxes = checkboxes.some(cb => cb.label)\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogContent\n        aria-describedby=\"notify-me-content\"\n        className={cn(\n          'laptop:max-w-[480px] laptop:[&_.dialog-close-icon]:size-6 laptop:gap-8 rounded-box laptop:p-8 max-h-[90vh] w-[calc(100%-32px)] gap-6 overflow-y-auto bg-white p-6 [&._dialog-close-icon]:size-5',\n          classNames?.root\n        )}\n      >\n        {submitState !== 'success' && (\n          <DialogHeader className={cn(classNames?.header)}>\n            <DialogTitle>\n              <Heading as=\"h2\" size={2} className={cn('text-info-primary text-center font-bold', classNames?.title)}>\n                {title}\n              </Heading>\n            </DialogTitle>\n            {subTitle && (\n              <DialogDescription asChild>\n                <Text\n                  as=\"p\"\n                  className={cn('text-info-primary laptop:text-base mt-1 text-center text-sm', classNames?.subTitle)}\n                >\n                  {subTitle}\n                </Text>\n              </DialogDescription>\n            )}\n          </DialogHeader>\n        )}\n\n        {submitState === 'success' ? (\n          <div className={cn('flex flex-col items-center text-center', classNames?.successText)}>\n            {/* \u6210\u529F\u56FE\u6807 */}\n            <div className=\"flex size-20 items-center justify-center\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\">\n                <circle cx=\"40\" cy=\"40\" r=\"35\" fill=\"#30D158\" />\n                <path\n                  d=\"M23.3333 38.3333L36.6666 50L56.6666 30\"\n                  stroke=\"white\"\n                  strokeWidth=\"6.66667\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </div>\n            <div className=\"mt-4\">\n              {/* \u6807\u9898 */}\n              <Heading as=\"h3\" size={2} className=\"text-info-primary font-bold\">\n                {successTitle}\n              </Heading>\n              {/* \u526F\u6587\u6848 */}\n              {successDesc && (\n                <Text as=\"p\" className=\"text-info-primary laptop:text-base mt-1 text-sm\">\n                  {successDesc}\n                </Text>\n              )}\n            </div>\n            {/* \u786E\u8BA4\u6309\u94AE */}\n            {successBtnText && (\n              <Button\n                variant=\"primary\"\n                size=\"lg\"\n                onClick={() => onOpenChange(false)}\n                className=\"laptop:mt-8 mt-6 w-full\"\n              >\n                {successBtnText}\n              </Button>\n            )}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-4\">\n            {/* \u90AE\u7BB1\u8F93\u5165\u6846 */}\n            <div className={classNames?.emailInput}>\n              <Text\n                as=\"label\"\n                htmlFor=\"notify-me-email\"\n                className=\"text-info-primary laptop:text-base mb-2 block text-sm\"\n              >\n                {emailLabel}\n              </Text>\n              <Input\n                id=\"notify-me-email\"\n                type=\"email\"\n                placeholder={emailPlaceholder}\n                value={email}\n                onChange={handleEmailChange}\n                disabled={submitState === 'loading'}\n                className={cn(\n                  'placeholder:text-info-tertiary text-info-primary laptop:h-[54px] laptop:text-base laptop:p-4 border-lines-1 h-[44px] w-full bg-white p-3 text-sm font-bold placeholder:font-bold focus-visible:!outline-none',\n                  emailState !== 'idle' && 'border-error-0'\n                )}\n              />\n              {emailState === 'error-empty' && (\n                <Text as=\"p\" className=\"text-error-0 laptop:text-base mt-2 text-sm\">\n                  {errorEmpty}\n                </Text>\n              )}\n              {emailState === 'error-format' && (\n                <Text as=\"p\" className=\"text-error-0 laptop:text-base mt-2 text-sm\">\n                  {errorInvalidEmail}\n                </Text>\n              )}\n            </div>\n\n            {/* Checkboxes \u5217\u8868 */}\n            {hasCheckboxes && (\n              <div className={cn('laptop:gap-4 flex flex-col gap-2', classNames?.checkboxes)}>\n                {checkboxes.map((cb, i) => {\n                  if (!cb.label) return null\n                  return (\n                    <div key={i}>\n                      <label\n                        className={cn(\n                          'text-info-tertiary flex cursor-pointer items-start gap-2',\n                          classNames?.checkboxItem\n                        )}\n                      >\n                        <Checkbox\n                          checked={checkedStates[i]}\n                          onCheckedChange={() => updateCheckedState(i)}\n                          disabled={submitState === 'loading'}\n                          className=\"border-info-secondary data-[state=checked]:bg-info-secondary mt-0.5 shrink-0\"\n                        />\n                        <Text\n                          as=\"span\"\n                          className=\"text-info-tertiary laptop:text-base [&_a]:text-brand-0 text-sm leading-snug [&_a]:underline\"\n                          html={cb.label}\n                        />\n                      </label>\n                      {checkboxErrors[i] && (\n                        <Text as=\"p\" className=\"text-error-0 laptop:text-base mt-2 text-sm\">\n                          {errorCheckboxRequired}\n                        </Text>\n                      )}\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n\n            {/* \u63D0\u4EA4\u6309\u94AE */}\n            <Button\n              variant=\"primary\"\n              size=\"lg\"\n              loading={submitState === 'loading'}\n              disabled={!canSubmit}\n              onClick={handleSubmit}\n              className={cn('w-full', classNames?.submitBtn)}\n            >\n              {submitBtnText}\n            </Button>\n\n            {/* \u63D0\u4EA4\u9519\u8BEF\uFF08\u5F39\u7A97\u6700\u5E95\u90E8\uFF09 */}\n            {submitState === 'error-submit' && (\n              <Text as=\"p\" className={cn('text-error-0 laptop:text-base text-sm', classNames?.errorText)}>\n                {resolvedErrorMessage}\n              </Text>\n            )}\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nNotifyMeDialog.displayName = 'NotifyMeDialog'\n\nexport default NotifyMeDialog\nexport type { NotifyMeDialogProps }\n"],
+  "mappings": "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",
+  "names": ["NotifyMeDialog_exports", "__export", "NotifyMeDialog_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "EMAIL_REGEX", "NotifyMeDialog", "open", "onOpenChange", "copy", "classNames", "checkboxes", "subscriptionMeta", "onSubmit", "title", "subTitle", "emailLabel", "emailPlaceholder", "submitBtnText", "errorEmpty", "errorInvalidEmail", "errorCheckboxRequired", "errorSubmit", "errorSubmitDetail", "successTitle", "successDesc", "successBtnText", "email", "setEmail", "checkedStates", "setCheckedStates", "emailState", "setEmailState", "checkboxErrors", "setCheckboxErrors", "submitState", "setSubmitState", "errorCode", "setErrorCode", "resolvedErrorMessage", "d", "canSubmit", "updateCheckedState", "index", "prev", "next", "handleEmailChange", "e", "handleSubmit", "hasError", "newCheckboxErrors", "cb", "i", "checkedItems", "item", "err", "code", "timer", "handleOpenChange", "isOpen", "hasCheckboxes"]
+}

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

@@ -0,0 +1,2 @@
+export { default as NotifyMeDialog } from './NotifyMeDialog.js';
+export type { NotifyMeDialogProps, NotifyMeDialogCopy, NotifyMeDialogSemanticName, CheckboxConfig, ErrorDetail, SubscribeFormData, SubscriptionMeta, } from './types.js';

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/NotifyMeDialog/index.tsx"],
+  "sourcesContent": ["export { default as NotifyMeDialog } from './NotifyMeDialog.js'\nexport type {\n  NotifyMeDialogProps,\n  NotifyMeDialogCopy,\n  NotifyMeDialogSemanticName,\n  CheckboxConfig,\n  ErrorDetail,\n  SubscribeFormData,\n  SubscriptionMeta,\n} from './types.js'\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+CAAAE,EAAAF,GAAA,IAAAG,EAA0C",
+  "names": ["NotifyMeDialog_exports", "__export", "__toCommonJS", "import_NotifyMeDialog"]
+}

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

@@ -0,0 +1,111 @@
+/**
+ * CheckboxConfig - 勾选框配置
+ *
+ * 每项独立控制展示与提交限制，顺序按数组顺序渲染。
+ * label 有值时展示该项，无值时跳过不渲染。
+ */
+export interface CheckboxConfig {
+    /** checkbox 名称标识，用于提交时识别选中了哪些项 */
+    checkbox_id: string;
+    /** checkbox 旁展示的文案；为空或不传则不渲染该 checkbox */
+    label: string;
+    /** 是否必须勾选才能提交；true 时未勾选则按钮 disabled；默认 false */
+    required?: boolean;
+}
+/**
+ * SubscriptionMeta - 订阅元数据
+ *
+ * 区分 OOS 到货通知和活动订阅两种模式，确保提交时携带正确的业务参数。
+ */
+export type SubscriptionMeta = {
+    /** 固定值，标识 OOS 到货通知 */
+    mode: 'oos';
+} | {
+    /** 固定值，标识活动订阅 */
+    mode: 'activity';
+    /** 活动标识，由业务层从 activeNotifyInfo 配置中读取 */
+    dealsType: string;
+};
+/**
+ * ErrorDetail - 按错误码映射错误提示
+ *
+ * 支持消费方根据接口返回的错误码配置不同的提示文案。
+ * code 匹配时显示对应 message；未匹配到则回退到 errorSubmit。
+ */
+export interface ErrorDetail {
+    /** 错误码，如 "422"、"500" */
+    code: string;
+    /** 该错误码对应的提示文案 */
+    message: string;
+}
+/**
+ * NotifyMeDialogCopy - 文案配置
+ *
+ * 将弹窗内所有可配置文案集中到一个对象中，
+ * 方便从 CMS / 多语言配置层一次性传入。
+ */
+export interface NotifyMeDialogCopy {
+    /** 弹窗主标题，如 "Email me when available" */
+    title: string;
+    /** 弹窗副标题；为空时不渲染 */
+    subTitle?: string;
+    /** 邮箱输入框占位文案 */
+    emailPlaceholder?: string;
+    /** 提交按钮文案 */
+    submitBtnText?: string;
+    /** 邮箱输入框标签文案，默认 "Email address" */
+    emailLabel?: string;
+    /** 邮箱输入框为空时的错误提示 */
+    errorEmpty: string;
+    /** 邮箱格式不合法时的错误提示 */
+    errorInvalidEmail: string;
+    /** 必选 checkbox 未勾选时的提示文案 */
+    errorCheckboxRequired: string;
+    /** 接口调用失败时的默认错误提示，当 errorSubmitDetail 中未匹配到对应 code 时使用 */
+    errorSubmit?: string;
+    /** 按错误码映射的错误提示，code 匹配到时显示对应 message；未传入或不匹配时回退到 errorSubmit */
+    errorSubmitDetail?: ErrorDetail[];
+    /** 提交成功后的主标题 */
+    successTitle: string;
+    /** 提交成功后的副文案；为空时不渲染 */
+    successDesc?: string;
+    /** 提交成功后的按钮文案；为空时不渲染按钮 */
+    successBtnText?: string;
+}
+/**
+ * NotifyMeDialogSemanticName - 组件语义化区域名
+ *
+ * 用于 classNames prop，按语义区域自定义样式。
+ * 未传入的 key 使用组件默认样式。
+ */
+export type NotifyMeDialogSemanticName = 'root' | 'header' | 'title' | 'subTitle' | 'emailInput' | 'checkboxes' | 'checkboxItem' | 'submitBtn' | 'errorText' | 'successText';
+/**
+ * SubscribeFormData - 提交时暴露的完整表单数据
+ */
+export interface SubscribeFormData {
+    /** 用户输入的邮箱 */
+    email: string;
+    /** 各 checkbox 的状态列表，仅包含配置了 name 的项 */
+    checkedItems: {
+        checkbox_id: string;
+        checked: boolean;
+    }[];
+    /** 订阅元数据 */
+    meta: SubscriptionMeta;
+}
+export interface NotifyMeDialogProps {
+    /** 是否打开弹窗 */
+    open: boolean;
+    /** 关闭弹窗回调 */
+    onOpenChange: (open: boolean) => void;
+    /** 文案配置 */
+    copy: NotifyMeDialogCopy;
+    /** 各区域自定义样式 */
+    classNames?: Partial<Record<NotifyMeDialogSemanticName, string>>;
+    /** 勾选框列表，支持配置多个；每项 label 有值时展示，无值时跳过 */
+    checkboxes?: CheckboxConfig[];
+    /** 订阅元数据，区分 OOS / 活动两种模式 */
+    subscriptionMeta: SubscriptionMeta;
+    /** 提交回调，接收完整表单数据，业务层决定调哪个接口 */
+    onSubmit: (data: SubscribeFormData) => Promise<void>;
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/NotifyMeDialog/types.ts"],
+  "sourcesContent": ["/**\n * CheckboxConfig - \u52FE\u9009\u6846\u914D\u7F6E\n *\n * \u6BCF\u9879\u72EC\u7ACB\u63A7\u5236\u5C55\u793A\u4E0E\u63D0\u4EA4\u9650\u5236\uFF0C\u987A\u5E8F\u6309\u6570\u7EC4\u987A\u5E8F\u6E32\u67D3\u3002\n * label \u6709\u503C\u65F6\u5C55\u793A\u8BE5\u9879\uFF0C\u65E0\u503C\u65F6\u8DF3\u8FC7\u4E0D\u6E32\u67D3\u3002\n */\nexport interface CheckboxConfig {\n  /** checkbox \u540D\u79F0\u6807\u8BC6\uFF0C\u7528\u4E8E\u63D0\u4EA4\u65F6\u8BC6\u522B\u9009\u4E2D\u4E86\u54EA\u4E9B\u9879 */\n  checkbox_id: string\n  /** checkbox \u65C1\u5C55\u793A\u7684\u6587\u6848\uFF1B\u4E3A\u7A7A\u6216\u4E0D\u4F20\u5219\u4E0D\u6E32\u67D3\u8BE5 checkbox */\n  label: string\n  /** \u662F\u5426\u5FC5\u987B\u52FE\u9009\u624D\u80FD\u63D0\u4EA4\uFF1Btrue \u65F6\u672A\u52FE\u9009\u5219\u6309\u94AE disabled\uFF1B\u9ED8\u8BA4 false */\n  required?: boolean\n}\n\n/**\n * SubscriptionMeta - \u8BA2\u9605\u5143\u6570\u636E\n *\n * \u533A\u5206 OOS \u5230\u8D27\u901A\u77E5\u548C\u6D3B\u52A8\u8BA2\u9605\u4E24\u79CD\u6A21\u5F0F\uFF0C\u786E\u4FDD\u63D0\u4EA4\u65F6\u643A\u5E26\u6B63\u786E\u7684\u4E1A\u52A1\u53C2\u6570\u3002\n */\nexport type SubscriptionMeta =\n  | {\n      /** \u56FA\u5B9A\u503C\uFF0C\u6807\u8BC6 OOS \u5230\u8D27\u901A\u77E5 */\n      mode: 'oos'\n    }\n  | {\n      /** \u56FA\u5B9A\u503C\uFF0C\u6807\u8BC6\u6D3B\u52A8\u8BA2\u9605 */\n      mode: 'activity'\n      /** \u6D3B\u52A8\u6807\u8BC6\uFF0C\u7531\u4E1A\u52A1\u5C42\u4ECE activeNotifyInfo \u914D\u7F6E\u4E2D\u8BFB\u53D6 */\n      dealsType: string\n    }\n\n/**\n * ErrorDetail - \u6309\u9519\u8BEF\u7801\u6620\u5C04\u9519\u8BEF\u63D0\u793A\n *\n * \u652F\u6301\u6D88\u8D39\u65B9\u6839\u636E\u63A5\u53E3\u8FD4\u56DE\u7684\u9519\u8BEF\u7801\u914D\u7F6E\u4E0D\u540C\u7684\u63D0\u793A\u6587\u6848\u3002\n * code \u5339\u914D\u65F6\u663E\u793A\u5BF9\u5E94 message\uFF1B\u672A\u5339\u914D\u5230\u5219\u56DE\u9000\u5230 errorSubmit\u3002\n */\nexport interface ErrorDetail {\n  /** \u9519\u8BEF\u7801\uFF0C\u5982 \"422\"\u3001\"500\" */\n  code: string\n  /** \u8BE5\u9519\u8BEF\u7801\u5BF9\u5E94\u7684\u63D0\u793A\u6587\u6848 */\n  message: string\n}\n\n/**\n * NotifyMeDialogCopy - \u6587\u6848\u914D\u7F6E\n *\n * \u5C06\u5F39\u7A97\u5185\u6240\u6709\u53EF\u914D\u7F6E\u6587\u6848\u96C6\u4E2D\u5230\u4E00\u4E2A\u5BF9\u8C61\u4E2D\uFF0C\n * \u65B9\u4FBF\u4ECE CMS / \u591A\u8BED\u8A00\u914D\u7F6E\u5C42\u4E00\u6B21\u6027\u4F20\u5165\u3002\n */\nexport interface NotifyMeDialogCopy {\n  /** \u5F39\u7A97\u4E3B\u6807\u9898\uFF0C\u5982 \"Email me when available\" */\n  title: string\n  /** \u5F39\u7A97\u526F\u6807\u9898\uFF1B\u4E3A\u7A7A\u65F6\u4E0D\u6E32\u67D3 */\n  subTitle?: string\n  /** \u90AE\u7BB1\u8F93\u5165\u6846\u5360\u4F4D\u6587\u6848 */\n  emailPlaceholder?: string\n  /** \u63D0\u4EA4\u6309\u94AE\u6587\u6848 */\n  submitBtnText?: string\n  /** \u90AE\u7BB1\u8F93\u5165\u6846\u6807\u7B7E\u6587\u6848\uFF0C\u9ED8\u8BA4 \"Email address\" */\n  emailLabel?: string\n  /** \u90AE\u7BB1\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u7684\u9519\u8BEF\u63D0\u793A */\n  errorEmpty: string\n  /** \u90AE\u7BB1\u683C\u5F0F\u4E0D\u5408\u6CD5\u65F6\u7684\u9519\u8BEF\u63D0\u793A */\n  errorInvalidEmail: string\n  /** \u5FC5\u9009 checkbox \u672A\u52FE\u9009\u65F6\u7684\u63D0\u793A\u6587\u6848 */\n  errorCheckboxRequired: string\n  /** \u63A5\u53E3\u8C03\u7528\u5931\u8D25\u65F6\u7684\u9ED8\u8BA4\u9519\u8BEF\u63D0\u793A\uFF0C\u5F53 errorSubmitDetail \u4E2D\u672A\u5339\u914D\u5230\u5BF9\u5E94 code \u65F6\u4F7F\u7528 */\n  errorSubmit?: string\n  /** \u6309\u9519\u8BEF\u7801\u6620\u5C04\u7684\u9519\u8BEF\u63D0\u793A\uFF0Ccode \u5339\u914D\u5230\u65F6\u663E\u793A\u5BF9\u5E94 message\uFF1B\u672A\u4F20\u5165\u6216\u4E0D\u5339\u914D\u65F6\u56DE\u9000\u5230 errorSubmit */\n  errorSubmitDetail?: ErrorDetail[]\n  /** \u63D0\u4EA4\u6210\u529F\u540E\u7684\u4E3B\u6807\u9898 */\n  successTitle: string\n  /** \u63D0\u4EA4\u6210\u529F\u540E\u7684\u526F\u6587\u6848\uFF1B\u4E3A\u7A7A\u65F6\u4E0D\u6E32\u67D3 */\n  successDesc?: string\n  /** \u63D0\u4EA4\u6210\u529F\u540E\u7684\u6309\u94AE\u6587\u6848\uFF1B\u4E3A\u7A7A\u65F6\u4E0D\u6E32\u67D3\u6309\u94AE */\n  successBtnText?: string\n}\n\n/**\n * NotifyMeDialogSemanticName - \u7EC4\u4EF6\u8BED\u4E49\u5316\u533A\u57DF\u540D\n *\n * \u7528\u4E8E classNames prop\uFF0C\u6309\u8BED\u4E49\u533A\u57DF\u81EA\u5B9A\u4E49\u6837\u5F0F\u3002\n * \u672A\u4F20\u5165\u7684 key \u4F7F\u7528\u7EC4\u4EF6\u9ED8\u8BA4\u6837\u5F0F\u3002\n */\nexport type NotifyMeDialogSemanticName =\n  | 'root'\n  | 'header'\n  | 'title'\n  | 'subTitle'\n  | 'emailInput'\n  | 'checkboxes'\n  | 'checkboxItem'\n  | 'submitBtn'\n  | 'errorText'\n  | 'successText'\n\n/**\n * SubscribeFormData - \u63D0\u4EA4\u65F6\u66B4\u9732\u7684\u5B8C\u6574\u8868\u5355\u6570\u636E\n */\nexport interface SubscribeFormData {\n  /** \u7528\u6237\u8F93\u5165\u7684\u90AE\u7BB1 */\n  email: string\n  /** \u5404 checkbox \u7684\u72B6\u6001\u5217\u8868\uFF0C\u4EC5\u5305\u542B\u914D\u7F6E\u4E86 name \u7684\u9879 */\n  checkedItems: { checkbox_id: string; checked: boolean }[]\n  /** \u8BA2\u9605\u5143\u6570\u636E */\n  meta: SubscriptionMeta\n}\n\nexport interface NotifyMeDialogProps {\n  /** \u662F\u5426\u6253\u5F00\u5F39\u7A97 */\n  open: boolean\n  /** \u5173\u95ED\u5F39\u7A97\u56DE\u8C03 */\n  onOpenChange: (open: boolean) => void\n  /** \u6587\u6848\u914D\u7F6E */\n  copy: NotifyMeDialogCopy\n  /** \u5404\u533A\u57DF\u81EA\u5B9A\u4E49\u6837\u5F0F */\n  classNames?: Partial<Record<NotifyMeDialogSemanticName, string>>\n  /** \u52FE\u9009\u6846\u5217\u8868\uFF0C\u652F\u6301\u914D\u7F6E\u591A\u4E2A\uFF1B\u6BCF\u9879 label \u6709\u503C\u65F6\u5C55\u793A\uFF0C\u65E0\u503C\u65F6\u8DF3\u8FC7 */\n  checkboxes?: CheckboxConfig[]\n  /** \u8BA2\u9605\u5143\u6570\u636E\uFF0C\u533A\u5206 OOS / \u6D3B\u52A8\u4E24\u79CD\u6A21\u5F0F */\n  subscriptionMeta: SubscriptionMeta\n  /** \u63D0\u4EA4\u56DE\u8C03\uFF0C\u63A5\u6536\u5B8C\u6574\u8868\u5355\u6570\u636E\uFF0C\u4E1A\u52A1\u5C42\u51B3\u5B9A\u8C03\u54EA\u4E2A\u63A5\u53E3 */\n  onSubmit: (data: SubscribeFormData) => Promise<void>\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

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

@@ -44,5 +44,5 @@ export interface ProductCompareProps extends React.HTMLAttributes<HTMLElement> {
         theme?: Theme;
     };
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
 export default _default;

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

@@ -1,2 +1,2 @@
-"use strict";var g=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var L=(e,a)=>{for(var r in a)g(e,r,{get:a[r],enumerable:!0})},C=(e,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of z(a))!k.call(e,o)&&o!==r&&g(e,o,{get:()=>a[o],enumerable:!(i=R(a,o))||i.enumerable});return e};var A=e=>C(g({},"__esModule",{value:!0}),e);var B={};L(B,{default:()=>D});module.exports=A(B);var t=require("react/jsx-runtime"),c=require("react"),n=require("../../components/index.js"),p=require("../../helpers/index.js"),y=require("../../shared/Styles.js");function E({children:e,offset:a=800}){const[r,i]=(0,c.useState)(!1),o=(0,c.useRef)(null);return(0,c.useEffect)(()=>{const s=new IntersectionObserver(([x])=>x.isIntersecting&&i(!0),{rootMargin:`${a}px`});return o.current&&s.observe(o.current),()=>s.disconnect()},[a]),(0,t.jsx)("div",{ref:o,className:"size-full",children:r&&e})}function h({media:e,poster:a,className:r}){return e?.url?e.mimeType?.startsWith("video/")?(0,t.jsx)("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:a?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,className:r,width:e.width,height:e.height}):(0,t.jsx)("img",{src:e.url,alt:e.alt||"",className:r,width:e.width,height:e.height}):null}function H(e,a,r){return a===2?r==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function j({data:e,className:a,...r}){const{title:i,titleType:o="primary",titleIcon:s,subtitle:x,subtitleImage:m,textAlign:T="left",products:d=[],twoImageRatio:v="2:3",threeImageRatio:S="1:1:1",theme:w="light"}=e,f=T==="center"?"text-center":"text-left laptop:text-left",b=()=>o==="secondary"?3:4,I=()=>i?o==="selling-point"&&s?(0,t.jsxs)("div",{className:(0,p.cn)("product-compare-title-wrapper flex items-center gap-[8px]",f==="text-center"?"justify-center":""),children:[(0,t.jsx)("img",{src:s.url,alt:s.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),(0,t.jsx)(n.Heading,{as:"h2",size:b(),html:i,className:"product-compare-title",style:{color:"#00BEFA"}})]}):(0,t.jsx)(n.Heading,{as:"h2",size:b(),html:i,className:(0,p.cn)("product-compare-title",f)}):null;return(0,t.jsxs)("section",{...r,className:(0,p.cn)("product-compare text-info-primary",a,{"aiui-dark":w==="dark"}),children:[I(),x&&(0,t.jsx)(n.Text,{as:"p",size:2,html:x,className:(0,p.cn)("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",f)}),m&&(0,t.jsx)("div",{className:(0,p.cn)("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",f==="text-center"?"flex justify-center":""),children:(0,t.jsx)("img",{src:m.url,alt:m.alt||"",className:"max-w-full",width:m.width,height:m.height})}),(0,t.jsx)("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:d.map((l,u)=>{const M=u===d.length-1,N=H(u,d.length,v),P=M?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return(0,t.jsxs)("div",{className:(0,p.cn)("product-compare-item rounded-box relative shrink overflow-hidden",N,{"order-2 tablet:order-1":u===0&&d.length===2,"order-1 tablet:order-2":u===1&&d.length===2}),children:[l.text&&(0,t.jsx)("div",{className:(0,p.cn)("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] text-badge-foreground absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold",P),children:(0,t.jsx)(n.Heading,{as:"h6",className:"font-bold",size:1,children:l.text})}),(0,t.jsxs)(E,{offset:1500,children:[(0,t.jsx)(h,{media:l.media,poster:l.poster,className:"product-compare-media laptop:block hidden size-full object-cover"}),(0,t.jsx)(h,{media:l.mobMedia?l.mobMedia:l.media,poster:l.mobPoster?l.mobPoster:l.poster,className:"product-compare-media-mobile laptop:hidden block w-full"})]})]},u)})})]})}var D=(0,y.withLayout)(j);
+"use strict";var g=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var L=(e,a)=>{for(var o in a)g(e,o,{get:a[o],enumerable:!0})},C=(e,a,o,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of k(a))!z.call(e,r)&&r!==o&&g(e,r,{get:()=>a[r],enumerable:!(i=R(a,r))||i.enumerable});return e};var A=e=>C(g({},"__esModule",{value:!0}),e);var B={};L(B,{default:()=>D});module.exports=A(B);var t=require("react/jsx-runtime"),c=require("react"),n=require("../../components/index.js"),p=require("../../helpers/index.js"),y=require("../../shared/Styles.js");function E({children:e,offset:a=800}){const[o,i]=(0,c.useState)(!1),r=(0,c.useRef)(null);return(0,c.useEffect)(()=>{const s=new IntersectionObserver(([x])=>x.isIntersecting&&i(!0),{rootMargin:`${a}px`});return r.current&&s.observe(r.current),()=>s.disconnect()},[a]),(0,t.jsx)("div",{ref:r,className:"relative size-full",children:o&&e})}function b({media:e,poster:a,className:o}){return e?.url?e.mimeType?.startsWith("video/")?(0,t.jsx)("video",{src:e.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,poster:a?.url||"",preload:"metadata",disablePictureInPicture:!0,disableRemotePlayback:!0,className:o,width:e.width,height:e.height}):(0,t.jsx)("img",{src:e.url,alt:e.alt||"",className:o,width:e.width,height:e.height}):null}function H(e,a,o){return a===2?o==="1:1"?"laptop:flex-[1]":e===0?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]"}function j({data:e,className:a,...o}){const{title:i,titleType:r="primary",titleIcon:s,subtitle:x,subtitleImage:m,textAlign:v="left",products:d=[],twoImageRatio:T="2:3",threeImageRatio:S="1:1:1",theme:w="light"}=e,f=v==="center"?"text-center":"text-left laptop:text-left",h=()=>r==="secondary"?3:4,I=()=>i?r==="selling-point"&&s?(0,t.jsxs)("div",{className:(0,p.cn)("product-compare-title-wrapper flex items-center gap-[8px]",f==="text-center"?"justify-center":""),children:[(0,t.jsx)("img",{src:s.url,alt:s.alt||"",className:"product-compare-title-icon laptop:size-[32px] size-[24px]"}),(0,t.jsx)(n.Heading,{as:"h2",size:h(),html:i,className:"product-compare-title",style:{color:"#00BEFA"}})]}):(0,t.jsx)(n.Heading,{as:"h2",size:h(),html:i,className:(0,p.cn)("product-compare-title",f)}):null;return(0,t.jsxs)("section",{...o,className:(0,p.cn)("product-compare text-info-primary",a,{"aiui-dark":w==="dark"}),children:[I(),x&&(0,t.jsx)(n.Text,{as:"p",size:2,html:x,className:(0,p.cn)("product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",f)}),m&&(0,t.jsx)("div",{className:(0,p.cn)("product-compare-subtitle-image laptop:mt-[24px] mt-[16px]",f==="text-center"?"flex justify-center":""),children:(0,t.jsx)("img",{src:m.url,alt:m.alt||"",className:"max-w-full",width:m.width,height:m.height})}),(0,t.jsx)("div",{className:"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]",children:d.map((l,u)=>{const M=u===d.length-1,N=H(u,d.length,T),P=M?"bg-brand-0":"bg-[rgba(0,0,0,0.2)]";return(0,t.jsxs)("div",{className:(0,p.cn)("product-compare-item rounded-box relative shrink overflow-hidden","tablet:h-[264px] laptop:h-[320px] desktop:h-[456px] lg-desktop:h-[560px] h-[296px]",N,{"order-2 tablet:order-1":u===0&&d.length===2,"order-1 tablet:order-2":u===1&&d.length===2}),children:[l.text&&(0,t.jsx)("div",{className:(0,p.cn)("product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] text-badge-foreground absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold",P),children:(0,t.jsx)(n.Heading,{as:"h6",className:"font-bold",size:1,children:l.text})}),(0,t.jsxs)(E,{offset:1500,children:[(0,t.jsx)(b,{media:l.media,poster:l.poster,className:"product-compare-media laptop:block absolute inset-0 hidden size-full object-cover"}),(0,t.jsx)(b,{media:l.mobMedia?l.mobMedia:l.media,poster:l.mobPoster?l.mobPoster:l.poster,className:"product-compare-media-mobile laptop:hidden absolute inset-0 block size-full object-cover"})]})]},u)})})]})}var D=(0,y.withLayout)(j);
 //# 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 } 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(([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 (\n    <div ref={ref} className=\"size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; 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?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\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?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\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 extends React.HTMLAttributes<HTMLElement> {\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}\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({ data, className, ...rest }: 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  } = data\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\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\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 <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      {...rest}\n      className={cn('product-compare text-info-primary', 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 tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\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 tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\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('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\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              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] text-badge-foreground absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold',\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 laptop:block hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia ? product.mobMedia : product.media}\n                  poster={product.mobPoster ? product.mobPoster : product.poster}\n                  className=\"product-compare-media-mobile laptop:hidden block w-full\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } 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(([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 (\n    <div ref={ref} className=\"relative size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; 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?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\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?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\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 extends React.HTMLAttributes<HTMLElement> {\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}\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({ data, className, ...rest }: 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  } = data\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\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\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 <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      {...rest}\n      className={cn('product-compare text-info-primary', 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 tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\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 tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\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                // \u56FA\u5B9A\u9AD8\u5EA6\u5360\u4F4D \u2014 \u6765\u81EA\u8BBE\u8BA1\u7A3F\u5404\u65AD\u70B9\u5A92\u4F53\u5361\u7247\u5B9E\u6D4B\u9AD8\u5EA6\n                // mobile: 296px | tablet: 264px | laptop: 320px | desktop: 456px | lg-desktop: 560px\n                'product-compare-item rounded-box relative shrink overflow-hidden',\n                'tablet:h-[264px] laptop:h-[320px] desktop:h-[456px] lg-desktop:h-[560px] h-[296px]',\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 rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] text-badge-foreground absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold',\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 laptop:block absolute inset-0 hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia ? product.mobMedia : product.media}\n                  poster={product.mobPoster ? product.mobPoster : product.poster}\n                  className=\"product-compare-media-mobile laptop:hidden absolute inset-0 block size-full object-cover\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
+  "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", "data", "rest", "title", "titleType", "titleIcon", "subtitle", "subtitleImage", "textAlign", "products", "threeImageRatio", "theme", "alignClasses", "getTitleSize", "renderTitle", "product", "isLastProduct", "layoutClasses", "labelBgClass"]
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ProductHeroProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var k=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of H(e))!P.call(t,s)&&s!==r&&c(t,s,{get:()=>e[s],enumerable:!(l=g(e,s))||l.enumerable});return t};var y=(t,e,r)=>(r=t!=null?k(v(t)):{},u(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),T=t=>u(c({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=T(R);var o=require("react/jsx-runtime"),p=y(require("react")),a=require("../../components/index.js"),d=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=p.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:s,ctaText:m,poster:b,mobPoster:x,ctaLink:_,theme:N="light"}=t,i=(0,p.useRef)(null);return(0,f.useExposure)(i,{componentType:L,componentName:D,componentTitle:l,componentDescription:s}),(0,p.useImperativeHandle)(r,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,d.cn)("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":N==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),m&&(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(a.Button,{className:"product-hero__cta-button w-fit",children:m})})]}),(0,o.jsx)(a.Picture,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${b?.url}, ${x?.url} 768`,imgClassName:"h-full object-cover"})]})});n.displayName="ProductHero";var E=(0,h.withLayout)(n);
+"use strict";"use client";var T=Object.create;var c=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var z=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of D(e))!$.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(l=L(e,a))||l.enumerable});return t};var E=(t,e,r)=>(r=t!=null?T(R(t)):{},u(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),M=t=>u(c({},"__esModule",{value:!0}),t);var B={};z(B,{default:()=>j});module.exports=M(B);var o=require("react/jsx-runtime"),p=E(require("react")),s=require("../../components/index.js"),i=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),b=require("../../hooks/useExposure.js"),_=require("../../shared/trackUrlRef.js"),k=require("../AiuiProvider/index.js");const d="image",f="product_hero",h=p.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:a,ctaText:n,poster:g,mobPoster:H,ctaLink:N,theme:P="light"}=t,{locale:v="us",trackingData:w}=(0,k.useAiuiContext)(),y=w?.contextHandle||"",m=(0,p.useRef)(null);return(0,b.useExposure)(m,{componentType:d,componentName:f,componentTitle:l,componentDescription:a}),(0,p.useImperativeHandle)(r,()=>m.current),(0,o.jsxs)("section",{ref:m,"data-ui-component-id":"ProductHero",className:(0,i.cn)("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":P==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(s.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(s.Heading,{as:"h4",size:2,html:a,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),(0,o.jsx)(s.Text,{as:"p",size:2,html:a,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),n&&(0,o.jsx)("a",{href:(0,_.trackUrlRef)((0,i.getLocalizedPath)(N,v),`${y}_${d}_${f}`),className:"product-hero__cta-link",children:(0,o.jsx)(s.Button,{className:"product-hero__cta-button w-fit",children:n})})]}),(0,o.jsx)(s.Picture,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${g?.url}, ${H?.url} 768`,imgClassName:"h-full object-cover"})]})});h.displayName="ProductHero";var j=(0,x.withLayout)(h);
 //# 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, 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 text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\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 laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a href={ctaLink} className=\"product-hero__cta-link\">\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n        imgClassName=\"h-full object-cover\"\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,EACCC,MACC,OAAC,KAAE,KAAMG,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,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"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.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  const { locale = 'us', trackingData } = useAiuiContext()\n  const contextHandle = trackingData?.contextHandle || ''\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 text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\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 laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a\n            href={trackUrlRef(getLocalizedPath(ctaLink, locale), `${contextHandle}_${componentType}_${componentName}`)}\n            className=\"product-hero__cta-link\"\n          >\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n        imgClassName=\"h-full object-cover\"\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,GAyCQ,IAAAI,EAAA,6BAxCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAqC,kCACrCC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA+B,oCAG/B,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,EAC5E,CAAE,OAAAU,EAAS,KAAM,aAAAC,CAAa,KAAI,kBAAe,EACjDC,EAAgBD,GAAc,eAAiB,GAC/CE,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAjB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMW,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaJ,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,EACCC,MACC,OAAC,KACC,QAAM,kBAAY,oBAAiBG,EAASE,CAAM,EAAG,GAAGE,CAAa,IAAIhB,CAAa,IAAIC,CAAa,EAAE,EACzG,UAAU,yBAEV,mBAAC,UAAO,UAAU,iCAAkC,SAAAQ,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOZ,KAAQ,cAAWY,CAAW",
+  "names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "locale", "trackingData", "contextHandle", "boxRef"]
 }