npm - @anker-in/headless-ui - Versions diffs - 1.0.9 → 1.0.10 - Mend

@anker-in/headless-ui 1.0.9 → 1.0.10

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 (251) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any\n  productsCard?: any\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        {\n          'h-[360px]': isMobile,\n        }\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {basePrice || ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              custom_name: item.custom_name,\n              custom_description: item.custom_description,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\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: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event, isShowTag, isShowOriginalPrice } }}\n            Slide={ShelfDisplayItem}\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\ntype ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n}\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        {\n          'h-[360px]': isMobile,\n        }\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n        <div\n          className={cn(\n            'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n          )}\n        >\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 flex h-[48px] items-end justify-start\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event, recommendedData, target = '_self' }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n    const isRecommend = useRef<boolean>(false)\n    const isView = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData || [])\n      } else {\n        const newCurrentData = currentData\n          ?.map(item => {\n            const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n            if (findData) {\n              return {\n                sku: item.sku,\n                isShowRecommended: false,\n                custom_name: item.custom_name,\n                custom_description: item.custom_description,\n                ...findData,\n              }\n            }\n          })\n          ?.filter(item => item)\n        setCurrentItems(newCurrentData || [])\n      }\n    }\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{\n              list: currentItems,\n              configuration: { ...other, event: event, isShowTag, isShowOriginalPrice, target: target },\n            }}\n            Slide={ShelfDisplayItem}\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withLayout", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "ShelfDisplay", "buildData", "className", "key", "event", "recommendedData", "target", "tabId", "setTabId", "currentItems", "setCurrentItems", "viewRef", "isRecommend", "isView", "innerRef", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowRecommendedCard", "other", "gackViewEvent", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "ShelfDisplay_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const a={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},o=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl"})[e]||"";function m({amount:e,currencyCode:n,locale:i,maximumFractionDigits:r,minimumFractionDigits:u,removeTrailingZeros:c=!1}){let t=new Intl.NumberFormat(o(i),{style:"currency",currency:n||"USD",minimumFractionDigits:r===0?0:u,maximumFractionDigits:r}).format(e);return["eu-de","eu-en","de","eu"].includes(i)&&(t=t?.toString()?.replace(/[\s]/g,"")),c&&(t=t.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),t}function b({amount:e,baseAmount:n,currencyCode:i,locale:r,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:s}){if(typeof Intl>"u")return{price:`${a[r]}${e}`,basePrice:`${a[r]}${n}`,discount:`${a[r]}${n-e||0}`};const t=n>e,f=new Intl.NumberFormat(o(r),{style:"percent"}),g=t?f.format((n-e)/n):null,d=m({amount:e,currencyCode:i,locale:r,removeTrailingZeros:s}),l=t?m({amount:n,currencyCode:i,locale:r,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:s}):void 0;return{price:d,basePrice:l,discount:g}}export{a as PRICE_SYMBOL,m as formatPrice,b as formatVariantPrice,o as languageTerritory};
+const a={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},o=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl","eu-de":"de-de"})[e]||"";function m({amount:e,currencyCode:n,locale:i,maximumFractionDigits:r,minimumFractionDigits:u,removeTrailingZeros:c=!1}){let t=new Intl.NumberFormat(o(i),{style:"currency",currency:n||"USD",minimumFractionDigits:r===0?0:u,maximumFractionDigits:r}).format(e);return["eu-de","eu-en","de","eu"].includes(i)&&(t=t?.toString()?.replace(/[\s]/g,"")),c&&(t=t.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),t}function b({amount:e,baseAmount:n,currencyCode:i,locale:r,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:s}){if(typeof Intl>"u")return{price:`${a[r]}${e}`,basePrice:`${a[r]}${n}`,discount:`${a[r]}${n-e||0}`};const t=n>e,f=new Intl.NumberFormat(o(r),{style:"percent"}),d=t?f.format((n-e)/n):null,g=m({amount:e,currencyCode:i,locale:r,removeTrailingZeros:s}),l=t?m({amount:n,currencyCode:i,locale:r,maximumFractionDigits:u,minimumFractionDigits:c,removeTrailingZeros:s}):void 0;return{price:g,basePrice:l,discount:d}}export{a as PRICE_SYMBOL,m as formatPrice,b as formatVariantPrice,o as languageTerritory};
 //# sourceMappingURL=shelfDisplay.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'fr-fr',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n"],
-  "mappings": "AACO,MAAMA,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBC,CAAM,EAAG,CACtE,MAAO,WACP,SAAUG,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDO,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAN,EACA,WAAAO,EACA,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGS,CAAU,GAC/C,SAAU,GAAGX,EAAaE,CAAM,CAAC,GAAGS,EAAaP,GAAU,CAAC,EAC9D,EAGF,MAAMQ,EAAcD,EAAaP,EAC3BS,EAAiB,IAAI,KAAK,aAAaZ,EAAkBC,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKY,EAAWF,EAAcC,EAAe,QAAQF,EAAaP,GAAUO,CAAU,EAAI,KAErFI,EAAQZ,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEQ,EAAYJ,EACdT,EAAY,CACV,OAAQQ,EACR,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAO,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC",
+  "sourcesContent": ["/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'fr-fr',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    'eu-de': 'de-de',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n"],
+  "mappings": "AACO,MAAMA,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,QAAS,OACX,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBC,CAAM,EAAG,CACtE,MAAO,WACP,SAAUG,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDO,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAN,EACA,WAAAO,EACA,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGS,CAAU,GAC/C,SAAU,GAAGX,EAAaE,CAAM,CAAC,GAAGS,EAAaP,GAAU,CAAC,EAC9D,EAGF,MAAMQ,EAAcD,EAAaP,EAC3BS,EAAiB,IAAI,KAAK,aAAaZ,EAAkBC,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKY,EAAWF,EAAcC,EAAe,QAAQF,EAAaP,GAAUO,CAAU,EAAI,KAErFI,EAAQZ,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEQ,EAAYJ,EACdT,EAAY,CACV,OAAQQ,EACR,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAO,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC",
   "names": ["PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice"]
 }

package/dist/esm/biz-components/Slogan/index.d.ts CHANGED Viewed

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

package/dist/esm/biz-components/Slogan/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as G}from"react/jsx-runtime";import s,{useImperativeHandle as U,useRef as x}from"react";import{useGSAP as Y}from"@gsap/react";import{gsap as h}from"gsap";import{SplitText as M}from"gsap/dist/SplitText";import{ScrollTrigger as v}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{Heading as _,Text as q}from"../../components/index.js";import{withStyles as B}from"../../shared/Styles.js";import{useExposure as J}from"../../hooks/useExposure.js";const K="copy",O="brand_slogan";function Q(u=[],m=3){const f=[];for(let e=0;e<u.length;e+=m)f.push(u.slice(e,e+m));return f}const $=s.forwardRef(({data:u,className:m=""},f)=>{const{title:e,features:n=[],featureChunkSize:H=3}=u,[y,N]=s.useState(0),[L,w]=s.useState(!0),b=x(null),g=Q(n,H),T=g.length,a=n.length>H,z=a?[...g,g[0]]:g,E=40;U(f,()=>b.current),J(b,{componentType:K,componentName:O,componentTitle:e}),s.useEffect(()=>{if(!a)return;const r=setInterval(()=>{N(t=>t+1),w(!0)},3e3);return()=>clearInterval(r)},[T,a]),s.useEffect(()=>{if(a)if(y===T){const r=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(r)}else w(!0)},[y,T,a]);const i=x(null),R=x(null),d=x(null);return Y(()=>{h.registerPlugin(v,M);function r(){if(!i.current)return;d.current=new M(i.current,{type:"words",wordsClass:"word"});const t=i.current?.clientHeight||100,p=d.current.words;h.set(p,{opacity:0}),v.create({trigger:i.current,start:"bottom bottom-=4%",end:`bottom+=${t*1.5}px bottom-=4%`,scrub:!0,onUpdate:o=>{const D=o.progress,k=p.length,P=1/k,I=.5;p.forEach((j,A)=>{const C=A/k*(1-I),F=P*(1+I);let S=(D-C)/F;S=Math.max(0,Math.min(S,1)),h.set(j,{opacity:S})})}}),n&&n.length>0&&v.create({trigger:R.current,start:`bottom+=${t*2}px bottom-=6%`,end:`bottom+=${t*2+100}px bottom-=6%`,onUpdate:o=>{h.set(R.current,{opacity:o.progress})}})}return setTimeout(()=>{r()},1e3),()=>{d.current&&d.current.revert(),v.getAll().forEach(t=>t.kill())}},[]),G("div",{ref:b,className:c("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[l(_,{ref:i,as:"h2",size:2,weight:"bold",align:"left",className:c("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:e}),n&&n.length>0&&l("div",{className:c("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:l("div",{className:c(["flex flex-col",L?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*E}px)`},children:z.map((r,t)=>l("div",{className:c("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:r.map((p,o)=>G(s.Fragment,{children:[o>0&&l("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),l(q,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},o))},t))})})]})});$.displayName="Slogan";var st=B($);export{O as componentName,K as componentType,st as default};
+"use client";import{jsx as n,jsxs as D}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import"@gsap/react";import{gsap as h}from"gsap";import{SplitText as G}from"gsap/dist/SplitText";import{ScrollTrigger as H}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";import{useExposure as W}from"../../hooks/useExposure.js";const X="copy",Z="brand_slogan";function tt(f=[],m=3){const g=[];for(let t=0;t<f.length;t+=m)g.push(f.slice(t,t+m));return g}const z=l.forwardRef(({data:f,className:m=""},g)=>{const{title:t,features:o=[],featureChunkSize:N=3}=f,[v,k]=l.useState(0),[P,w]=l.useState(!0),y=i(null),T=i(null),b=i(null),d=tt(o,N),E=d.length,a=o.length>N,j=a?[...d,d[0]]:d,S=40;q(g,()=>y.current);const{ref:C,inView:I}=Q();W(y,{componentType:X,componentName:Z,componentTitle:t}),l.useEffect(()=>{if(!a)return;const e=setInterval(()=>{k(r=>r+1),w(!0)},3e3);return()=>clearInterval(e)},[E,a]),l.useEffect(()=>{if(a)if(v===E){const e=setTimeout(()=>{w(!1),k(0)},500);return()=>clearTimeout(e)}else w(!0)},[v,E,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(H,G);function e(){if(!c.current)return;x.current=new G(c.current,{type:"words",wordsClass:"word"});const r=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),T.current=H.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${r*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,A=1/L,$=.5;u.forEach((F,U)=>{const Y=U/L*(1-$),_=A*(1+$);let R=(V-Y)/_;R=Math.max(0,Math.min(R,1)),h.set(F,{opacity:R})})}}),o&&o.length>0&&(b.current=H.create({trigger:M.current,start:`bottom+=${r*2}px bottom-=6%`,end:`bottom+=${r*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&e(),()=>{x.current&&x.current.revert(),T.current&&T.current.kill(),b.current&&b.current.kill()}},[I]),n("div",{ref:C,children:D("div",{ref:y,className:p("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[n(J,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:t}),o&&o.length>0&&n("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:n("div",{className:p(["flex flex-col",P?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*S}px)`},children:j.map((e,r)=>n("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:e.map((u,s)=>D(l.Fragment,{children:[s>0&&n("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),n(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},r))})})]})})});z.displayName="Slogan";var ft=O(z);export{Z as componentName,X as componentType,ft as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\n\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n\n      if (features && features.length > 0) {\n        ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\n          },\n        })\n      }\n    }\n\n    setTimeout(() => {\n      gsapResize()\n    }, 1000)\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={innerRef}\n      className={cn(\n        'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n        )}\n        html={title}\n      />\n      {features && features.length > 0 && (\n        <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                    <Text\n                      size={3}\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withStyles", "useExposure", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\n\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n\n      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\n          },\n        })\n      }\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as=\"h2\"\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "useExposure", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_default"]
 }

package/dist/esm/biz-components/Spacer/index.d.ts CHANGED Viewed

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

package/dist/esm/biz-components/Spacer/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as c}from"react/jsx-runtime";import o from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as s}from"../../shared/Styles.js";const p=o.forwardRef(({className:t,data:r})=>{const{space:e="default"}=r;return c("div",{className:a("ipc_spacer",e==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",e==="fixed"&&"h-16",t)})});p.displayName="Spacer";var f=s(p);export{f as default};
+"use client";import{jsx as c}from"react/jsx-runtime";import r from"react";import{cn as a}from"../../helpers/utils.js";import{withLayout as s}from"../../shared/Styles.js";const p=r.forwardRef(({className:t,data:o})=>{const{space:e="default"}=o;return c("div",{className:a("ipc_spacer",e==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",e==="fixed"&&"h-16",t)})});p.displayName="Spacer";var l=s(p);export{l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Spacer/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        'ipc_spacer',\n        space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withStyles(Spacer)\n"],
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        'ipc_spacer',\n        space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withLayout(Spacer)\n"],
   "mappings": "aASI,cAAAA,MAAA,oBARJ,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAASH,EAAM,WAAwC,CAAC,CAAE,UAAAI,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,OACEN,EAAC,OACC,UAAWE,EACT,aACAK,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBF,CACF,EACD,CAEL,CAAC,EAEDD,EAAO,YAAc,SAErB,IAAOI,EAAQL,EAAWC,CAAM",
-  "names": ["jsx", "React", "cn", "withStyles", "Spacer", "className", "data", "space", "Spacer_default"]
+  "names": ["jsx", "React", "cn", "withLayout", "Spacer", "className", "data", "space", "Spacer_default"]
 }

package/dist/esm/biz-components/Tabs/Tabs.d.ts CHANGED Viewed

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

package/dist/esm/biz-components/Tabs/Tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{withStyles as c}from"../../shared/Styles.js";import*as t from"../../components/tabs.js";import{cn as f}from"../../helpers/index.js";import u from"react";import d from"../ShelfDisplay/index.js";import y from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import N from"../Title/index.js";const g=u.forwardRef(({data:m,className:o},l)=>{const{theme:b,shape:p,align:n,tabs:s,sectionTitle:i}=m,T=a=>a.blockType==="ipc-shelfdisplay"?e(d,{data:a}):a.blockType==="ipc-multiLayoutGraphicBlock"?e(y,{data:a}):null;return r("section",{ref:l,className:f(b==="dark"?"aiui-dark":"",o),children:[i&&e(N,{className:"section-title",data:{title:i}}),r(t.Tabs,{shape:p,align:n,defaultValue:s[0].tabName,children:[e(t.TabsList,{className:"tabs-list",children:s.map(a=>e(t.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),s.map(a=>e(t.TabsContent,{value:a.tabName,className:"tabs-content",children:T(a.tabContent?.[0])},a.tabName))]})]})});var B=c(g);export{B as default};
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as i from"../../components/tabs.js";import{cn as f}from"../../helpers/index.js";import u from"react";import d from"../ShelfDisplay/index.js";import y from"../AccordionCards/index.js";import N from"../Faq/index.js";import k from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import g from"../Title/index.js";const h=u.forwardRef(({data:o,className:m},l)=>{const{theme:c,shape:p,align:T,tabs:r,sectionTitle:s}=o,b=a=>a?.blockType==="ipc-shelfdisplay"?e(d,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?e(k,{data:a}):a?.blockType==="ipc-accordioncards"?e(y,{data:a}):a?.blockType==="ipc-faq"?e(N,{data:a}):null;return t("section",{ref:l,className:f(c==="dark"?"aiui-dark":"",m),children:[s&&e(g,{className:"section-title",data:{title:s}}),t(i.Tabs,{shape:p,align:T,defaultValue:r[0].tabName,children:[e(i.TabsList,{className:"tabs-list",children:r.map(a=>e(i.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),r.map(a=>e(i.TabsContent,{value:a.tabName,className:"tabs-content",children:a.tabContent?.[0]?b(a.tabContent?.[0]):null},a.tabName))]})]})});var M=n(h);export{M as default};
 //# sourceMappingURL=Tabs.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
-  "sourcesContent": ["'use client'\nimport { withStyles } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs, sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n    if (tabContent.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {renderTabContent(tab.tabContent?.[0])}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withStyles(Tabs)\n"],
-  "mappings": "aAea,cAAAA,EAWP,QAAAC,MAXO,oBAdb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAElB,MAAMC,EAAOJ,EAAM,WAAsC,CAAC,CAAE,KAAAK,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,aAAAC,CAAa,EAAIP,EAE9CQ,EAAoBC,GACpBA,EAAW,YAAc,mBACpBnB,EAACM,EAAA,CAAa,KAAMa,EAAY,EAC9BA,EAAW,YAAc,8BAC3BnB,EAACO,EAAA,CAAwB,KAAMY,EAAY,EAE3C,KAIX,OACElB,EAAC,WAAQ,IAAKW,EAAc,UAAWR,EAAGS,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBjB,EAACQ,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOS,CAAa,EAAG,EACjFhB,EAACE,EAAc,KAAd,CAAmB,MAAOW,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAhB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAa,EAAK,IAAII,GACRpB,EAACG,EAAc,YAAd,CAA4C,MAAOiB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCJ,EAAK,IAAII,GACRpB,EAACG,EAAc,YAAd,CAA4C,MAAOiB,EAAI,QAAS,UAAU,eACxE,SAAAF,EAAiBE,EAAI,aAAa,CAAC,CAAC,GADPA,EAAI,OAEpC,CACD,GACH,GACF,CAEJ,CAAC,EAED,IAAOC,EAAQnB,EAAWO,CAAI",
-  "names": ["jsx", "jsxs", "withStyles", "TabsPrimitive", "cn", "React", "ShelfDisplay", "MultiLayoutGraphicBlock", "Title", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs, sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(Tabs)\n"],
+  "mappings": "aAiBa,cAAAA,EAeP,QAAAC,MAfO,oBAhBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAElB,MAAMC,EAAON,EAAM,WAAsC,CAAC,CAAE,KAAAO,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,aAAAC,CAAa,EAAIP,EAE9CQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrBrB,EAACM,EAAA,CAAa,KAAMe,EAAY,EAC9BA,GAAY,YAAc,8BAC5BrB,EAACS,EAAA,CAAwB,KAAMY,EAAY,EACzCA,GAAY,YAAc,qBAC5BrB,EAACO,EAAA,CAAe,KAAMc,EAAY,EAChCA,GAAY,YAAc,UAC5BrB,EAACQ,EAAA,CAAI,KAAMa,EAAY,EAEvB,KAIX,OACEpB,EAAC,WAAQ,IAAKa,EAAc,UAAWV,EAAGW,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBnB,EAACU,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOS,CAAa,EAAG,EACjFlB,EAACE,EAAc,KAAd,CAAmB,MAAOa,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAlB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAe,EAAK,IAAII,GACRtB,EAACG,EAAc,YAAd,CAA4C,MAAOmB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCJ,EAAK,IAAII,GACRtB,EAACG,EAAc,YAAd,CAA4C,MAAOmB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,MADjCA,EAAI,OAEpC,CACD,GACH,GACF,CAEJ,CAAC,EAED,IAAOC,EAAQrB,EAAWS,CAAI",
+  "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "React", "ShelfDisplay", "AccordionCards", "Faq", "MultiLayoutGraphicBlock", "Title", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
 }

package/dist/esm/biz-components/Tabs/types.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import type { Align, Shape, Theme } from '../../types/props.js';
 import type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js';
 import type { ShelfDisplayProps } from '../ShelfDisplay/index.js';
+import type { AccordionCardsType } from '../AccordionCards/index.js';
+import type { FaqProps } from '../Faq/types.js';
 export type TabsProps = {
     data: {
         sectionTitle?: string;
@@ -13,6 +15,10 @@ export type TabsProps = {
                 blockType: 'ipc-shelfdisplay';
             })[] | (MultiLayoutGraphicBlockProps['data'] & {
                 blockType: 'ipc-multiLayoutGraphicBlock';
+            })[] | (AccordionCardsType['data'] & {
+                blockType: 'ipc-accordioncards';
+            })[] | (FaqProps['data'] & {
+                blockType: 'ipc-faq';
             })[];
         }[];
     };

package/dist/esm/biz-components/Title/index.d.ts CHANGED Viewed

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

package/dist/esm/biz-components/Title/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as f}from"react/jsx-runtime";import S,{useRef as m}from"react";import{useGSAP as k}from"@gsap/react";import{gsap as s}from"gsap";import{SplitText as p}from"gsap/dist/SplitText";import{ScrollTrigger as i}from"gsap/dist/ScrollTrigger";import{cn as E}from"../../helpers/utils.js";import{Heading as M}from"../../components/index.js";import{withStyles as P}from"../../shared/Styles.js";const u=S.forwardRef(({data:d,className:g})=>{const{title:l,theme:h}=d,t=m(null),e=m(null);return k(()=>{s.registerPlugin(p,i);function y(){if(!t.current)return;const r=t.current?.clientHeight||80;e.current=new p(t.current,{type:"words",wordsClass:"word"});const o=e.current.words;s.set(o,{opacity:0}),i.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${r*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:T=>{const w=T.progress,a=o.length,b=1/a,c=.5;o.forEach((v,x)=>{const H=x/a*(1-c),R=b*(1+c);let n=(w-H)/R;n=Math.max(0,Math.min(n,1)),s.set(v,{opacity:n})})}})}return setTimeout(()=>{y()},1e3),()=>{e.current&&e.current.revert(),i.getAll().forEach(r=>r.kill())}},[]),l&&f("div",{className:E("mb-[24px] space-y-4",g,{"aiui-dark":h==="dark"}),children:f(M,{ref:t,as:"h2",size:4,html:l})})});u.displayName="Title";var U=P(u);export{U as default};
+"use client";import{jsx as a,jsxs as q}from"react/jsx-runtime";import V,{useEffect as $,useRef as r,useImperativeHandle as z}from"react";import{gsap as c}from"gsap";import{SplitText as T}from"gsap/dist/SplitText";import{ScrollTrigger as h}from"gsap/dist/ScrollTrigger";import{cn as w}from"../../helpers/utils.js";import{Heading as U}from"../../components/index.js";import{withLayout as j}from"../../shared/Styles.js";import{useExposure as C}from"../../hooks/useExposure.js";import{trackUrlRef as F}from"../../shared/trackUrlRef.js";import{useInView as _}from"react-intersection-observer";const x="link",v="title",y=V.forwardRef(({data:m,className:k},b)=>{const{title:u,theme:p,extension:n}=m,o=r(null),t=r(null),e=r(null),i=r(null),{ref:R,inView:f}=_();return z(b,()=>o.current),C(o,{componentType:x,componentName:v,componentTitle:m?.title}),$(()=>{c.registerPlugin(T,h);function H(){if(!t.current)return;const E=t.current?.clientHeight||80;e.current=new T(t.current,{type:"words",wordsClass:"word"});const s=e.current.words;c.set(s,{opacity:0}),i.current=h.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${E*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:L=>{const M=L.progress,d=s.length,D=1/d,g=.5;s.forEach((N,S)=>{const I=S/d*(1-g),P=D*(1+g);let l=(M-I)/P;l=Math.max(0,Math.min(l,1)),c.set(N,{opacity:l})})}})}return f&&H(),()=>{e.current&&e.current.revert(),i.current&&i.current.kill()}},[f]),u&&q("div",{className:"mb-6 flex items-end justify-between",ref:o,children:[a("div",{ref:R,className:w("space-y-4",k,{"aiui-dark":p==="dark"}),children:a(U,{ref:t,as:"h2",size:4,html:u})}),n?.textLink&&a("a",{className:w({"aiui-dark":p==="dark"},"text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:F(n?.link,`${x}_${v}`),children:n?.textLink})]})});y.displayName="Title";var Z=j(y);export{Z as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme } = data\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n    setTimeout(() => {\n      gsapResize()\n    }, 1000)\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
-  "mappings": "aA0DQ,cAAAA,MAAA,oBAzDR,OAAOC,GAAS,UAAAC,MAAc,QAC9B,OAAS,WAAAC,MAAe,cACxB,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAQT,EAAM,WAAuC,CAAC,CAAE,KAAAU,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,EAAWb,EAA2B,IAAI,EAC1Cc,EAAoBd,EAAyB,IAAI,EACvD,OAAAC,EAAQ,IAAM,CACZC,EAAK,eAAeC,EAAWC,CAAa,EAC5C,SAASW,GAAa,CACpB,GAAI,CAACF,EAAS,QAAS,OACvB,MAAMG,EAASH,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAIX,EAAUU,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMI,EAAQH,EAAkB,QAAQ,MACxCZ,EAAK,IAAIe,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bb,EAAc,OAAO,CACnB,QAASS,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWG,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CzB,EAAK,IAAIqB,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CACA,kBAAW,IAAM,CACfZ,EAAW,CACb,EAAG,GAAI,EACA,IAAM,CACXD,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9DV,EAAc,OAAO,EAAE,QAASwB,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHjB,GACEb,EAAC,OAAI,UAAWO,EAAG,sBAAuBK,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACpF,SAAAd,EAACQ,EAAA,CAAQ,IAAKO,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDH,EAAM,YAAc,QAEpB,IAAOqB,EAAQtB,EAAWC,CAAK",
-  "names": ["jsx", "React", "useRef", "useGSAP", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withStyles", "Title", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, theme, extension } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div className=\"mb-6 flex items-end justify-between\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n        </div>\n        {extension?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extension?.link, `${componentType}_${componentName}`)}\n          >\n            {extension?.textLink}\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "aA8EM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBA7EN,OAAOC,GAAS,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QAC9D,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,MAAiB,sBAC1B,OAAS,iBAAAC,MAAqB,0BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BACxB,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,aAAAC,MAAiB,8BAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQf,EAAM,WAAuC,CAAC,CAAE,KAAAgB,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvF,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAU,EAAIL,EAC9BM,EAAWpB,EAAuB,IAAI,EACtCqB,EAAWrB,EAA2B,IAAI,EAC1CsB,EAAoBtB,EAAyB,IAAI,EACjDuB,EAAmBvB,EAA6B,IAAI,EAEpD,CAAE,IAAKwB,EAAW,OAAAC,CAAO,EAAIf,EAAU,EAE7C,OAAAT,EAAoBe,EAAK,IAAMI,EAAS,OAAyB,EAEjEZ,EAAYY,EAAU,CACpB,cAAAT,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDf,EAAU,IAAM,CACdG,EAAK,eAAeC,EAAWC,CAAa,EAC5C,SAASsB,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAInB,EAAUkB,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxCpB,EAAK,IAAI0B,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAUnB,EAAc,OAAO,CAC9C,QAASiB,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1CpC,EAAK,IAAIgC,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,EAGTR,GACEpB,EAAC,OAAI,UAAU,sCAAsC,IAAKuB,EACxD,UAAAxB,EAAC,OAAI,IAAK4B,EAAW,UAAWnB,EAAG,YAAaU,EAAW,CAAE,YAAaG,IAAU,MAAO,CAAC,EAC1F,SAAAtB,EAACU,EAAA,CAAQ,IAAKe,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMJ,EAAO,EACxD,EACCE,GAAW,UACVvB,EAAC,KACC,UAAWS,EACT,CAAE,YAAaa,IAAU,MAAO,EAChC,oGACF,EACA,KAAMT,EAAYU,GAAW,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EAErE,SAAAO,GAAW,SACd,GAEJ,CAGN,CAAC,EAEDN,EAAM,YAAc,QAEpB,IAAO0B,EAAQhC,EAAWM,CAAK",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "useExposure", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "ref", "title", "theme", "extension", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "Title_default"]
 }

package/dist/esm/biz-components/Title/types.d.ts CHANGED Viewed

@@ -19,6 +19,10 @@ export interface TitleProps {
          * 主题色
          */
         theme?: Theme;
+        /**
+         * 扩展数据
+         */
+        extension?: any;
     };
     /**
      * 自定义类名

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

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

package/dist/esm/biz-components/WhyChoose/WhyChoose.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import d,{useImperativeHandle as m,useRef as n}from"react";import{Picture as c,Text as o}from"../../components/index.js";import{cn as h}from"../../helpers/index.js";import{withLayout as w}from"../../shared/Styles.js";import f from"../SwiperBox/index.js";const r=d.forwardRef(({data:s,className:p},a)=>{const t=n(null);return m(a,()=>t.current),e("div",{ref:t,className:h(p),children:e(f,{className:"!overflow-visible [&_.swiper-wrapper]:flex",data:{list:s?.productData\|\|[],configuration:{shape:"card",isTab:!0}},Slide:i,breakpoints:{0:{slidesPerView:1,spaceBetween:12},374:{slidesPerView:1.2,spaceBetween:12},768:{slidesPerView:2.3,spaceBetween:16},1025:{slidesPerView:4,spaceBetween:16},1440:{slidesPerView:4,spaceBetween:16},1920:{slidesPerView:4,spaceBetween:16}},id:""})})});r.displayName="WhyChoose";const i=({data:s})=>l("div",{className:" laptop:p-[24px] laptop:shrink box-border w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]",children:[e(c,{source:s.img.url,className:"w-[36px]"}),l("div",{className:"py-[16px]",children:[e(o,{html:s?.title,className:"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]"}),e("div",{className:"mt-[8px]",children:e(o,{html:s?.desc,className:"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]"})})]})]});i.displayName="WhyChooseItem";var P=w(r);export{i as WhyChooseItem,P as default};
2	+ //# sourceMappingURL=WhyChoose.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/WhyChoose/WhyChoose.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n// import { withStyles } from '../../shared/Styles.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nconst WhyChoose = React.forwardRef<HTMLDivElement, WhyChooseProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <SwiperBox\n        className=\"!overflow-visible [&_.swiper-wrapper]:flex\"\n        data={{\n          list: data?.productData || [],\n          configuration: { shape: 'card', isTab: true },\n        }}\n        Slide={WhyChooseItem}\n        breakpoints={{\n          0: { slidesPerView: 1, spaceBetween: 12 },\n          374: { slidesPerView: 1.2, spaceBetween: 12 },\n          768: { slidesPerView: 2.3, spaceBetween: 16 },\n          1025: { slidesPerView: 4, spaceBetween: 16 },\n          1440: { slidesPerView: 4, spaceBetween: 16 },\n          1920: { slidesPerView: 4, spaceBetween: 16 },\n        }}\n        id={''}\n      />\n    </div>\n  )\n})\n\nWhyChoose.displayName = 'WhyChoose'\n\nconst WhyChooseItem = ({ data }: { data: ItemType }) => {\n  return (\n    <div className=\" laptop:p-[24px] laptop:shrink box-border w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]\">\n      <Picture source={data.img.url} className=\"w-[36px]\" />\n      <div className=\"py-[16px]\">\n        <Text\n          html={data?.title}\n          className=\"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]\"\n        />\n        <div className=\"mt-[8px]\">\n          <Text\n            html={data?.desc}\n            className=\"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nWhyChooseItem.displayName = 'WhyChooseItem'\n\nexport default withLayout(WhyChoose)\nexport { WhyChooseItem }\n"],
+  "mappings": "aAeM,cAAAA,EA2BA,QAAAC,MA3BA,oBAdN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QAEnD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBAEtB,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC/F,MAAMC,EAAWV,EAAuB,IAAI,EAC5C,OAAAD,EAAoBU,EAAK,IAAMC,EAAS,OAAQ,EAG9Cd,EAAC,OAAI,IAAKc,EAAU,UAAWP,EAAGK,CAAS,EACzC,SAAAZ,EAACS,EAAA,CACC,UAAU,6CACV,KAAM,CACJ,KAAME,GAAM,aAAe,CAAC,EAC5B,cAAe,CAAE,MAAO,OAAQ,MAAO,EAAK,CAC9C,EACA,MAAOI,EACP,YAAa,CACX,EAAG,CAAE,cAAe,EAAG,aAAc,EAAG,EACxC,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,CAC7C,EACA,GAAI,GACN,EACF,CAEJ,CAAC,EAEDL,EAAU,YAAc,YAExB,MAAMK,EAAgB,CAAC,CAAE,KAAAJ,CAAK,IAE1BV,EAAC,OAAI,UAAU,iGACb,UAAAD,EAACK,EAAA,CAAQ,OAAQM,EAAK,IAAI,IAAK,UAAU,WAAW,EACpDV,EAAC,OAAI,UAAU,YACb,UAAAD,EAACM,EAAA,CACC,KAAMK,GAAM,MACZ,UAAU,iFACZ,EACAX,EAAC,OAAI,UAAU,WACb,SAAAA,EAACM,EAAA,CACC,KAAMK,GAAM,KACZ,UAAU,iFACZ,EACF,GACF,GACF,EAIJI,EAAc,YAAc,gBAE5B,IAAOC,EAAQR,EAAWE,CAAS",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withLayout", "SwiperBox", "WhyChoose", "data", "className", "ref", "innerRef", "WhyChooseItem", "WhyChoose_default"]
+}

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

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

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

	@@ -0,0 +1,2 @@
1	+ import{default as r}from"./WhyChoose.js";import{WhyChooseItem as f}from"./WhyChoose.js";export{f as WhyChooseItem,r as default};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/WhyChoose/index.ts"],
+  "sourcesContent": ["export { default } from './WhyChoose.js'\nexport { WhyChooseItem } from './WhyChoose.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,iBACxB,OAAS,iBAAAC,MAAqB",
+  "names": ["default", "WhyChooseItem"]
+}

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

@@ -0,0 +1,12 @@
+import type { Media } from '../../types/props';
+export interface WhyChooseItem {
+    title: string;
+    desc: string;
+    img: Media;
+}
+export interface WhyChooseProps {
+    data: {
+        productData: WhyChooseItem[];
+    };
+    className?: string;
+}

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

	@@ -0,0 +1 @@
1	+ //# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -13,9 +13,13 @@ export { default as MediaPlayerBase } from './MediaPlayerBase/index.js';
 export { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js';
 export { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js';
 export { default as Marquee } from './Marquee/index.js';
+export { default as WhyChoose } from './WhyChoose/index.js';
+export { default as Faq } from './Faq/index.js';
 export { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js';
 export { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js';
 export type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js';
 export { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js';
 export type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js';
+export { withLayout } from '../shared/Styles.js';
 export { default as AiuiProvider } from './AiuiProvider/index.js';
+export { default as Tabs } from './Tabs/index.js';