npm - @anker-in/headless-ui - Versions diffs - 1.2.3-alpha.1778583232121 → 1.2.4 - Mend

@anker-in/headless-ui 1.2.3-alpha.1778583232121 → 1.2.4

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GiftTierShelf/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Container, Heading } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { GiftTierShelfProps, GiftTierItem, Media } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport * as SwiperModules from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useProductListTrack } from '../../hooks/useProductListTrack.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { Product, ProductVariant } from '../Listing/types/product.js'\nimport { formatPrice } from '../Listing/utils/index.js'\n\nconst componentType = 'image'\nconst componentName = 'gift_tier_shelf'\n/**\n * Card style variants\n */\nconst cardVariants = cva(\n  'lg-desktop:h-[400px] rounded-card desktop:pt-4 desktop:pb-6 relative flex h-[320px] flex-col items-start gap-1 overflow-hidden p-4',\n  {\n    variants: {\n      theme: {\n        light: 'bg-gradient-to-b from-[#FCCA7B] to-[#FFE6BF]',\n        dark: 'bg-gradient-to-b from-[#3A3A3A] to-[#1D1D1F]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * Text color variants\n */\nconst textVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * Member Tag Component\n */\nconst MemberTag = React.memo(({ image }: { image?: Media }) => {\n  if (!image) return null\n\n  return (\n    <Picture\n      source={image.url}\n      alt={image.alt || 'Member Tag'}\n      className=\"h-full w-auto\"\n      imgClassName=\"h-full w-auto object-contain\"\n    />\n  )\n})\n\nMemberTag.displayName = 'MemberTag'\n\n/**\n * Timeline Item Component - \u5355\u4E2A\u65F6\u95F4\u8F74\u8282\u70B9\n */\nconst TimelineItem = React.memo(({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {\n  const trackColor = theme === 'light' ? 'bg-[#f6cd4e]' : 'bg-[#F5F6F7]'\n\n  return (\n    <div className=\"flex h-4 w-full items-center\">\n      <div className={cn('flex h-1 w-full items-center justify-center', trackColor)}>\n        {/* Handle */}\n        <div className={cn('relative size-4 shrink-0 rounded-full', trackColor)}></div>\n      </div>\n    </div>\n  )\n})\n\nTimelineItem.displayName = 'TimelineItem'\n\n/**\n * Gift Tier Card Component\n */\nconst GiftTierCard = React.memo(\n  ({\n    item,\n    theme = 'light',\n    className,\n    onClick,\n    buildData,\n  }: {\n    item: GiftTierItem\n    theme?: 'light' | 'dark'\n    className?: string\n    onClick?: () => void\n    buildData?: {\n      products: Product[]\n    }\n  }) => {\n    const { locale = 'us' } = useAiuiContext()\n    // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u4EA7\u54C1\u7684\u7B80\u5316\u6570\u636E\n    const product = item.products?.[0]\n\n    const fullProduct = React.useMemo(() => {\n      if (!product?.handle || !buildData?.products?.length) return null\n      return buildData.products.find(p => p.handle === product.handle) || null\n    }, [product?.handle, buildData?.products])\n\n    const fullProductVariant = React.useMemo(\n      () => fullProduct?.variants?.find(variant => variant?.sku === product?.sku) || ({} as ProductVariant),\n      [product?.sku, fullProduct?.variants]\n    )\n\n    const price = formatPrice({\n      locale: locale || 'us',\n      amount: product?.custom_price ?? fullProductVariant?.price?.amount,\n      currencyCode: fullProduct?.price?.currencyCode || 'USD',\n    })\n\n    return (\n      <div\n        className={cn(cardVariants({ theme }), className)}\n        onClick={onClick}\n        data-ui-component-id=\"GiftTierCard\"\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-sku={product?.sku || ''}\n      >\n        {/* Member Tag */}\n        <div className=\"lg-desktop:h-[28px] z-10 h-6\">\n          {item.showMemberTag && item.memberTagImage && <MemberTag image={item.memberTagImage} />}\n        </div>\n\n        {/* Product Image */}\n        <div className=\"relative z-10 mx-auto min-h-0 w-fit flex-1\">\n          <Picture\n            source={fullProductVariant?.image?.url || fullProduct?.images[0]?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-contain\"\n          />\n        </div>\n\n        {/* Product Info */}\n        <div className={cn('z-10 flex w-full shrink-0 flex-col gap-2', textVariants({ theme }))}>\n          {/* Price */}\n          <div className=\"flex items-end gap-1\">\n            <Heading html={price} size={4} className=\"font-bold leading-[1.2] tracking-[-0.04em]\" />\n            {item.valueUnit && (\n              <Text\n                html={item.valueUnit}\n                className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]\"\n              />\n            )}\n          </div>\n\n          {/* Product Name */}\n          <Text\n            html={fullProductVariant?.title || fullProduct?.title}\n            className=\"lg-desktop:text-2xl line-clamp-2 min-h-[48px] text-wrap text-xl font-bold leading-[1.2] tracking-[-0.04em]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nGiftTierCard.displayName = 'GiftTierCard'\n\n/**\n * GiftTierShelf - \u6EE1\u8D60\u8D27\u67B6\u7EC4\u4EF6\n *\n * @description \u9636\u68AF\u5F0F\u6EE1\u8D60\u6D3B\u52A8\u5C55\u793A\uFF0C\u652F\u6301\u591A\u4E2A\u6863\u4F4D\u7684\u4EA7\u54C1\u5C55\u793A\u548C\u65F6\u95F4\u8F74\n */\nconst GiftTierShelf = React.forwardRef<HTMLDivElement, GiftTierShelfProps>(\n  ({ classNames = {}, data, onCardClick, buildData, ...rest }, ref) => {\n    const innerRef = React.useRef<HTMLDivElement>(null)\n\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u7EC4\u4EF6\u66DD\u5149\u57CB\u70B9\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: data.items?.[0]?.threshold || '',\n      componentDescription: '',\n    })\n    const theme = data.theme || 'light'\n    const showTimeline = data.showTimeline !== false\n\n    // Swiper \u5B9E\u4F8B\u72B6\u6001\uFF0C\u7528\u4E8E\u8054\u52A8\u63A7\u5236\n    const [cardSwiper, setCardSwiper] = React.useState<SwiperType | null>(null)\n    const [timelineSwiper, setTimelineSwiper] = React.useState<SwiperType | null>(null)\n\n    // \u8FC7\u6EE4\u51FA\u53EF\u552E\u4EA7\u54C1\uFF0C\u786E\u4FDD\u5361\u7247\u4E0E Timeline \u540C\u6B65\n    const availableItems = React.useMemo(() => {\n      if (!buildData?.products?.length) return data.items\n\n      return data.items.filter(item => {\n        const product = item.products?.[0]\n        if (!product?.handle) return true // \u6CA1\u6709\u5173\u8054\u4EA7\u54C1\u65F6\u9ED8\u8BA4\u663E\u793A\n\n        const fullProduct = buildData.products.find(p => p.handle === product.handle)\n        const variant = fullProduct?.variants?.find(v => v?.sku === product?.sku)\n\n        return variant?.availableForSale !== false\n      })\n    }, [data.items, buildData?.products])\n\n    // \u4EA7\u54C1\u5217\u8868\u9732\u51FA + \u9009\u62E9\u57CB\u70B9\n    const { trackSelectItem } = useProductListTrack({\n      containerRef: innerRef,\n      listName: componentName,\n      items: availableItems.map(item => item.products?.[0]).filter(Boolean),\n      products: buildData?.products,\n    })\n\n    // Card Swiper breakpoints\n    const cardSwiperBreakpoints = React.useMemo(() => {\n      const itemCount = availableItems.length\n      return {\n        0: { slidesPerView: 1.2, spaceBetween: 12 },\n        768: { slidesPerView: Math.min(itemCount, 2.5), spaceBetween: 12 },\n        1025: { slidesPerView: Math.min(itemCount, 3.5), spaceBetween: 16 },\n        1440: { slidesPerView: Math.min(itemCount, 4), spaceBetween: 16 },\n      }\n    }, [availableItems.length])\n\n    // Timeline Swiper breakpoints (spaceBetween \u4E3A 0)\n    const timelineSwiperBreakpoints = React.useMemo(() => {\n      const itemCount = availableItems.length\n      return {\n        0: { slidesPerView: 1.2, spaceBetween: 0 },\n        768: { slidesPerView: Math.min(itemCount, 2.5), spaceBetween: 0 },\n        1025: { slidesPerView: Math.min(itemCount, 3.5), spaceBetween: 0 },\n        1440: { slidesPerView: Math.min(itemCount, 4), spaceBetween: 0 },\n      }\n    }, [availableItems.length])\n\n    const swiperModules = React.useMemo(() => (SwiperModules.Controller ? [SwiperModules.Controller] : []), [])\n\n    return (\n      <Container\n        ref={innerRef}\n        className={cn(classNames?.root)}\n        childClassName=\"overflow-hidden\"\n        data-ui-component-id=\"GiftTierShelf\"\n        {...rest}\n      >\n        {/* Cards Swiper */}\n        <Swiper\n          modules={swiperModules}\n          breakpoints={cardSwiperBreakpoints}\n          className=\"w-full !overflow-visible\"\n          onSwiper={setCardSwiper}\n          controller={{ control: timelineSwiper }}\n        >\n          {availableItems.map((item, index) => (\n            <SwiperSlide key={'giftTierItem' + index}>\n              <GiftTierCard\n                item={item}\n                theme={theme}\n                buildData={buildData}\n                className={classNames?.card}\n                onClick={() => {\n                  const product = item.products?.[0]\n                  if (product) trackSelectItem(product, index)\n                  onCardClick?.(item, index)\n                }}\n              />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n\n        {/* Timeline */}\n        {showTimeline && (\n          <div className=\"mt-4 flex flex-col gap-4\">\n            {/* Timeline Swiper */}\n            <div className={cn('w-full', classNames?.timeline)}>\n              <Swiper\n                modules={swiperModules}\n                breakpoints={timelineSwiperBreakpoints}\n                className=\"w-full !overflow-visible\"\n                onSwiper={setTimelineSwiper}\n                controller={{ control: cardSwiper }}\n              >\n                {availableItems.map((item, index) => (\n                  <SwiperSlide key={'timelineItem' + index}>\n                    <div className=\"flex flex-col items-center\">\n                      <TimelineItem theme={theme} />\n                      <Text\n                        html={item.threshold}\n                        className={cn(\n                          'lg-desktop:text-2xl text-center text-xl font-bold leading-[1.2] tracking-[-0.04em]',\n                          textVariants({ theme }),\n                          classNames?.thresholdText\n                        )}\n                      />\n                    </div>\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </Container>\n    )\n  }\n)\n\nGiftTierShelf.displayName = 'GiftTierShelf'\n\nexport default withLayout(GiftTierShelf)\nexport type { GiftTierShelfProps, GiftTierShelfData, GiftTierItem, GiftTierProduct } from './types.js'\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Container", "Heading", "cva", "Swiper", "SwiperSlide", "SwiperModules", "withLayout", "useExposure", "useProductListTrack", "useAiuiContext", "formatPrice", "componentType", "componentName", "cardVariants", "textVariants", "MemberTag", "image", "TimelineItem", "theme", "trackColor", "GiftTierCard", "item", "className", "onClick", "buildData", "locale", "product", "fullProduct", "p", "fullProductVariant", "variant", "price", "GiftTierShelf", "classNames", "data", "onCardClick", "rest", "ref", "innerRef", "showTimeline", "cardSwiper", "setCardSwiper", "timelineSwiper", "setTimelineSwiper", "availableItems", "v", "trackSelectItem", "cardSwiperBreakpoints", "itemCount", "timelineSwiperBreakpoints", "swiperModules", "index", "GiftTierShelf_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Container, Heading } from '../../components/index.js'\nimport { cva } from 'class-variance-authority'\nimport type { GiftTierShelfProps, GiftTierItem, Media } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport * as SwiperModules from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { Product, ProductVariant } from '../Listing/types/product.js'\nimport { formatPrice } from '../Listing/utils/index.js'\n\n/**\n * Card style variants\n */\nconst cardVariants = cva(\n  'lg-desktop:h-[400px] rounded-card desktop:pt-4 desktop:pb-6 relative flex h-[320px] flex-col items-start gap-1 overflow-hidden p-4',\n  {\n    variants: {\n      theme: {\n        light: 'bg-gradient-to-b from-[#FCCA7B] to-[#FFE6BF]',\n        dark: 'bg-gradient-to-b from-[#3A3A3A] to-[#1D1D1F]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\n/**\n * Text color variants\n */\nconst textVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-white',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * Member Tag Component\n */\nconst MemberTag = React.memo(({ image }: { image?: Media }) => {\n  if (!image) return null\n\n  return (\n    <Picture\n      source={image.url}\n      alt={image.alt || 'Member Tag'}\n      className=\"h-full w-auto\"\n      imgClassName=\"h-full w-auto object-contain\"\n    />\n  )\n})\n\nMemberTag.displayName = 'MemberTag'\n\n/**\n * Timeline Item Component - \u5355\u4E2A\u65F6\u95F4\u8F74\u8282\u70B9\n */\nconst TimelineItem = React.memo(({ theme = 'light' }: { theme?: 'light' | 'dark' }) => {\n  const trackColor = theme === 'light' ? 'bg-[#f6cd4e]' : 'bg-[#F5F6F7]'\n\n  return (\n    <div className=\"flex h-4 w-full items-center\">\n      <div className={cn('flex h-1 w-full items-center justify-center', trackColor)}>\n        {/* Handle */}\n        <div className={cn('relative size-4 shrink-0 rounded-full', trackColor)}></div>\n      </div>\n    </div>\n  )\n})\n\nTimelineItem.displayName = 'TimelineItem'\n\n/**\n * Gift Tier Card Component\n */\nconst GiftTierCard = React.memo(\n  ({\n    item,\n    theme = 'light',\n    className,\n    onClick,\n    buildData,\n  }: {\n    item: GiftTierItem\n    theme?: 'light' | 'dark'\n    className?: string\n    onClick?: () => void\n    buildData?: {\n      products: Product[]\n    }\n  }) => {\n    const { locale = 'us' } = useAiuiContext()\n    // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u4EA7\u54C1\u7684\u7B80\u5316\u6570\u636E\n    const product = item.products?.[0]\n\n    const fullProduct = React.useMemo(() => {\n      if (!product?.handle || !buildData?.products?.length) return null\n      return buildData.products.find(p => p.handle === product.handle) || null\n    }, [product?.handle, buildData?.products])\n\n    const fullProductVariant = React.useMemo(\n      () => fullProduct?.variants?.find(variant => variant?.sku === product?.sku) || ({} as ProductVariant),\n      [product?.sku, fullProduct?.variants]\n    )\n\n    const price = formatPrice({\n      locale: locale || 'us',\n      amount: product?.custom_price ?? fullProductVariant?.price?.amount,\n      currencyCode: fullProduct?.price?.currencyCode || 'USD',\n    })\n\n    return (\n      <div className={cn(cardVariants({ theme }), className)} onClick={onClick} data-ui-component-id=\"GiftTierCard\">\n        {/* Member Tag */}\n        <div className=\"lg-desktop:h-[28px] z-10 h-6\">\n          {item.showMemberTag && item.memberTagImage && <MemberTag image={item.memberTagImage} />}\n        </div>\n\n        {/* Product Image */}\n        <div className=\"relative z-10 mx-auto min-h-0 w-fit flex-1\">\n          <Picture\n            source={fullProductVariant?.image?.url || fullProduct?.images[0]?.url}\n            className=\"size-full\"\n            imgClassName=\"size-full object-contain\"\n          />\n        </div>\n\n        {/* Product Info */}\n        <div className={cn('z-10 flex w-full shrink-0 flex-col gap-2', textVariants({ theme }))}>\n          {/* Price */}\n          <div className=\"flex items-end gap-1\">\n            <Heading html={price} size={4} className=\"font-bold leading-[1.2] tracking-[-0.04em]\" />\n            {item.valueUnit && (\n              <Text\n                html={item.valueUnit}\n                className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]\"\n              />\n            )}\n          </div>\n\n          {/* Product Name */}\n          <Text\n            html={fullProductVariant?.title || fullProduct?.title}\n            className=\"lg-desktop:text-2xl line-clamp-2 min-h-[48px] text-wrap text-xl font-bold leading-[1.2] tracking-[-0.04em]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nGiftTierCard.displayName = 'GiftTierCard'\n\n/**\n * GiftTierShelf - \u6EE1\u8D60\u8D27\u67B6\u7EC4\u4EF6\n *\n * @description \u9636\u68AF\u5F0F\u6EE1\u8D60\u6D3B\u52A8\u5C55\u793A\uFF0C\u652F\u6301\u591A\u4E2A\u6863\u4F4D\u7684\u4EA7\u54C1\u5C55\u793A\u548C\u65F6\u95F4\u8F74\n */\nconst GiftTierShelf = React.forwardRef<HTMLDivElement, GiftTierShelfProps>(\n  ({ classNames = {}, data, onCardClick, buildData, ...rest }, ref) => {\n    const theme = data.theme || 'light'\n    const showTimeline = data.showTimeline !== false\n\n    // Swiper \u5B9E\u4F8B\u72B6\u6001\uFF0C\u7528\u4E8E\u8054\u52A8\u63A7\u5236\n    const [cardSwiper, setCardSwiper] = React.useState<SwiperType | null>(null)\n    const [timelineSwiper, setTimelineSwiper] = React.useState<SwiperType | null>(null)\n\n    // \u8FC7\u6EE4\u51FA\u53EF\u552E\u4EA7\u54C1\uFF0C\u786E\u4FDD\u5361\u7247\u4E0E Timeline \u540C\u6B65\n    const availableItems = React.useMemo(() => {\n      if (!buildData?.products?.length) return data.items\n\n      return data.items.filter(item => {\n        const product = item.products?.[0]\n        if (!product?.handle) return true // \u6CA1\u6709\u5173\u8054\u4EA7\u54C1\u65F6\u9ED8\u8BA4\u663E\u793A\n\n        const fullProduct = buildData.products.find(p => p.handle === product.handle)\n        const variant = fullProduct?.variants?.find(v => v?.sku === product?.sku)\n\n        return variant?.availableForSale !== false\n      })\n    }, [data.items, buildData?.products])\n\n    // Card Swiper breakpoints\n    const cardSwiperBreakpoints = React.useMemo(() => {\n      const itemCount = availableItems.length\n      return {\n        0: { slidesPerView: 1.2, spaceBetween: 12 },\n        768: { slidesPerView: Math.min(itemCount, 2.5), spaceBetween: 12 },\n        1025: { slidesPerView: Math.min(itemCount, 3.5), spaceBetween: 16 },\n        1440: { slidesPerView: Math.min(itemCount, 4), spaceBetween: 16 },\n      }\n    }, [availableItems.length])\n\n    // Timeline Swiper breakpoints (spaceBetween \u4E3A 0)\n    const timelineSwiperBreakpoints = React.useMemo(() => {\n      const itemCount = availableItems.length\n      return {\n        0: { slidesPerView: 1.2, spaceBetween: 0 },\n        768: { slidesPerView: Math.min(itemCount, 2.5), spaceBetween: 0 },\n        1025: { slidesPerView: Math.min(itemCount, 3.5), spaceBetween: 0 },\n        1440: { slidesPerView: Math.min(itemCount, 4), spaceBetween: 0 },\n      }\n    }, [availableItems.length])\n\n    const swiperModules = React.useMemo(() => (SwiperModules.Controller ? [SwiperModules.Controller] : []), [])\n\n    return (\n      <Container\n        ref={ref}\n        className={cn(classNames?.root)}\n        childClassName=\"overflow-hidden\"\n        data-ui-component-id=\"GiftTierShelf\"\n        {...rest}\n      >\n        {/* Cards Swiper */}\n        <Swiper\n          modules={swiperModules}\n          breakpoints={cardSwiperBreakpoints}\n          className=\"w-full !overflow-visible\"\n          onSwiper={setCardSwiper}\n          controller={{ control: timelineSwiper }}\n        >\n          {availableItems.map((item, index) => (\n            <SwiperSlide key={'giftTierItem' + index}>\n              <GiftTierCard\n                item={item}\n                theme={theme}\n                buildData={buildData}\n                className={classNames?.card}\n                onClick={() => onCardClick?.(item, index)}\n              />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n\n        {/* Timeline */}\n        {showTimeline && (\n          <div className=\"mt-4 flex flex-col gap-4\">\n            {/* Timeline Swiper */}\n            <div className={cn('w-full', classNames?.timeline)}>\n              <Swiper\n                modules={swiperModules}\n                breakpoints={timelineSwiperBreakpoints}\n                className=\"w-full !overflow-visible\"\n                onSwiper={setTimelineSwiper}\n                controller={{ control: cardSwiper }}\n              >\n                {availableItems.map((item, index) => (\n                  <SwiperSlide key={'timelineItem' + index}>\n                    <div className=\"flex flex-col items-center\">\n                      <TimelineItem theme={theme} />\n                      <Text\n                        html={item.threshold}\n                        className={cn(\n                          'lg-desktop:text-2xl text-center text-xl font-bold leading-[1.2] tracking-[-0.04em]',\n                          textVariants({ theme }),\n                          classNames?.thresholdText\n                        )}\n                      />\n                    </div>\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </Container>\n    )\n  }\n)\n\nGiftTierShelf.displayName = 'GiftTierShelf'\n\nexport default withLayout(GiftTierShelf)\nexport type { GiftTierShelfProps, GiftTierShelfData, GiftTierItem, GiftTierProduct } from './types.js'\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Container", "Heading", "cva", "Swiper", "SwiperSlide", "SwiperModules", "withLayout", "useAiuiContext", "formatPrice", "cardVariants", "textVariants", "MemberTag", "image", "TimelineItem", "theme", "trackColor", "GiftTierCard", "item", "className", "onClick", "buildData", "locale", "product", "fullProduct", "p", "fullProductVariant", "variant", "price", "GiftTierShelf", "classNames", "data", "onCardClick", "rest", "ref", "showTimeline", "cardSwiper", "setCardSwiper", "timelineSwiper", "setTimelineSwiper", "availableItems", "cardSwiperBreakpoints", "itemCount", "timelineSwiperBreakpoints", "swiperModules", "index", "GiftTierShelf_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as U}from"react-responsive";import z,{useImperativeHandle as H,useRef as k,useState as c}from"react";import{createPortal as E}from"react-dom";import{cn as b,getLocalizedPath as R}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import _ from"../SwiperBox/index.js";import{Button as Y,Heading as A,Picture as x,Text as q}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";const d="image",u="graphic",I=e=>{let s="";const l=o=>(o?.url&&(s=o.url),s),i=l(e.lgDesktop),a=l(e.desktop),p=l(e.laptop),h=l(e.tablet),m=e.default?.url;return[`${i} 9999`,`${a} 1919`,`${p} 1439`,`${h} 1024`,`${m} 768`].join(", ")},M="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",J=({data:e,configuration:s})=>{const l=k(null),[i,a]=c({visible:!1,x:0,y:0,text:""}),p=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},h=o=>{e?.description&&a({visible:!0,x:o.clientX,y:o.clientY,text:e.description})},m=()=>{a(o=>({...o,visible:!1}))};return y(l,{componentType:d,componentName:u,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),t("div",{ref:l,className:b(p(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:b("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:n("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?n("a",{"aria-label":e?.title||e?.description,href:T(e?.href||"",`${d}_${u}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${d}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[t(x,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?I(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(x,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?I(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),n("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:b("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(q,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&n("div",{onMouseMove:h,onMouseLeave:m,children:[e?.title?t(A,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${M} graphic-description`}):t("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${M} graphic-description-item`}),typeof window<"u"&&i.visible&&E(t("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${i.x+16}px`,top:`${i.y+16}px`},children:i.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:t(x,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(Y,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:T(R(e?.href||"",s?.locale||"us"),`${d}_${u}`),"data-headless-nav-position":`''#${s?.index+1}`,"data-headless-type-name":`${d}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=z.forwardRef(({data:e,className:s,...l},i)=>{const a=U({query:"(max-width: 768px)"}),p=k(null),[h,m]=c(!1),[o,$]=c(""),[C,V]=c(""),[S,P]=c(""),[G,v]=c(null),[D,w]=c(!1),{locale:L="us"}=F(),f=g=>{const r=e?.items?.length>3,B=e?.items?.length>2;switch(g){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return e?.items?.length===1?1:r||B?2.3:2;default:return e?.items?.length===1?1:1.2}};return H(i,()=>p.current),y(p,{componentType:d,componentName:u,componentTitle:e?.title}),n("div",{...l,ref:p,className:b("graphicBlock",s),children:[n("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title}}),t(_,{id:"Graphic",className:b("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:L,onVideoPlayBtnClick:(g,r)=>{m(!0),r?.isYouTube?V?.(r?.youtubeId||""):($?.(r?.video?.url||""),P?.(r?.mobileVideo?.url||""))},onIconClick:g=>{w(!0),v(g)},title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),t(X,{visible:h,youTubeId:C,onCloseModal:()=>m(!1),videoUrl:a&&S||o}),t(Z,{textVisible:D,extension:G?.extension,onCloseModal:()=>{w(!1),v(null)}})]})});N.displayName="Graphic";var me=j(N);export{me as default};
+"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as U}from"react-responsive";import z,{useImperativeHandle as E,useRef as I,useState as a}from"react";import{createPortal as H}from"react-dom";import{cn as f,getLocalizedPath as R}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import _ from"../SwiperBox/index.js";import{Button as Y,Heading as A,Picture as w,Text as q}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as M}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";const m="image",u="graphic",N=e=>{let o="";const l=c=>(c?.url&&(o=c.url),o),i=l(e.lgDesktop),d=l(e.desktop),p=l(e.laptop),b=l(e.tablet),h=e.default?.url;return[`${i} 9999`,`${d} 1919`,`${p} 1439`,`${b} 1024`,`${h} 768`].join(", ")},$="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",J=({data:e,configuration:o})=>{const l=I(null),[i,d]=a({visible:!1,x:0,y:0,text:""}),p=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},b=s=>{e?.description&&d({visible:!0,x:s.clientX,y:s.clientY,text:e.description})},h=()=>{d(s=>({...s,visible:!1}))};M(l,{componentType:m,componentName:u,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const c=e?.href?"a":"div",v=e?.href?{href:k(e.href,`${m}_${u}`)}:{};return t("div",{ref:l,className:f(p(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:f("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:n("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?n("a",{"aria-label":e?.title||e?.description,href:k(e?.href||"",`${m}_${u}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[t(w,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?N(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(w,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?N(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),n(c,{...v,className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:f("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(q,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&n("div",{onMouseMove:b,onMouseLeave:h,children:[e?.title?t(A,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${$} graphic-description`}):t("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${$} graphic-description-item`}),typeof window<"u"&&i.visible&&H(t("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${i.x+16}px`,top:`${i.y+16}px`},children:i.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:s=>{s.preventDefault(),s.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:s=>{s.preventDefault(),s.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:t(w,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(Y,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:k(R(e?.href||"",o?.locale||"us"),`${m}_${u}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},C=z.forwardRef(({data:e,className:o,...l},i)=>{const d=U({query:"(max-width: 768px)"}),p=I(null),[b,h]=a(!1),[c,v]=a(""),[s,V]=a(""),[P,S]=a(""),[G,y]=a(null),[D,T]=a(!1),{locale:L="us"}=F(),g=x=>{const r=e?.items?.length>3,B=e?.items?.length>2;switch(x){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return e?.items?.length===1?1:r||B?2.3:2;default:return e?.items?.length===1?1:1.2}};return E(i,()=>p.current),M(p,{componentType:m,componentName:u,componentTitle:e?.title}),n("div",{...l,ref:p,className:f("graphicBlock",o),children:[n("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title}}),t(_,{id:"Graphic",className:f("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:L,onVideoPlayBtnClick:(x,r)=>{h(!0),r?.isYouTube?V?.(r?.youtubeId||""):(v?.(r?.video?.url||""),S?.(r?.mobileVideo?.url||""))},onIconClick:x=>{T(!0),y(x)},title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:g()},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:g(1440)}}})]}),t(X,{visible:b,youTubeId:s,onCloseModal:()=>h(!1),videoUrl:d&&P||c}),t(Z,{textVisible:D,extension:G?.extension,onCloseModal:()=>{T(!1),y(null)}})]})});C.displayName="Graphic";var me=j(C);export{me as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  backgroundImage?: {\n    default?: Img\n    tablet?: Img\n    laptop?: Img\n    desktop?: Img\n    lgDesktop?: Img\n  }\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n *   lgDesktop \u2192 1919px  (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n *   desktop  \u2192 1439px  (1440px - 1919px)\n *   laptop   \u2192 1024px  (1025px - 1439px)\n *   tablet   \u2192 767px   (768px - 1024px)\n *   default  \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n  // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n  let last = ''\n  const resolve = (img?: Img) => {\n    if (img?.url) last = img.url\n    return last\n  }\n  const lgDesktopSrc = resolve(bg.lgDesktop)\n  const desktopSrc = resolve(bg.desktop)\n  const laptopSrc = resolve(bg.laptop)\n  const tabletSrc = resolve(bg.tablet)\n  // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n  const defaultSrc = bg.default?.url\n  return [\n    `${lgDesktopSrc} 9999`, // \u22641920px\n    `${desktopSrc} 1919`, // 1440-1919px\n    `${laptopSrc} 1439`, // 1025-1439px\n    `${tabletSrc} 1024`, // 768-1024px\n    `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n  ].join(', ')\n}\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title || data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"rounded-card block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n              <span className=\"sr-only\">{data?.title || data?.description}</span>\n            </a>\n          ) : (\n            <div className=\"rounded-card block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={\n                  data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n                }\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title || data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  backgroundImage?: {\n    default?: Img\n    tablet?: Img\n    laptop?: Img\n    desktop?: Img\n    lgDesktop?: Img\n  }\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n *   lgDesktop \u2192 1919px  (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n *   desktop  \u2192 1439px  (1440px - 1919px)\n *   laptop   \u2192 1024px  (1025px - 1439px)\n *   tablet   \u2192 767px   (768px - 1024px)\n *   default  \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n  // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n  let last = ''\n  const resolve = (img?: Img) => {\n    if (img?.url) last = img.url\n    return last\n  }\n  const lgDesktopSrc = resolve(bg.lgDesktop)\n  const desktopSrc = resolve(bg.desktop)\n  const laptopSrc = resolve(bg.laptop)\n  const tabletSrc = resolve(bg.tablet)\n  // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n  const defaultSrc = bg.default?.url\n  return [\n    `${lgDesktopSrc} 9999`, // \u22641920px\n    `${desktopSrc} 1919`, // 1440-1919px\n    `${laptopSrc} 1439`, // 1025-1439px\n    `${tabletSrc} 1024`, // 768-1024px\n    `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n  ].join(', ')\n}\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  const Container: React.ElementType = data?.href ? 'a' : 'div'\n  const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title || data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"rounded-card block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n              <span className=\"sr-only\">{data?.title || data?.description}</span>\n            </a>\n          ) : (\n            <div className=\"rounded-card block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={\n                  data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n                }\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n            </div>\n          )}\n          <Container\n            {...containerProps}\n            className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\"\n          >\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title || data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </Container>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as m}from"react/jsx-runtime";import S,{useState as $,useEffect as _,useRef as H}from"react";import{useMediaQuery as U}from"react-responsive";import{withLayout as D}from"../../shared/Styles.js";import I from"../../components/picture.js";import L from"../../components/button.js";import{Heading as C}from"../../components/heading.js";import{VideoModal as R}from"../VideoModal/index.js";import{cn as w,getLocalizedPath as T}from"../../helpers/utils.js";import E from"../SwiperBox/index.js";import{isVideo as z}from"../../shared/mimeType.js";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";import{useAiuiContext as G}from"../AiuiProvider/index.js";const n="image",d="p1_banner",Q=({data:u,configuration:t,jIndex:h})=>{const[N,B]=$(!1),k=U({query:"(max-width: 768px)"}),{trackingData:s}=G(),v=H(null),y=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};A(v,{componentType:n,componentName:d,position:h,componentTitle:u.title,componentDescription:u.description,navigation:t?.activeTab}),_(()=>{B(k)},[k]);const{theme:M="light",title:o,description:l,imageUrl:a,primaryButton:r,secondaryButton:b,imageMobileUrl:f,blockLink:c,video:p,youtubeId:i,isYouTube:g}=u,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return m("div",{className:w("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",y(),{"rounded-2xl":t?.shape==="rounded","aiui-dark":M==="dark","h-[400px]":N},"text-info-primary"),ref:v,children:[c&&e("a",{className:"absolute inset-0 z-10",href:P(T(c||"",t?.locale||"us"),`${s?.contextHandle||""}_${n}_${d}`),"data-headless-type-name":`${n}#${d}`,"data-headless-title-desc-button":`${o}#${l}`,"data-headless-nav-position":`${t?.activeTab}#${h}`,"aria-hidden":"true",tabIndex:-1}),m("div",{className:"absolute inset-0",children:[z(a?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:a?.url,type:"video/mp4"})}):e(I,{source:a?.url,alt:a?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),z(f?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:f?.url,type:"video/mp4"})}):e(I,{source:f?.url||a?.url,alt:f?.alt||a?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),m("div",{className:w("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":u?.width==="full"}),children:[m("div",{className:"flex flex-col gap-1",children:[e(C,{size:3,as:"h3",className:"item-title",html:o}),e(C,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:l})]}),m("div",{className:"lg-desktop:gap-3 flex gap-2",children:[b&&b.text&&m(L,{"aria-label":o??l,className:w(x,"link-left"),variant:"secondary",as:"a",href:P(T(b.link||"",t?.locale||"us"),`${s?.contextHandle||""}_${n}_${d}`),"data-headless-type-name":`${n}#${d}`,"data-headless-title-desc-button":`${o}#${l}#${b?.text}`,"data-headless-nav-position":`${t?.activeTab}#${h}`,children:[b.text,e("span",{className:"sr-only",children:o??l})]}),r&&r.text&&e(L,{"aria-label":o??l,className:w(x,"link-right"),variant:"primary",as:"a",href:P(T(r.link||"",t?.locale||"us"),`${s?.contextHandle||""}_${n}_${d}`),"data-headless-type-name":`${n}#${d}`,"data-headless-title-desc-button":`${o}#${l}#${r.text}`,"data-headless-nav-position":`${t?.activeTab}#${h}`,children:r.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(p?.url||i)&&e("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(p?.url||i,g)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},O=S.forwardRef((u,t)=>{const{data:h,className:N,...B}=u,{shape:k,items:s=[]}=h,[v,y]=$(!1),[M,o]=$(""),[l,a]=$(""),{locale:r="us",trackingData:b}=G(),f=(p,i)=>{y(!0),i?a?.(p||""):o?.(p||"")},c=p=>{const i=s?.length,g=i>3,x=i>2,V=i>1;switch(!0){case p>=1440:case p>=1024:return g?3:i;case p>=768:return g||x?2.3:V?2:1;default:return V?1.2:1}};return m("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...B,className:w("graphicOverlayBlock text-info-primary ",N),children:[s&&s.length>0?e(E,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:s||[],configuration:{shape:k,num:s.length,locale:r,onVideoPlayBtnClick:f}},Slide:Q,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}}):null,v&&e(R,{visible:v,youTubeId:l,videoUrl:M,onCloseModal:()=>y(!1)})]})});O.displayName="GraphicOverlayBlock";var oe=D(O);export{oe as default};
+import{jsx as e,jsxs as u}from"react/jsx-runtime";import G,{useState as $,useEffect as O,useRef as S}from"react";import{useMediaQuery as U}from"react-responsive";import{withLayout as R}from"../../shared/Styles.js";import V from"../../components/picture.js";import I from"../../components/button.js";import{Heading as L}from"../../components/heading.js";import{VideoModal as E}from"../VideoModal/index.js";import{cn as v,getLocalizedPath as M}from"../../helpers/utils.js";import _ from"../SwiperBox/index.js";import{isVideo as C}from"../../shared/mimeType.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as H}from"../AiuiProvider/index.js";const n="image",m="p1_banner",A=({data:h,configuration:t,jIndex:b})=>{const[N,B]=$(!1),w=U({query:"(max-width: 768px)"}),i=S(null),y=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};D(i,{componentType:n,componentName:m,position:b,componentTitle:h.title,componentDescription:h.description,navigation:t?.activeTab}),O(()=>{B(w)},[w]);const{theme:k="light",title:s,description:l,imageUrl:a,primaryButton:r,secondaryButton:d,imageMobileUrl:f,blockLink:c,video:o,youtubeId:p,isYouTube:g}=h,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return u("div",{className:v("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",y(),{"rounded-2xl":t?.shape==="rounded","aiui-dark":k==="dark","h-[400px]":N},"text-info-primary"),ref:i,children:[c&&e("a",{className:"absolute inset-0 z-10",href:T(M(c||"",t?.locale||"us"),`${n}_${m}`),"data-headless-type-name":`${n}#${m}`,"data-headless-title-desc-button":`${s}#${l}`,"data-headless-nav-position":`${t?.activeTab}#${b}`,"aria-hidden":"true",tabIndex:-1}),u("div",{className:"absolute inset-0",children:[C(a?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:a?.url,type:"video/mp4"})}):e(V,{source:a?.url,alt:a?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),C(f?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:f?.url,type:"video/mp4"})}):e(V,{source:f?.url||a?.url,alt:f?.alt||a?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),u("div",{className:v("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":h?.width==="full"}),children:[u("div",{className:"flex flex-col gap-1",children:[e(L,{size:3,as:"h3",className:"item-title",html:s}),e(L,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:l})]}),u("div",{className:"lg-desktop:gap-3 flex gap-2",children:[d&&d.text&&u(I,{"aria-label":s??l,className:v(x,"link-left"),variant:"secondary",as:"a",href:T(M(d.link||"",t?.locale||"us"),`${n}_${m}`),"data-headless-type-name":`${n}#${m}`,"data-headless-title-desc-button":`${s}#${l}#${d?.text}`,"data-headless-nav-position":`${t?.activeTab}#${b}`,children:[d.text,e("span",{className:"sr-only",children:s??l})]}),r&&r.text&&e(I,{"aria-label":s??l,className:v(x,"link-right"),variant:"primary",as:"a",href:T(M(r.link||"",t?.locale||"us"),`${n}_${m}`),"data-headless-type-name":`${n}#${m}`,"data-headless-title-desc-button":`${s}#${l}#${r.text}`,"data-headless-nav-position":`${t?.activeTab}#${b}`,children:r.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(o?.url||p)&&e("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(o?.url||p,g)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},z=G.forwardRef((h,t)=>{const{data:b,className:N,...B}=h,{shape:w,items:i=[]}=b,[y,k]=$(!1),[s,l]=$(""),[a,r]=$(""),{locale:d="us"}=H(),f=(o,p)=>{k(!0),p?r?.(o||""):l?.(o||"")},c=o=>{const p=i?.length,g=p>3,x=p>2,P=p>1;switch(!0){case o>=1440:case o>=1024:return g?3:p;case o>=768:return g||x?2.3:P?2:1;default:return P?1.2:1}};return u("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...B,className:v("graphicOverlayBlock text-info-primary ",N),children:[i&&i.length>0?e(_,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:i||[],configuration:{shape:w,num:i.length,locale:d,onVideoPlayBtnClick:f}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}}):null,y&&e(E,{visible:y,youTubeId:a,videoUrl:s,onCloseModal:()=>k(!1)})]})});z.displayName="GraphicOverlayBlock";var se=R(z);export{se as default};
 //# sourceMappingURL=GraphicOverlay.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n  const { trackingData } = useAiuiContext()\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n            `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [] } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us', trackingData } = useAiuiContext()\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: {\n              shape: shape,\n              num: items.length,\n              locale,\n              onVideoPlayBtnClick: handleVideoPlayBtnClick,\n            },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
-  "mappings": "AA0FQ,cAAAA,EA+CE,QAAAC,MA/CF,oBA1FR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBACrC,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,kBAAAC,MAAsB,2BAE/B,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIvB,EAAkB,EAAK,EACjDwB,EAAarB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC1D,CAAE,aAAAsB,CAAa,EAAIV,EAAe,EAElCW,EAAMxB,EAAuB,IAAI,EAEjCyB,EAAe,IAAM,CACzB,OAAQP,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAEAP,EAAYa,EAAK,CACf,cAAeV,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAEDnB,EAAU,IAAM,CACdsB,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAI,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAInB,EACEoB,EAAe,mFAErB,OACEzC,EAAC,OACC,UAAWW,EACT,kFACAkB,EAAa,EACb,CACE,cAAeP,GAAe,QAAU,UACxC,YAAaQ,IAAU,OACvB,YAAaN,CACf,EACA,mBACF,EACA,IAAKI,EAEJ,UAAAS,GACCtC,EAAC,KACC,UAAU,wBACV,KAAMiB,EACJJ,EAAiByB,GAAa,GAAIf,GAAe,QAAU,IAAI,EAC/D,GAAGK,GAAc,eAAiB,EAAE,IAAIT,CAAa,IAAIC,CAAa,EACxE,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGY,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGV,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACX,EAEHvB,EAAC,OAAI,UAAU,mBACZ,UAAAc,EAAQmB,GAAU,QAAQ,EACzBlC,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,SAAAA,EAAC,UAAO,IAAKkC,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEAlC,EAACQ,EAAA,CACC,OAAQ0B,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAEDnB,EAAQsB,GAAgB,QAAQ,EAC/BrC,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,SAAAA,EAAC,UAAO,IAAKqC,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEArC,EAACQ,EAAA,CACC,OAAQ6B,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,EAEFjC,EAAC,OACC,UAAWW,EACT,wHACA,CACE,4DAA6DU,GAAM,QAAU,MAC/E,CACF,EAEA,UAAArB,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMsB,EAAO,EAC9DhC,EAACU,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMuB,EACR,GACF,EACAhC,EAAC,OAAI,UAAU,8BACZ,UAAAmC,GAAmBA,EAAgB,MAClCnC,EAACQ,EAAA,CACC,aAAYuB,GAASC,EACrB,UAAWrB,EAAG8B,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,KAAMzB,EACJJ,EAAiBuB,EAAgB,MAAQ,GAAIb,GAAe,QAAU,IAAI,EAC1E,GAAGK,GAAc,eAAiB,EAAE,IAAIT,CAAa,IAAIC,CAAa,EACxE,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGY,CAAK,IAAIC,CAAW,IAAIG,GAAiB,IAAI,GACjF,6BAA4B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAY,EAAgB,KACjBpC,EAAC,QAAK,UAAU,UAAW,SAAAgC,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9BnC,EAACS,EAAA,CACC,aAAYuB,GAASC,EACrB,UAAWrB,EAAG8B,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,KAAMzB,EACJJ,EAAiBsB,EAAc,MAAQ,GAAIZ,GAAe,QAAU,IAAI,EACxE,GAAGK,GAAc,eAAiB,EAAE,IAAIT,CAAa,IAAIC,CAAa,EACxE,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGY,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGZ,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAW,EAAc,KACjB,GAEJ,GACF,GACF,EACAnC,EAAC,OACC,SAAAA,EAAC,OAAI,UAAU,+EACX,UAAAuC,GAAO,KAAOC,IACdxC,EAAC,UACC,QAAS,IAAM,CACbuB,GAAe,sBAAsBgB,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,SAAAzC,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEM2C,EAAiBzC,EAAM,WAAgD,CAAC0C,EAAOf,IAAQ,CAC3F,KAAM,CAAE,KAAAgB,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAIH,EAC/B,CAAE,MAAAI,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIJ,EACxB,CAACK,EAASC,CAAU,EAAIhD,EAAkB,EAAK,EAC/C,CAACiD,EAAUC,CAAW,EAAIlD,EAAiB,EAAE,EAC7C,CAACmD,EAAWC,CAAY,EAAIpD,EAAiB,EAAE,EAC/C,CAAE,OAAAqD,EAAS,KAAM,aAAA5B,CAAa,EAAIV,EAAe,EAEjDuC,EAA0B,CAACC,EAAajB,IAAuB,CACnEU,EAAW,EAAI,EACXV,EACFc,IAAeG,GAAO,EAAE,EAExBL,IAAcK,GAAO,EAAE,CAE3B,EAEMC,EAAoBC,GAAkB,CAC1C,MAAMC,EAAMZ,GAAO,OACba,EAASD,EAAM,EACfE,EAAWF,EAAM,EACjBpC,EAAWoC,EAAM,EAEvB,OAAQ,GAAM,CACZ,KAAKD,GAAS,KACd,KAAKA,GAAS,KACZ,OAAOE,EAAS,EAAID,EACtB,KAAKD,GAAS,IACZ,OAAIE,GAAUC,EACL,IAEFtC,EAAW,EAAI,EACxB,QACE,OAAOA,EAAW,IAAM,CAC5B,CACF,EAEA,OACExB,EAAC,WACC,uBAAqB,iBACrB,IAAK4B,EACJ,GAAGkB,EACJ,UAAWnC,EAAG,yCAA0CkC,CAAS,EAEhE,UAAAG,GAASA,EAAM,OAAS,EACvBjD,EAACc,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMmC,GAAS,CAAC,EAChB,cAAe,CACb,MAAOD,EACP,IAAKC,EAAM,OACX,OAAAO,EACA,oBAAqBC,CACvB,CACF,EACA,MAAOpC,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAesC,EAAiB,GAAG,CACrC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,EACE,KACHT,GACClD,EAACW,EAAA,CACC,QAASuC,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDR,EAAe,YAAc,sBAE7B,IAAOqB,GAAQzD,EAAWoC,CAAc",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "getLocalizedPath", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [] } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: {\n              shape: shape,\n              num: items.length,\n              locale,\n              onVideoPlayBtnClick: handleVideoPlayBtnClick,\n            },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "getLocalizedPath", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as De,jsx as e,jsxs as o}from"react/jsx-runtime";import Le,{forwardRef as ae,useCallback as re,useEffect as K,useImperativeHandle as Ee,useMemo as M,useRef as U,useState as S}from"react";import{Picture as pe,Text as k,Button as ne,Container as be,BrandStrip as He}from"../../components/index.js";import{withLayout as ze}from"../../shared/Styles.js";import{cn as N,getLocalizedPath as ie}from"../../helpers/utils.js";import Re,{useNavContext as te}from"./NavProvider.js";import{HeaderNavigationMenu as A,HeaderNavigationBlockType as C,HeaderNavigationActionBlockType as x}from"./types.js";import Be from"jump.js";import{useGSAP as le}from"@gsap/react";import{gsap as se}from"gsap";import{WithSidebar as fe,WithSupports as ve,WithMulticol as he,WithGroupCategory as ge,WithResource as ye,WithTextLinks as ke}from"./withCategory.js";import{Menu as Ie,Close as Ne,User as Ae,LeftArrow as Oe,DownArrow as xe,Polygon as je}from"./icons/index.js";import We from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as _e}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as $e}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as Fe}from"./SidebarDropdown.js";import{useScrollLock as ce}from"./useScrollLock.js";import{MulticolDropdown as Ke}from"./MulticolDropdown.js";import{TextLinksDropdown as Ue}from"./TextLinksDropdown.js";import{SupportsDropdown as Ge}from"./SupportsDropdown.js";import{MobileSidebarMenu as Je}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Ye}from"./MobileSupportMenu.js";import{MobileMulticolMenu as qe}from"./MobileMulticolMenu.js";import{MobileTextLinksMenu as Qe}from"./MobileTextLinksMenu.js";import{MenuItem as ue}from"./MobileMenuComponents.js";import{useAiuiContext as me}from"../AiuiProvider/index.js";import Ve from"../../shared/throttle.js";const Ce=ae((r,i)=>{const{data:{header:u}={},buildProps:d,event:g,profile:p,theme:l="light",isTop:n=!1,searchResult:T,onSearch:a,isSearching:m,keywords:E,onPrimaryNavClick:v,onSeriesProductClick:s,onSidebarNavClick:Q,headerId:H,cartCount:O,menuData:z,...$}=r,[D,R]=S(!1),[G,B]=S(!1),[b,P]=S(!1),[V,j]=S(!1),I=U(null),f=U(null),F=()=>{const y=document?.querySelector("body")?.offsetWidth||0;j(y<=1440)};K(()=>(F(),window.addEventListener("resize",F),()=>{window.removeEventListener("resize",F)}),[]),Ee(i,()=>f.current),K(()=>{f.current&&n&&Be(f.current,{duration:0,offset:f.current?.getBoundingClientRect()?.bottom||0})},[n]),K(()=>{if(n){B(!1),P(!1);return}let y=0,J=0,X=0;const Y=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,L=Y();y=L,B(L>300),P(L>30);const q=Ve(()=>{const t=Y(),c=t-y;P(t>30),c>0?(J=0,X+=c,X>=300&&t>300&&B(!0)):c<0&&(X=0,J+=Math.abs(c),J>=300&&(B(!1),J=0)),y=t},100);return window.addEventListener("scroll",q,{passive:!0}),()=>window.removeEventListener("scroll",q)},[n]),K(()=>{g&&(g.search=()=>R(!0))},[g]),le(()=>{I?.current&&D&&se.fromTo(I.current,{height:0},{height:"auto",duration:.3})},[D]),ce(D);const W=M(()=>u?.bar?.actions?.find(y=>y?.blockType===x.Search)?.searchBar?.[0]||{},[u]);return e(Re,{buildProps:d,profile:p,isMobile:V,event:g,payloadData:u,onSidebarNavClick:Q,onSeriesProductClick:s,cartCount:O,children:e("header",{...$,id:H||"header","data-ui-component-id":"HeaderNavigation",className:n?"relative z-[100] bg-white":N("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":G}),ref:f,children:o("div",{className:N("hover:bg-white hover:text-black",l==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!n&&b},{"hover:!text-black":l==="dark","!text-black":!n&&b}),onClick:()=>!n&&P(!0),children:[e(we,{data:u,className:"desktop:block hidden !bg-white",theme:l,onNavItemClick:()=>!n&&P(!0),onPrimaryNavClick:v}),e(Me,{menuData:z,data:u,className:"desktop:hidden block !bg-white",onPrimaryNavClick:v}),D&&o("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${f?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:I,className:N("overflow-y-auto",{}),children:e(We,{data:W,keywords:E,isSearching:m,searchResult:T,onSearch:y=>{a?.(y)},onClose:()=>{a?.(),R(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>R(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:y=>{(y.key==="Enter"||y.key===" "||y.key==="Escape")&&(y.preventDefault(),R(!1))}})]})]})})})}),we=ae((r,i)=>{const{data:u,onNavItemClick:d,className:g,theme:p,onPrimaryNavClick:l}=r,{event:n,profile:T}=te(),[a,m]=S(!1),{locale:E="us"}=me(),v=M(()=>ge(u?.categories?.filter(t=>t?.pcShow)),[u]),[s,Q]=S(null),[H,O]=S([]),z=U(null),[$,D]=S(!1),R=U(null),G=U(null),B=U(v.map(t=>Array(t?.length||0).fill(null)));K(()=>{v?.length&&O(v?.map((t,c)=>t?.map((h,w)=>({groupIndex:c,index:w,open:!1}))))},[v]);const b=M(()=>{let t=null;for(const c of H){for(const h of c)if(h.open){t=h;break}if(t)break}return t},[H]);ce(!!b?.open||$);const P=(t,c,h)=>{D(!1);const w=v[c][h];if(w?.components?.[0]?.blockType===C.Links)w?.components?.[0]?.url&&window.open(w?.components?.[0]?.url);else{const Z=v?.flat()||[],_=Z?.findIndex(oe=>oe?.id===v[c][h]?.id);t.stopPropagation(),d?.(),l?.(Z[_],_),Q(w),O(oe=>oe.map(Pe=>Pe.map(ee=>ee.groupIndex===c&&ee.index===h?{...ee,open:!ee.open}:{...ee,open:!1})))}},V=(t,c,h)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),P(t,c,h)):t.key==="Escape"&&b?.groupIndex===c&&b?.index===h&&(t.preventDefault(),j())},j=()=>{O(t=>t.map(c=>c.map(h=>({...h,open:!1}))))},I=M(()=>{if(s)return s?.components?.[0]?.blockType},[s]),f=fe(Fe,s),F=ye(_e,s),W=he(Ke,s),y=ke(Ue,s),J=ve(Ge,{categoriesItem:s,currentNavItemRef:B.current?.[b?.groupIndex||0]?.[b?.index||0]}),X=M(()=>{switch(I){case C.Sidebar:return e(f,{});case C.Resource:return e(F,{});case C.Supports:return e(J,{});case C.Multicol:return e(W,{});case C.TextLinks:return e(y,{});default:return null}},[I,s]),Y=M(()=>u?.bar?.actions?.filter(t=>t?.pcShow),[u]),L=M(()=>Y?.find(t=>t?.blockType===x.Profile),[Y]),q=re(()=>{D(t=>!t)},[]);return K(()=>{if(z?.current){const t=z.current;return t.addEventListener("click",q),()=>{t.removeEventListener("click",q)}}},[q]),le(()=>{b?.open&&se.fromTo(G?.current,{height:0},{height:"auto"})},[b?.open]),o(be,{className:N("relative h-[96px]",g),children:[o("div",{ref:R,onClick:j,className:"flex h-full flex-col justify-end gap-4",children:[o("div",{className:"flex items-center justify-between",children:[e(Se,{}),e(de,{ref:z,actions:Y,activeStatus:$})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:v?.map((t,c)=>e("div",{className:"flex gap-3",children:t?.map((h,w)=>{const Z=b?.groupIndex===c&&b?.index===w;return e("div",{ref:_=>{B.current[c][w]=_},className:"group",children:o("div",{className:"relative",children:[o("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:_=>P(_,c,w),onKeyDown:_=>V(_,c,w),"aria-expanded":Z,"aria-haspopup":"true","aria-label":h.text,children:[e(k,{html:h.text,className:"text-sm font-bold leading-[1.4]"}),e(xe,{className:N("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":b?.groupIndex===c&&b?.index===w,"opacity-100":a&&b?.groupIndex===c&&b?.index===w,invisible:!h?.components?.length||h?.components?.[0]?.blockType===C.Links})})]}),e("div",{className:N("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":Z},p==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},h.id)})},`groupCategory-${c}`))})]}),o("div",{role:"menu","aria-hidden":!(b?.open&&s),className:N("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(b?.open&&s)}),onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),style:{height:`calc(100dvh - ${R?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:G,className:N("relative z-50",{"overflow-hidden":I!==C.Supports}),children:X}),e("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),j())}})]}),$&&o("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${z?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:T?.email?o(De,{children:[e(k,{html:T?.nick_name||L?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:L?.profiles?.map(t=>e(ue,{className:"py-2",label:t?.title,href:ie(t?.url,E)},t.id))})]}):o(De,{children:[e(je,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(k,{html:L?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:L?.benefits?.map(t=>o("div",{className:"flex items-center gap-[6px]",children:[e(pe,{source:t.benefitIcon?.url,className:"size-4",alt:t.benefit,width:16,height:16}),e(k,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),o("div",{className:"mt-4 flex items-center gap-2",children:[e(ne,{variant:"secondary",size:"lg",onClick:()=>n?.join?.(),children:e(k,{html:L?.primaryButton||"Join Now",className:"font-bold"})}),e(ne,{variant:"primary",size:"lg",onClick:()=>n?.login?.(),children:e(k,{html:L?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>D(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),D(!1))}})]})]})}),Me=ae(({data:r,menuData:i,className:u,onPrimaryNavClick:d},g)=>{const p=M(()=>ge(r?.categories?.filter(f=>f?.mobileShow)),[r]),{currentMenu:l,setCurrentMenu:n,subSubCategory:T}=te(),[a,m]=S(!1),[E,v]=S(0),[s,Q]=S(null),H=U(null);K(()=>{if(H?.current&&a){const f=H?.current?.getBoundingClientRect();v(window?.innerHeight-(f?.bottom||0))}},[a]),le(()=>{se.fromTo(H.current,{height:0},{height:E,duration:.3})},[E]),ce(a);const O=M(()=>s?.components?.[0]?.blockType,[s]),z=ve(Ye,{categoriesItem:s}),$=fe(Je,s),D=ye($e,s),R=he(qe,s),G=ke(Qe,s),B=M(()=>{switch(O){case C.Sidebar:return e($,{});case C.Resource:return e(D,{});case C.Supports:return e(z,{});case C.Multicol:return e(R,{});case C.TextLinks:return e(G,{});default:return null}},[O,s,z]),b=re(()=>{m(!1),v(0),n&&n(A.Primary)},[m,v,n]),P=M(()=>r?.bar?.actions?.filter(f=>f?.mobileShow&&f?.blockType!==x.Profile),[r]),V=M(()=>r?.bar?.actions?.find(f=>f?.mobileShow&&f?.blockType===x.Profile)||{},[r]),j=M(()=>{switch(l){case A.Primary:return e(et,{actions:P,menuOpen:a,onMenuOpenClose:()=>{m(!1),v(0)},onMenuOpenClick:()=>m(!0)});case A.Secondary:return e(Te,{title:s?.text,onMenuOpenClose:b,onMenuBackClick:()=>n?.(A.Primary)});case A.Third:return e(Te,{title:T?.label,onMenuOpenClose:b,onMenuBackClick:()=>n?.(A.Secondary)});default:return null}},[a,l,n,s,P,T,b]),I=re((f,F)=>{const W=Array.isArray(p)?Array.isArray(p[f])?p[f][F]:{}:{};Q(W),W?.components?.[0]?.blockType===C.Links?W?.components?.[0]?.url&&window.open(W?.components?.[0]?.url):n?.(A.Secondary)},[p,n]);return o(be,{className:N("relative h-[52px]",u),children:[j,a&&o("nav",{ref:H,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:E},role:"navigation","aria-label":"Mobile navigation menu",children:[l===A.Primary&&i?e("div",{className:"pt-4",children:e(He,{data:i})}):null,l===A.Primary?e(Xe,{categories:p,onPrimaryMenuClick:I,onPrimaryNavClick:d,profileAction:V}):B]})]})}),Xe=({categories:r,onPrimaryMenuClick:i,profileAction:u,onPrimaryNavClick:d})=>o("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:r?.map((g,p)=>o("div",{className:"",children:[e("div",{className:N("my-2 h-px w-full bg-[#E5E5E7]")}),g?.map((l,n)=>e(ue,{label:l.text,onClick:()=>{const a=(r?.flat()||[])?.findIndex(m=>m?.id===r[p][n]?.id);i(p,n),d?.(l,a)},icon:l.components?.[0]?.icon},l.id))]},`groupCategory-${p}`))}),e(Ze,{profileAction:u})]}),Ze=({profileAction:r})=>{const[i,u]=S(!1),{profile:d,event:g}=te(),{locale:p="us"}=me();return o("div",{className:N("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":i}),children:[o("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>u(!i),"aria-expanded":i,"aria-label":d?.nick_name||r?.welcome,children:[o("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Ae,{"aria-hidden":"true"})}),e(k,{html:d?.nick_name||r?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!d?.email&&e(xe,{"aria-hidden":"true",className:N("laptop:size-4 size-5",{"rotate-180":i})})]}),d?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:r?.profiles?.map(l=>e(ue,{label:l?.title,href:ie(l?.url,p)},l.id))}),i&&!d?.email&&o("div",{className:"mt-4",children:[e(k,{html:r?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:r?.benefits?.map(l=>o("div",{className:"flex items-center gap-[6px]",children:[e(pe,{source:l.benefitIcon?.url,className:"size-4",alt:l.benefit,width:16,height:16}),e(k,{html:l.benefit,className:"text-sm font-bold leading-[1.4]"})]},l.id))})]}),!d?.email&&o("div",{className:"mt-4 flex items-center gap-3",children:[e(ne,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>g?.join?.(),children:e(k,{html:r?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(ne,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>g?.login?.(),children:e(k,{html:r?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},et=({menuOpen:r,onMenuOpenClose:i,onMenuOpenClick:u,actions:d})=>o("div",{className:"flex h-full items-center justify-between gap-4",children:[e(Se,{}),o("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:d}),r?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Close menu","aria-expanded":"true",children:e(Ne,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>u(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Ie,{className:"size-5","aria-hidden":"true"})})]})]}),Se=()=>{const{payloadData:r,isMobile:i}=te(),{locale:u="us"}=me();return e("a",{href:ie("/",u),className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:i?r?.bar?.mobileLogo:r?.bar?.desktopLogo}})},de=ae(({actions:r,activeStatus:i=!1},u)=>{const{event:d,cartCount:g}=te(),[p,l]=S(null),n=a=>{switch(a){case x.Search:return"Search";case x.Cart:return`Shopping cart${g>0?` (${g} items)`:""}`;case x.Profile:return"User profile";case x.Livestream:return"Livestream";default:return"Action"}},T=re((a,m)=>{switch(l(m),a?.blockType){case x.Search:d?.search?.();break;case x.Cart:d?.cart?.();break;case x.Profile:d?.profile?.();break;case x.Livestream:d?.livestream?.();break;default:return()=>{}}},[d]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(r)&&r.map((a,m)=>{const E=a.blockType===x.Search,v=a.searchStyle??"icon";return E&&v==="capsule"?o(Le.Fragment,{children:[e("button",{className:"tablet:flex bg-container-primary hidden h-9 w-[200px] cursor-pointer items-center rounded-full border-0 px-2",onClick:()=>T(a,m),"aria-label":n(a.blockType),"aria-pressed":i&&p===m,children:e(k,{html:a.icon,className:N("size-5 shrink-0",{"text-brand-0":i&&p===m}),"aria-hidden":"true"})}),e("button",{className:"tablet:hidden relative cursor-pointer border-0 bg-transparent p-0",onClick:()=>T(a,m),"aria-label":n(a.blockType),"aria-pressed":i&&p===m,children:e(k,{html:a.icon,className:N("size-5",{"text-brand-0":i&&p===m}),"aria-hidden":"true"})})]},a.id):o("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:a.blockType===x.Profile?u:null,onClick:()=>T(a,m),"aria-label":n(a.blockType),"aria-pressed":i&&p===m,children:[e(k,{html:a.icon,className:N("size-5",{"text-brand-0":i&&p===m}),"aria-hidden":"true"}),a.blockType===x.Cart&&g>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(k,{html:g?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},a.id)})})}),Te=({title:r,onMenuOpenClose:i,onMenuBackClick:u})=>o("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>u(),"aria-label":"Back to previous menu",children:e(Oe,{className:"size-5","aria-hidden":"true"})}),e(k,{html:r,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Close menu",children:e(Ne,{className:"size-5","aria-hidden":"true"})})]});Me.displayName="MobileNavigation",de.displayName="Actions",Ce.displayName="HeaderNavigation",we.displayName="DesktopNavigation";var Tt=ze(Ce);export{Tt as default};
+"use client";import{Fragment as Se,jsx as e,jsxs as n}from"react/jsx-runtime";import{forwardRef as ee,useCallback as te,useEffect as U,useImperativeHandle as De,useMemo as C,useRef as G,useState as w}from"react";import{Picture as me,Text as N,Button as ae,Container as pe,BrandStrip as Ee}from"../../components/index.js";import{withLayout as Te}from"../../shared/Styles.js";import{cn as M,getLocalizedPath as re}from"../../helpers/utils.js";import He,{useNavContext as Z}from"./NavProvider.js";import{HeaderNavigationMenu as A,HeaderNavigationBlockType as S,HeaderNavigationActionBlockType as k}from"./types.js";import Le from"jump.js";import{useGSAP as ie}from"@gsap/react";import{gsap as le}from"gsap";import{WithSidebar as fe,WithSupports as be,WithMulticol as ve,WithGroupCategory as ge,WithResource as he}from"./withCategory.js";import{Menu as ze,Close as ye,User as Be,LeftArrow as Re,DownArrow as Ne,Polygon as Ie}from"./icons/index.js";import Ae from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as Oe}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as je}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as se}from"./useScrollLock.js";import{MulticolDropdown as _e}from"./MulticolDropdown.js";import{SupportsDropdown as $e}from"./SupportsDropdown.js";import{MobileSidebarMenu as Ke}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Fe}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ue}from"./MobileMulticolMenu.js";import{MenuItem as ce}from"./MobileMenuComponents.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import Ge from"../../shared/throttle.js";const ke=ee((a,u)=>{const{data:{header:l}={},buildProps:d,event:v,profile:b,theme:o="light",isTop:r=!1,searchResult:E,onSearch:s,isSearching:g,keywords:_,onPrimaryNavClick:h,onSeriesProductClick:m,onSidebarNavClick:q,headerId:z,cartCount:O,menuData:B,...$}=a,[P,R]=w(!1),[J,D]=w(!1),[p,T]=w(!1),[Q,j]=w(!1),f=G(null),H=G(null),L=()=>{const y=document?.querySelector("body")?.offsetWidth||0;j(y<=1440)};U(()=>(L(),window.addEventListener("resize",L),()=>{window.removeEventListener("resize",L)}),[]),De(u,()=>H.current),U(()=>{H.current&&r&&Le(H.current,{duration:0,offset:H.current?.getBoundingClientRect()?.bottom||0})},[r]),U(()=>{if(r){D(!1),T(!1);return}let y=0,Y=0,K=0;const I=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,F=I();y=F,D(F>300),T(F>30);const t=Ge(()=>{const i=I(),c=i-y;T(i>30),c>0?(Y=0,K+=c,K>=300&&i>300&&D(!0)):c<0&&(K=0,Y+=Math.abs(c),Y>=300&&(D(!1),Y=0)),y=i},100);return window.addEventListener("scroll",t,{passive:!0}),()=>window.removeEventListener("scroll",t)},[r]),U(()=>{v&&(v.search=()=>R(!0))},[v]),ie(()=>{f?.current&&P&&le.fromTo(f.current,{height:0},{height:"auto",duration:.3})},[P]),se(P);const ne=C(()=>l?.bar?.actions?.find(y=>y?.blockType===k.Search)?.searchBar?.[0]||{},[l]);return e(He,{buildProps:d,profile:b,isMobile:Q,event:v,payloadData:l,onSidebarNavClick:q,onSeriesProductClick:m,cartCount:O,children:e("header",{...$,id:z||"header","data-ui-component-id":"HeaderNavigation",className:r?"relative z-[100] bg-white":M("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":J}),ref:H,children:n("div",{className:M("hover:bg-white hover:text-black",o==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!r&&p},{"hover:!text-black":o==="dark","!text-black":!r&&p}),onClick:()=>!r&&T(!0),children:[e(xe,{data:l,className:"desktop:block hidden !bg-white",theme:o,onNavItemClick:()=>!r&&T(!0),onPrimaryNavClick:h}),e(Ce,{menuData:B,data:l,className:"desktop:hidden block !bg-white",onPrimaryNavClick:h}),P&&n("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${H?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:f,className:M("overflow-y-auto",{}),children:e(Ae,{data:ne,keywords:_,isSearching:g,searchResult:E,onSearch:y=>{s?.(y)},onClose:()=>{s?.(),R(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>R(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:y=>{(y.key==="Enter"||y.key===" "||y.key==="Escape")&&(y.preventDefault(),R(!1))}})]})]})})})}),xe=ee((a,u)=>{const{data:l,onNavItemClick:d,className:v,theme:b,onPrimaryNavClick:o}=a,{event:r,profile:E}=Z(),[s,g]=w(!1),{locale:_="us"}=ue(),h=C(()=>ge(l?.categories?.filter(t=>t?.pcShow)),[l]),[m,q]=w(null),[z,O]=w([]),B=G(null),[$,P]=w(!1),R=G(null),J=G(null),D=G(h.map(t=>Array(t?.length||0).fill(null)));U(()=>{h?.length&&O(h?.map((t,i)=>t?.map((c,x)=>({groupIndex:i,index:x,open:!1}))))},[h]);const p=C(()=>{let t=null;for(const i of z){for(const c of i)if(c.open){t=c;break}if(t)break}return t},[z]);se(!!p?.open||$);const T=(t,i,c)=>{P(!1);const x=h[i][c];if(x?.components?.[0]?.blockType===S.Links)x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url);else{const V=h?.flat()||[],W=V?.findIndex(oe=>oe?.id===h[i][c]?.id);t.stopPropagation(),d?.(),o?.(V[W],W),q(x),O(oe=>oe.map(Pe=>Pe.map(X=>X.groupIndex===i&&X.index===c?{...X,open:!X.open}:{...X,open:!1})))}},Q=(t,i,c)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),T(t,i,c)):t.key==="Escape"&&p?.groupIndex===i&&p?.index===c&&(t.preventDefault(),j())},j=()=>{O(t=>t.map(i=>i.map(c=>({...c,open:!1}))))},f=C(()=>{if(m)return m?.components?.[0]?.blockType},[m]),H=fe(We,m),L=he(Oe,m),ne=ve(_e,m),y=be($e,{categoriesItem:m,currentNavItemRef:D.current?.[p?.groupIndex||0]?.[p?.index||0]}),Y=C(()=>{switch(f){case S.Sidebar:return e(H,{});case S.Resource:return e(L,{});case S.Supports:return e(y,{});case S.Multicol:return e(ne,{});default:return null}},[f,m]),K=C(()=>l?.bar?.actions?.filter(t=>t?.pcShow),[l]),I=C(()=>K?.find(t=>t?.blockType===k.Profile),[K]),F=te(()=>{P(t=>!t)},[]);return U(()=>{if(B?.current){const t=B.current;return t.addEventListener("click",F),()=>{t.removeEventListener("click",F)}}},[F]),ie(()=>{p?.open&&le.fromTo(J?.current,{height:0},{height:"auto"})},[p?.open]),n(pe,{className:M("relative h-[96px]",v),children:[n("div",{ref:R,onClick:j,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(we,{}),e(de,{ref:B,actions:K,activeStatus:$})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:h?.map((t,i)=>e("div",{className:"flex gap-3",children:t?.map((c,x)=>{const V=p?.groupIndex===i&&p?.index===x;return e("div",{ref:W=>{D.current[i][x]=W},className:"group",children:n("div",{className:"relative",children:[n("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:W=>T(W,i,x),onKeyDown:W=>Q(W,i,x),"aria-expanded":V,"aria-haspopup":"true","aria-label":c.text,children:[e(N,{html:c.text,className:"text-sm font-bold leading-[1.4]"}),e(Ne,{className:M("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":p?.groupIndex===i&&p?.index===x,"opacity-100":s&&p?.groupIndex===i&&p?.index===x,invisible:!c?.components?.length||c?.components?.[0]?.blockType===S.Links})})]}),e("div",{className:M("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":V},b==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},c.id)})},`groupCategory-${i}`))})]}),n("div",{role:"menu","aria-hidden":!(p?.open&&m),className:M("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(p?.open&&m)}),onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),style:{height:`calc(100dvh - ${R?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:J,className:M("relative z-50",{"overflow-hidden":f!==S.Supports}),children:Y}),e("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),j())}})]}),$&&n("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${B?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:E?.email?n(Se,{children:[e(N,{html:E?.nick_name||I?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:I?.profiles?.map(t=>e(ce,{className:"py-2",label:t?.title,href:re(t?.url,_)},t.id))})]}):n(Se,{children:[e(Ie,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(N,{html:I?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:I?.benefits?.map(t=>n("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:t.benefitIcon?.url,className:"size-4",alt:t.benefit,width:16,height:16}),e(N,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),n("div",{className:"mt-4 flex items-center gap-2",children:[e(ae,{variant:"secondary",size:"lg",onClick:()=>r?.join?.(),children:e(N,{html:I?.primaryButton||"Join Now",className:"font-bold"})}),e(ae,{variant:"primary",size:"lg",onClick:()=>r?.login?.(),children:e(N,{html:I?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>P(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),P(!1))}})]})]})}),Ce=ee(({data:a,menuData:u,className:l,onPrimaryNavClick:d},v)=>{const b=C(()=>ge(a?.categories?.filter(f=>f?.mobileShow)),[a]),{currentMenu:o,setCurrentMenu:r,subSubCategory:E}=Z(),[s,g]=w(!1),[_,h]=w(0),[m,q]=w(null),z=G(null);U(()=>{if(z?.current&&s){const f=z?.current?.getBoundingClientRect();h(window?.innerHeight-(f?.bottom||0))}},[s]),ie(()=>{le.fromTo(z.current,{height:0},{height:_,duration:.3})},[_]),se(s);const O=C(()=>m?.components?.[0]?.blockType,[m]),B=be(Fe,{categoriesItem:m}),$=fe(Ke,m),P=he(je,m),R=ve(Ue,m),J=C(()=>{switch(O){case S.Sidebar:return e($,{});case S.Resource:return e(P,{});case S.Supports:return e(B,{});case S.Multicol:return e(R,{});default:return null}},[O,m,B]),D=te(()=>{g(!1),h(0),r&&r(A.Primary)},[g,h,r]),p=C(()=>a?.bar?.actions?.filter(f=>f?.mobileShow&&f?.blockType!==k.Profile),[a]),T=C(()=>a?.bar?.actions?.find(f=>f?.mobileShow&&f?.blockType===k.Profile)||{},[a]),Q=C(()=>{switch(o){case A.Primary:return e(qe,{actions:p,menuOpen:s,onMenuOpenClose:()=>{g(!1),h(0)},onMenuOpenClick:()=>g(!0)});case A.Secondary:return e(Me,{title:m?.text,onMenuOpenClose:D,onMenuBackClick:()=>r?.(A.Primary)});case A.Third:return e(Me,{title:E?.label,onMenuOpenClose:D,onMenuBackClick:()=>r?.(A.Secondary)});default:return null}},[s,o,r,m,p,E,D]),j=te((f,H)=>{const L=Array.isArray(b)?Array.isArray(b[f])?b[f][H]:{}:{};q(L),L?.components?.[0]?.blockType===S.Links?L?.components?.[0]?.url&&window.open(L?.components?.[0]?.url):r?.(A.Secondary)},[b,r]);return n(pe,{className:M("relative h-[52px]",l),children:[Q,s&&n("nav",{ref:z,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:_},role:"navigation","aria-label":"Mobile navigation menu",children:[o===A.Primary&&u?e("div",{className:"pt-4",children:e(Ee,{data:u})}):null,o===A.Primary?e(Je,{categories:b,onPrimaryMenuClick:j,onPrimaryNavClick:d,profileAction:T}):J]})]})}),Je=({categories:a,onPrimaryMenuClick:u,profileAction:l,onPrimaryNavClick:d})=>n("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((v,b)=>n("div",{className:"",children:[e("div",{className:M("my-2 h-px w-full bg-[#E5E5E7]")}),v?.map((o,r)=>e(ce,{label:o.text,onClick:()=>{const s=(a?.flat()||[])?.findIndex(g=>g?.id===a[b][r]?.id);u(b,r),d?.(o,s)},icon:o.components?.[0]?.icon},o.id))]},`groupCategory-${b}`))}),e(Ye,{profileAction:l})]}),Ye=({profileAction:a})=>{const[u,l]=w(!1),{profile:d,event:v}=Z(),{locale:b="us"}=ue();return n("div",{className:M("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":u}),children:[n("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>l(!u),"aria-expanded":u,"aria-label":d?.nick_name||a?.welcome,children:[n("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Be,{"aria-hidden":"true"})}),e(N,{html:d?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!d?.email&&e(Ne,{"aria-hidden":"true",className:M("laptop:size-4 size-5",{"rotate-180":u})})]}),d?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(o=>e(ce,{label:o?.title,href:re(o?.url,b)},o.id))}),u&&!d?.email&&n("div",{className:"mt-4",children:[e(N,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(o=>n("div",{className:"flex items-center gap-[6px]",children:[e(me,{source:o.benefitIcon?.url,className:"size-4",alt:o.benefit,width:16,height:16}),e(N,{html:o.benefit,className:"text-sm font-bold leading-[1.4]"})]},o.id))})]}),!d?.email&&n("div",{className:"mt-4 flex items-center gap-3",children:[e(ae,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>v?.join?.(),children:e(N,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(ae,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>v?.login?.(),children:e(N,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:u,onMenuOpenClick:l,actions:d})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(we,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(de,{actions:d}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>u(),"aria-label":"Close menu","aria-expanded":"true",children:e(ye,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(ze,{className:"size-5","aria-hidden":"true"})})]})]}),we=()=>{const{payloadData:a,isMobile:u}=Z(),{locale:l="us"}=ue();return e("a",{href:re("/",l),className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:u?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},de=ee(({actions:a,activeStatus:u=!1},l)=>{const{event:d,cartCount:v}=Z(),[b,o]=w(null),r=s=>{switch(s){case k.Search:return"Search";case k.Cart:return`Shopping cart${v>0?` (${v} items)`:""}`;case k.Profile:return"User profile";case k.Livestream:return"Livestream";default:return"Action"}},E=te((s,g)=>{switch(o(g),s?.blockType){case k.Search:d?.search?.();break;case k.Cart:d?.cart?.();break;case k.Profile:d?.profile?.();break;case k.Livestream:d?.livestream?.();break;default:return()=>{}}},[d]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((s,g)=>n("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:s.blockType===k.Profile?l:null,onClick:()=>E(s,g),"aria-label":r(s.blockType),"aria-pressed":u&&b===g,children:[e(N,{html:s.icon,className:M("size-5",{"text-brand-0":u&&b===g}),"aria-hidden":"true"}),s.blockType===k.Cart&&v>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(N,{html:v?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},s.id))})}),Me=({title:a,onMenuOpenClose:u,onMenuBackClick:l})=>n("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Back to previous menu",children:e(Re,{className:"size-5","aria-hidden":"true"})}),e(N,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>u(),"aria-label":"Close menu",children:e(ye,{className:"size-5","aria-hidden":"true"})})]});Ce.displayName="MobileNavigation",de.displayName="Actions",ke.displayName="HeaderNavigation",xe.displayName="DesktopNavigation";var kt=Te(ke);export{kt as default};
 //# sourceMappingURL=index.js.map