npm - @anker-in/headless-ui - Versions diffs - 1.0.19 → 1.0.20-alpha.102301 - Mend

@anker-in/headless-ui 1.0.19 → 1.0.20-alpha.102301

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

Files changed (771) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden overflow-hidden w-full h-full object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block overflow-hidden w-full h-full object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden overflow-hidden w-full h-full object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block overflow-hidden w-full h-full object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

package/dist/esm/biz-components/NavigationSearch/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { NavigationSearchProps } from './types.js';
+export declare const canSearch: (target: any) => boolean;
+declare const NavigationSearch: import("react").ForwardRefExoticComponent<NavigationSearchProps & import("react").RefAttributes<HTMLDivElement>>;
+export default NavigationSearch;

package/dist/esm/biz-components/NavigationSearch/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Fragment as $,jsx as s,jsxs as a}from"react/jsx-runtime";import{Picture as f,Text as r,Button as G,Container as q,Link as u,Heading as k,Grid as z,GridItem as K}from"../../components/index.js";import{Search as j,Close as H}from"../HeaderNavigation/icons/index.js";import{forwardRef as M,useCallback as C,useMemo as L,useState as D}from"react";import{useAiuiContext as V}from"../AiuiProvider/index.js";import{SearchStatus as m}from"./types.js";import{debounce as J}from"es-toolkit";import{cn as x,atobID as w,highlightSearchWord as O}from"../../helpers/utils.js";const Q=t=>!(t.metafields?.global?.HideSearch\|\|t.metafields?.seo?.hidden\|\|t.metafields?.seo?.setting?.noindex),U=M(({data:t,onSearch:l,onClose:n,searchResult:o,isSearching:c,keywords:p},P)=>{const{locale:d="us",copyWriting:Y}=V(),[i,S]=D(""),[b,N]=D(!1),E=J(e=>{l(e)},300),I=C(e=>{e.key==="Enter"&&!b&&l(i)},[b,i,l]),T=L(()=>Array.isArray(p)&&p?.length?p.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[p,t?.popularWords]),A=C(e=>{switch(e.type){case"Product":return`/products${e.path}?q=${i.toLowerCase()}`;case"Article":return`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${i.toLowerCase()}`;default:break}},[i]),y=L(()=>{if(i){if(o?.totalCount)return m.Predict;if(!c)return m.Empty}else return m.Default},[o?.totalCount,i]);return a(q,{childClassName:"!bg-white",className:"relative",ref:P,children:[a("div",{className:"laptop:h-[52px] desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200",children:[s("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:I,onChange:e=>{S(e.target.value),e.target.value&&E(e.target.value)},type:"text",className:"text-sm basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold",placeholder:t?.placeholder}),a("div",{className:"flex items-center gap-3",children:[s(j,{className:"size-5 cursor-pointer",onClick:()=>l(i)}),s("div",{className:"w-[1px] h-[20px] bg-[#E4E5E6]"}),s(H,{className:"size-5 cursor-pointer",onClick:n})]})]}),s("div",{className:"flex flex-col gap-6 desktop:gap-12 desktop:py-6 py-4",children:y===m.Predict?a($,{children:[a("div",{children:[a("div",{className:"flex items-center gap-2",children:[s(r,{html:t?.suggestText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),o?.items?.length>6&&s(G,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!text-sm leading-[1.2] font-bold !p-0",variant:"link",children:t?.moreText})]}),s("div",{className:"flex flex-col mt-2",children:o?.items?.filter(e=>Q(e)).slice(0,6)?.map(e=>s(u,{className:"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4",href:A(e),children:s(r,{html:O(e.title,i),className:"text-sm cursor-pointer leading-[1.4] font-bold"})},e.id))})]}),a("div",{children:[s(r,{html:t?.hotProductsText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),a("div",{className:"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4",children:[s(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative",children:[s(f,{source:t?.advertisingBgImg?.url,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[s(k,{size:2,html:t?.advertisingTitle\|\|"Buy in Guide",className:x("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),s(r,{html:t?.advertisingSubtitle\|\|"20.000mAh",className:x("text-sm text-white font-bold",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),o?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const g=e?.variants?.[0],h=`${g?.image?.url\|\|e?.images?.[0]?.url}`,v=e?.title\|\|e?.name,B=e?.description,W=e?.badge\|\|"",_=`/products/${e?.handle}?variant=${w(g?.id)}`;return s(F,{productImage:h,productName:v,productDesc:B,productBadge:W,listingLink:_},e.id)})]})]})]}):a($,{children:[y===m.Empty&&s(r,{html:t?.noResultText,as:"p",className:"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold"}),a("div",{children:[s(r,{html:t?.popularText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),a("div",{className:"mt-2",children:[s(X,{data:t,keywords:T,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&s(z,{className:"gap-3 laptop:gap-4 mt-3 laptop:mt-4",children:t?.popularPages?.map(e=>s(K,{className:"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3",children:s("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold",children:e?.popularPage})},e?.id))})]})]}),a("div",{children:[s(r,{html:t?.hotProductsText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),a("div",{className:"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4",children:[s(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[s(f,{source:t?.advertisingBgImg?.url,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[s(k,{size:2,html:t?.advertisingTitle\|\|"Buy in Guide",className:"font-bold text-white"}),s(r,{html:t?.advertisingSubtitle\|\|"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const g=e?.custom_description,h=e?.badge\|\|"",v=`/products/${e?.handle}?variant=${w(e?.shopify_id)}`;return s(F,{productImage:e?.image,productName:e?.name,productDesc:g,productBadge:h,listingLink:v},e.id)})]})]})]})})]})}),F=({productImage:t,productName:l,productDesc:n,productBadge:o,className:c,listingLink:p})=>a("div",{className:x("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105",c),children:[s("div",{className:"shrink-0",children:s(f,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),a("div",{className:"relative",children:[s("div",{className:" h-[24px] ",children:o&&s(r,{as:"p",html:o,className:"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]"})}),a("div",{children:[s(u,{href:p,className:"no-underline hover:text-current",children:s(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l})}),n&&s(r,{as:"p",html:n,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),X=({data:t,keywords:l,locale:n})=>s("div",{className:"flex flex-wrap gap-3 laptop:gap-4",children:l?.map((o,c)=>s("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${o?.toLowerCase()}`,className:"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold",children:o},c))});var ie=U;export{Q as canSearch,ie as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/NavigationSearch/index.js.map ADDED Viewed

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

package/dist/esm/biz-components/NavigationSearch/types.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+export interface NavigationSearchProps {
+    data: any;
+    onSearch: (value: string) => void;
+    onClose: () => void;
+    keywords?: {
+        search_term: string;
+        search_date: string;
+        shopify_domain: string;
+        counts: number;
+    }[];
+    searchResult: any;
+    isSearching?: boolean;
+}
+export declare enum SearchStatus {
+    Default = "default",
+    Predict = "predict",
+    Empty = "empty"
+}

package/dist/esm/biz-components/NavigationSearch/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var n=(e=>(e.Default="default",e.Predict="predict",e.Empty="empty",e))(n\|\|{});export{n as SearchStatus};
2	+ //# sourceMappingURL=types.js.map

package/dist/esm/biz-components/NavigationSearch/types.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/NavigationSearch/types.ts"],
+  "sourcesContent": ["export interface NavigationSearchProps {\n  data: any\n  onSearch: (value: string) => void\n  onClose: () => void\n  keywords?: {\n    search_term: string\n    search_date: string\n    shopify_domain: string\n    counts: number\n  }[]\n  searchResult: any\n  isSearching?: boolean\n}\n\nexport enum SearchStatus {\n  Default = 'default',\n  Predict = 'predict',\n  Empty = 'empty',\n}"],
+  "mappings": "AAcO,IAAKA,OACVA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,MAAQ,QAHEA,OAAA",
+  "names": ["SearchStatus"]
+}

package/dist/esm/biz-components/Paginator/index.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare function Paginator({ items, // 仅用来计算总数；若数据很大，建议传长度 itemsLength
+itemsLength, // 优先使用 itemsLength（如果你不想把整个数组传进来）
+pageSize, currentPage: controlledPage, // 受控 current
+onPageChange, // 当受控时由父组件接管
+initialPage, // 非受控时的初始页
+className, }: any): import("react/jsx-runtime").JSX.Element;
+export default Paginator;

package/dist/esm/biz-components/Paginator/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+import{jsx as d,jsxs as w}from"react/jsx-runtime";import{useMemo as M,useState as g,useCallback as k}from"react";import"../../shared/Styles.js";function N(r,s){const t=[];for(let a=r;a<=s;a++)t.push(a);return t}function $(r,s){if(r<=8)return N(1,r);const t=new Set;t.add(1),t.add(2),t.add(r-1),t.add(r),t.add(s-1),t.add(s),t.add(s+1);const a=[...t].filter(e=>e>=1&&e<=r).sort((e,l)=>e-l),i=[];for(let e=0;e<a.length;e++){const l=a[e];i.push(l);const p=a[e+1];p&&p-l>1&&i.push("...")}return i}function v({items:r=[],itemsLength:s,pageSize:t=10,currentPage:a,onPageChange:i,initialPage:e=1,className:l=""}){const p=typeof s=="number"?s:r.length,o=Math.max(1,Math.ceil(p/Math.max(1,t))),[y,x]=g(()=>Math.min(Math.max(1,e||1),o)),n=typeof a=="number"?a:y,m=k(u=>{if(u===n)return;const b=Math.min(Math.max(1,u),o);typeof i=="function"&&i?.(b),typeof a!="number"&&x(b)},[n,o,i,a]),h=M(()=>$(o,n),[o,n]);return w("nav",{className:`flex gap-2 justify-center items-center paginator-wrapper ${l}`,"aria-label":"\u5206\u9875\u5BFC\u822A",children:[d("style",{children:`
+          .pg-btn[aria-disabled='true'] {
+            opacity: 0.45;
+            cursor: not-allowed;
+          }
+        `}),d("button",{"aria-label":"\u4E0A\u4E00\u9875","aria-disabled":n===1,disabled:n===1,className:"mr-1 text-xl cursor-pointer",onClick:()=>m(n-1),children:"\u2039"}),h.map((u,b)=>{if(u==="...")return d("span",{className:"pg-ellipsis","aria-hidden":!0,children:"\u2026"},`e-${b}`);const c=u,f=c===n;return d("button",{"aria-label":`\u7B2C ${c} \u9875`,onClick:()=>m(c),"aria-current":f?"page":void 0,className:`box-border text-sm font-bold py-2 px-3.5 border-transparent ${f?"bg-[#000] text-[#FFF]":""}`,children:c},c)}),d("button",{"aria-label":"\u4E0B\u4E00\u9875","aria-disabled":n===o,disabled:n===o,className:"ml-1 text-xl cursor-pointer",onClick:()=>m(n+1),children:"\u203A"})]})}var A=v;export{A as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Paginator/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Paginator/index.tsx"],
+  "sourcesContent": ["import { useMemo, useState, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction range(start: number, end: number) {\n  const out = []\n  for (let i = start; i <= end; i++) out.push(i)\n  return out\n}\n/**\n * \u751F\u6210\u8981\u663E\u793A\u7684\u9875\u7801\u6570\u7EC4\uFF0C\u8FD4\u56DE\u7684\u6570\u7EC4\u4E2D\u5305\u542B\u6570\u5B57\u9875\u7801\u548C\u5B57\u7B26\u4E32 '...' \u8868\u793A\u7701\u7565\u53F7\n * \u7B97\u6CD5\u7279\u70B9\uFF1A\u4E0D\u521B\u5EFA\u957F\u6570\u7EC4\uFF08\u4E0D\u4F1A\u5BF9 pageCount \u505A map\uFF09\u2014\u2014\u53EA\u5C06\u9700\u8981\u663E\u793A\u7684\u9875\u7801\u52A0\u5165\u96C6\u5408\u5E76\u6392\u5E8F\n */\nfunction getDisplayPages(pageCount: any, currentPage: any) {\n  // pageCount \u5F88\u5C0F\u65F6\uFF0C\u76F4\u63A5\u8FD4\u56DE\u5168\u90E8\u9875\u7801\n  if (pageCount <= 8) return range(1, pageCount)\n\n  const pagesSet = new Set()\n  // \u524D\u4E24\u9875\u4E0E\u540E\u4E24\u9875\n  pagesSet.add(1)\n  pagesSet.add(2)\n  pagesSet.add(pageCount - 1)\n  pagesSet.add(pageCount)\n  // \u5F53\u524D\u9875\u4EE5\u53CA\u5DE6\u53F3\u5404\u4E00\u9875\n  pagesSet.add(currentPage - 1)\n  pagesSet.add(currentPage)\n  pagesSet.add(currentPage + 1)\n\n  // \u8FC7\u6EE4\u8D8A\u754C\u5E76\u8F6C\u4E3A\u6392\u5E8F\u6570\u7EC4\n  const pages = [...(pagesSet as any)].filter(p => p >= 1 && p <= pageCount).sort((a, b) => a - b)\n  // \u6700\u7EC8\u6570\u7EC4\uFF0C\u9047\u5230\u76F8\u90BB\u95F4\u9699 > 1 \u65F6\u63D2\u5165\u7701\u7565\u53F7\n  const result = []\n  for (let i = 0; i < pages.length; i++) {\n    const p = pages[i]\n    result.push(p)\n    const next = pages[i + 1]\n    if (next && next - p > 1) {\n      result.push('...')\n    }\n  }\n  return result\n}\n\n// Paginator \u7EC4\u4EF6\nfunction Paginator({\n  items = [], // \u4EC5\u7528\u6765\u8BA1\u7B97\u603B\u6570\uFF1B\u82E5\u6570\u636E\u5F88\u5927\uFF0C\u5EFA\u8BAE\u4F20\u957F\u5EA6 itemsLength\n  itemsLength, // \u4F18\u5148\u4F7F\u7528 itemsLength\uFF08\u5982\u679C\u4F60\u4E0D\u60F3\u628A\u6574\u4E2A\u6570\u7EC4\u4F20\u8FDB\u6765\uFF09\n  pageSize = 10,\n  currentPage: controlledPage, // \u53D7\u63A7 current\n  onPageChange, // \u5F53\u53D7\u63A7\u65F6\u7531\u7236\u7EC4\u4EF6\u63A5\u7BA1\n  initialPage = 1, // \u975E\u53D7\u63A7\u65F6\u7684\u521D\u59CB\u9875\n  className = '',\n}: any) {\n  const totalItems = typeof itemsLength === 'number' ? itemsLength : items.length\n  const pageCount = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)))\n\n  const [internalPage, setInternalPage] = useState(() => {\n    const start = initialPage || 1\n    return Math.min(Math.max(1, start), pageCount)\n  })\n\n  const current = typeof controlledPage === 'number' ? controlledPage : internalPage\n\n  const changePage = useCallback(\n      (newPage: number) => {\n      if (newPage === current) return\n      const clamped = Math.min(Math.max(1, newPage), pageCount)\n      if (typeof onPageChange === 'function') {\n        onPageChange?.(clamped)\n      }\n      if (typeof controlledPage !== 'number') {\n        setInternalPage(clamped)\n      }\n    },\n    [current, pageCount, onPageChange, controlledPage]\n  )\n\n  const displayPages = useMemo(() => getDisplayPages(pageCount, current), [pageCount, current])\n\n  return (\n    <nav className={`flex gap-2 justify-center items-center paginator-wrapper ${className}`} aria-label=\"\u5206\u9875\u5BFC\u822A\">\n      <style>\n        {`\n          .pg-btn[aria-disabled='true'] {\n            opacity: 0.45;\n            cursor: not-allowed;\n          }\n        `}\n      </style>\n      {/* \u8DF3\u5230\u9996\u9875 */}\n      {/* <button\n        className=\"pg-btn\"\n        onClick={() => changePage(1)}\n        aria-label=\"\u8DF3\u5230\u7B2C\u4E00\u9875\"\n        aria-disabled={current === 1}\n        disabled={current === 1}>\n        \u00AB\n      </button> */}\n      {/* \u4E0A\u4E00\u9875 */}\n      <button\n        aria-label=\"\u4E0A\u4E00\u9875\"\n        aria-disabled={current === 1}\n        disabled={current === 1}\n        className=\"mr-1 text-xl cursor-pointer\"\n        onClick={() => changePage(current - 1)}\n      >\n        \u2039\n      </button>\n      {displayPages.map((p, idx) => {\n        if (p === '...') {\n          return (\n            <span key={`e-${idx}`} className=\"pg-ellipsis\" aria-hidden>\n              \u2026\n            </span>\n          )\n        }\n        const pageNum = p\n        const isActive = pageNum === current\n        return (\n          <button\n            key={pageNum}\n            aria-label={`\u7B2C ${pageNum} \u9875`}\n            onClick={() => changePage(pageNum)}\n            aria-current={isActive ? 'page' : undefined}\n            className={`box-border text-sm font-bold py-2 px-3.5 border-transparent ${isActive ? 'bg-[#000] text-[#FFF]' : ''}`}\n          >\n            {pageNum}\n          </button>\n        )\n      })}\n      {/* \u4E0B\u4E00\u9875 */}\n      <button\n        aria-label=\"\u4E0B\u4E00\u9875\"\n        aria-disabled={current === pageCount}\n        disabled={current === pageCount}\n        className=\"ml-1 text-xl cursor-pointer\"\n        onClick={() => changePage(current + 1)}\n      >\n        \u203A\n      </button>\n      {/* \u8DF3\u5230\u672B\u9875 */}\n      {/* <button\n        className=\"pg-btn\"\n        onClick={() => changePage(pageCount)}\n        aria-label=\"\u8DF3\u5230\u6700\u540E\u4E00\u9875\"\n        aria-disabled={current === pageCount}\n        disabled={current === pageCount}>\n        \u00BB\n      </button> */}\n\n      {/* \u603B\u6570\u5C55\u793A\uFF08\u53EF\u9009\uFF09 */}\n      {/* <div style={{ marginLeft: 8, color: \"rgba(0,0,0,0.55)\" }}>\n        \u7B2C {current} / {pageCount} \u9875 \u2022 {totalItems} \u9879\n      </div> */}\n    </nav>\n  )\n}\n\nexport default Paginator"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMemo", "useState", "useCallback", "range", "start", "end", "out", "i", "getDisplayPages", "pageCount", "currentPage", "pagesSet", "pages", "p", "a", "b", "result", "next", "Paginator", "items", "itemsLength", "pageSize", "controlledPage", "onPageChange", "initialPage", "className", "totalItems", "internalPage", "setInternalPage", "current", "changePage", "newPage", "clamped", "displayPages", "idx", "pageNum", "isActive", "Paginator_default"]
+}

package/dist/esm/biz-components/SearchPage/index.d.ts ADDED Viewed

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

package/dist/esm/biz-components/SearchPage/index.js ADDED Viewed

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

package/dist/esm/biz-components/SearchPage/index.js.map ADDED Viewed

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

package/dist/esm/biz-components/SearchPage/types.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import type { Product } from '../../cpn-components/CpnProductCard/types';
+export type SearchPageType = 'products' | 'blogs' | 'pages';
+export type SortKey = {
+    id: string;
+    value: string;
+    label: string;
+};
+export interface SearchPageProps {
+    searchResult: {
+        [key in SearchPageTabType]: any;
+    };
+    searchResultCount: {
+        [key in SearchPageTabType]: number;
+    };
+    loading?: boolean;
+    searchValue: string;
+    data: any;
+    buildProps?: {
+        products: any[];
+    };
+    onChangeTab?: (tabType: SearchPageTabType) => void;
+    onSecondaryButton?: (product: Product) => void;
+    onPrimaryButton?: (product: Product) => void;
+    onChangeSort?: (tabType: SearchPageType, sortKey: {
+        value: string;
+        label: string;
+    }) => void;
+}
+export interface SearchProductItemProps {
+    searchValue?: string;
+    product: any;
+    variantData?: any;
+    onSecondaryButton?: () => void;
+    onPrimaryButton?: () => void;
+}
+export interface SearchBlogItemProps {
+    searchValue: string;
+    blog: any;
+}
+export interface SearchPageItemProps {
+    searchValue: string;
+    page: any;
+}
+export declare enum SearchPageTabType {
+    PRODUCTS = "products",
+    BLOGS = "blogs",
+    PAGES = "pages"
+}
+export interface SearchRecommendProductsProps {
+    products: any[];
+    title: string;
+    buildProps?: {
+        products: any[];
+    };
+    onSecondaryButton?: () => void;
+    onPrimaryButton?: () => void;
+}
+export declare const IPC_SEARCH_PAGE = "ipc-search-page";

package/dist/esm/biz-components/SearchPage/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var r=(e=>(e.PRODUCTS="products",e.BLOGS="blogs",e.PAGES="pages",e))(r\|\|{});const t="ipc-search-page";export{t as IPC_SEARCH_PAGE,r as SearchPageTabType};
2	+ //# sourceMappingURL=types.js.map

package/dist/esm/biz-components/SearchPage/types.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SearchPage/types.ts"],
+  "sourcesContent": ["import type { Product } from '../../cpn-components/CpnProductCard/types'\nimport type { Img } from '../../types/props'\n\nexport type SearchPageType = 'products' | 'blogs' | 'pages'\n\nexport type SortKey = {\n  id: string\n  value: string\n  label: string\n}\n\nexport interface SearchPageProps {\n  searchResult: {\n    [key in SearchPageTabType]: any\n  }\n  searchResultCount: {\n    [key in SearchPageTabType]: number\n  }\n  loading?: boolean\n  searchValue: string\n  data: any\n  buildProps?: {\n    products: any[]\n  }\n  onChangeTab?: (tabType: SearchPageTabType) => void\n  onSecondaryButton?: (product: Product) => void\n  onPrimaryButton?: (product: Product) => void\n  // loadMore?: (type: SearchPageType) => void\n  onChangeSort?: (tabType: SearchPageType, sortKey: { value: string; label: string }) => void\n}\n\nexport interface SearchProductItemProps {\n  searchValue?: string\n  product: any\n  variantData?: any\n  onSecondaryButton?: () => void\n  onPrimaryButton?: () => void\n}\n\nexport interface SearchBlogItemProps {\n  searchValue: string\n  blog: any\n}\n\nexport interface SearchPageItemProps {\n  searchValue: string\n  page: any\n}\n\nexport enum SearchPageTabType {\n  PRODUCTS = 'products',\n  BLOGS = 'blogs',\n  PAGES = 'pages',\n}\n\nexport interface SearchRecommendProductsProps {\n\n  products: any[]\n  title: string\n  buildProps?: {\n    products: any[]\n  }\n  onSecondaryButton?: () => void\n  onPrimaryButton?: () => void\n}\n\nexport const IPC_SEARCH_PAGE = 'ipc-search-page'"],
+  "mappings": "AAiDO,IAAKA,OACVA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,OAAA,IAiBL,MAAMC,EAAkB",
+  "names": ["SearchPageTabType", "IPC_SEARCH_PAGE"]
+}

package/dist/esm/biz-components/SectionHeading/SectionHeading.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SectionHeadingProps } from './types.js';
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeading;

package/dist/esm/biz-components/SectionHeading/index.d.ts ADDED Viewed

File without changes

package/dist/esm/biz-components/SectionHeading/types.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SectionHeadingProps {
+    title: string;
+    className?: string;
+    children: React.ReactNode;
+}

package/dist/esm/biz-components/SelectStore/index.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Img } from '../../types/props.js';
+export type SelectStoreDataType = {
+    title: string;
+    desc: string;
+    img: Img;
+    mobileImg: Img;
+    padImg: Img;
+    miniImg: Img;
+};
+type SelectStoreType = {
+    data: {
+        list: SelectStoreDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectStoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/SelectStore/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{Fragment as c,jsx as e,jsxs as s}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as i}from"../../shared/Styles.js";import{Picture as r,Text as l}from"../../components/index.js";const d=a=>{const{data:p,className:g}=a,{list:o}=p;return e(c,{children:e("div",{className:"",children:e("div",{className:"grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:o.map((t,m)=>s("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[e(r,{className:"w-full",imgClassName:"",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),s("div",{className:"absolute bottom-0 left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]",children:[e(l,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),e(l,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},m))})})})};var v=i(d);export{v as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/SelectStore/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n  title: string\n  desc: string\n  img: Img\n  mobileImg: Img\n  padImg: Img\n  miniImg: Img\n  // pay: {\n  //   img: Img\n  // }[]\n  // delivery: {\n  //   img: Img\n  // }[]\n  // service: {\n  //   title: string\n  //   img: Img\n  // }[]\n}\n\ntype SelectStoreType = {\n  data: {\n    list: SelectStoreDataType[]\n  }\n  className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n  const { data, className } = props\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div className=''>\n        <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n                    <Picture\n                      className=\"w-full\"\n                      imgClassName=\"\"\n                      source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n                    />\n                <div className='absolute bottom-0 left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]'>\n                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n                </div>\n            </div>\n          ))}\n        </div>\n        {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n              <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n                <div className=\"flex flex-col justify-center flex-1\">\n                \n                {item?.pay && (\n                  <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n                  {item?.pay?.map((pay, ind)=>{\n                    return (\n                      <div key={ind} className='laptop:w-[60px] w-[48px]'>\n                        <Picture\n                            className=\" w-full\"\n                            imgClassName=\"\"\n                            source={pay?.img?.url}\n                            alt={pay?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n                )}\n                \n                {\n                 item?.delivery && (\n                  <div className='flex gap-[24px] items-center justify-center'>\n                    {item?.delivery?.map((delivery, ind)=>{\n                    return (\n                      <div key={ind} className=''>\n                        <Picture\n                            className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n                            imgClassName=\"\"\n                            source={delivery?.img?.url}\n                            alt={delivery?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                  </div>\n                 ) \n                }\n                \n                {\n                  item?.service && (\n                    <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n                      {item?.service?.map((service, ind)=>{\n                        // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n                        const isFifth = ind === 4;\n                        return (\n                          <div key={ind} className={`\n                            flex flex-col items-center desktop:h-full  w-[157px] justify-start desktop:w-[81px]\n                            ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n                          `}>\n                            <div className='w-[70px] desktop:w-[54px]'>\n                              <Picture\n                              className=\"\"\n                              imgClassName=\"w-full h-auto\"\n                              source={service?.img?.url}\n                              alt={service?.img?.alt || ''}\n                            />\n                            </div>\n                            <div className='text-center'>\n                            <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n                            </div>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  )\n                }\n                </div>\n                <div className='mt-auto'>\n                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
+  "mappings": "aAsCI,mBAAAA,EAKgB,OAAAC,EAKJ,QAAAC,MAVZ,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,gEACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAAgB,UAAU,qIACnB,UAAAD,EAACG,EAAA,CACC,UAAU,SACV,aAAa,GACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACJT,EAAC,OAAI,UAAU,wEACb,UAAAD,EAACI,EAAA,CAAK,KAAMM,GAAM,MAAO,UAAU,0FAAyF,EAC5HV,EAACI,EAAA,CAAK,KAAMM,GAAM,KAAM,UAAU,+EAA8E,GAClH,IATMC,CAUV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
+  "names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "SelectStore", "props", "data", "className", "list", "item", "index", "SelectStore_default"]
+}

package/dist/esm/biz-components/Shelf/Shelf.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { ShelfProps } from './types.js';
+declare const _default: {
+    (props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

package/dist/esm/biz-components/Shelf/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './Shelf.js';

package/dist/esm/biz-components/Shelf/types.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export type ShelfProps = {
+    id: string;
+    title: string;
+    subtitle: string;
+    products: any[];
+};