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/cjs/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": ["GiftTierShelf_exports", "__export", "GiftTierShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "SwiperModules", "import_Styles", "import_useExposure", "import_useProductListTrack", "import_AiuiProvider", "import_utils", "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"]
+  "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": ["GiftTierShelf_exports", "__export", "GiftTierShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_class_variance_authority", "import_react", "SwiperModules", "import_Styles", "import_AiuiProvider", "import_utils", "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", "v", "cardSwiperBreakpoints", "itemCount", "timelineSwiperBreakpoints", "swiperModules", "index"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var q=Object.create;var x=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var s in o)x(e,s,{get:o[s],enumerable:!0})},I=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of X(o))!F.call(e,r)&&r!==s&&x(e,r,{get:()=>o[r],enumerable:!(n=Q(o,r))||n.enumerable});return e};var v=(e,o,s)=>(s=e!=null?q(Z(e)):{},I(o||!e||!e.__esModule?x(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>I(x({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),C=require("react-responsive"),i=v(require("react")),V=require("react-dom"),a=require("../../helpers/utils.js"),S=require("../../shared/Styles.js"),P=v(require("../SwiperBox/index.js")),p=require("../../components/index.js"),G=v(require("../Title/index.js")),D=require("../VideoModal/index.js"),L=require("../TextModal/index.js"),w=require("../../hooks/useExposure.js"),k=require("../../shared/trackUrlRef.js"),B=require("../AiuiProvider/index.js");const u="image",h="graphic",M=e=>{let o="";const s=l=>(l?.url&&(o=l.url),o),n=s(e.lgDesktop),r=s(e.desktop),m=s(e.laptop),b=s(e.tablet),d=e.default?.url;return[`${n} 9999`,`${r} 1919`,`${m} 1439`,`${b} 1024`,`${d} 768`].join(", ")},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]",O=({data:e,configuration:o})=>{const s=(0,i.useRef)(null),[n,r]=(0,i.useState)({visible:!1,x:0,y:0,text:""}),m=()=>{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=l=>{e?.description&&r({visible:!0,x:l.clientX,y:l.clientY,text:e.description})},d=()=>{r(l=>({...l,visible:!1}))};return(0,w.useExposure)(s,{componentType:u,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1}),(0,t.jsx)("div",{ref:s,className:(0,a.cn)(m(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,a.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsxs)("a",{"aria-label":e?.title||e?.description,href:(0,k.trackUrlRef)(e?.href||"",`${u}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${u}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?M(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),(0,t.jsx)("span",{className:"sr-only",children:e?.title||e?.description})]}):(0,t.jsx)("div",{className:"rounded-card block size-full overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?M(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,a.cn)("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(p.Text,{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&&(0,t.jsxs)("div",{onMouseMove:b,onMouseLeave:d,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${N} graphic-description`}):(0,t.jsx)("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${N} graphic-description-item`}),typeof window<"u"&&n.visible&&(0,V.createPortal)((0,t.jsx)("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:`${n.x+16}px`,top:`${n.y+16}px`},children:n.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:l=>{l.preventDefault(),l.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:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:l=>{l.preventDefault(),l.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:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(p.Button,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,k.trackUrlRef)((0,a.getLocalizedPath)(e?.href||"",o?.locale||"us"),`${u}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${u}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},$=i.default.forwardRef(({data:e,className:o,...s},n)=>{const r=(0,C.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,i.useRef)(null),[b,d]=(0,i.useState)(!1),[l,U]=(0,i.useState)(""),[z,H]=(0,i.useState)(""),[E,R]=(0,i.useState)(""),[j,y]=(0,i.useState)(null),[_,T]=(0,i.useState)(!1),{locale:Y="us"}=(0,B.useAiuiContext)(),f=g=>{const c=e?.items?.length>3,A=e?.items?.length>2;switch(g){case 1440:return c?4:e?.items?.length;case 1024:return c?3:e?.items?.length;case 768:return e?.items?.length===1?1:c||A?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,i.useImperativeHandle)(n,()=>m.current),(0,w.useExposure)(m,{componentType:u,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:m,className:(0,a.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(G.default,{data:{title:e?.title}}),(0,t.jsx)(P.default,{id:"Graphic",className:(0,a.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:Y,onVideoPlayBtnClick:(g,c)=>{d(!0),c?.isYouTube?H?.(c?.youtubeId||""):(U?.(c?.video?.url||""),R?.(c?.mobileVideo?.url||""))},onIconClick:g=>{T(!0),y(g)},title:e?.title}},Slide:O,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)}}})]}),(0,t.jsx)(D.VideoModal,{visible:b,youTubeId:z,onCloseModal:()=>d(!1),videoUrl:r&&E||l}),(0,t.jsx)(L.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{T(!1),y(null)}})]})});$.displayName="Graphic";var W=(0,S.withLayout)($);
+"use strict";"use client";var q=Object.create;var v=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var s in o)v(e,s,{get:o[s],enumerable:!0})},N=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of X(o))!F.call(e,i)&&i!==s&&v(e,i,{get:()=>o[i],enumerable:!(n=Q(o,i))||n.enumerable});return e};var y=(e,o,s)=>(s=e!=null?q(Z(e)):{},N(o||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>N(v({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),P=require("react-responsive"),l=y(require("react")),S=require("react-dom"),a=require("../../helpers/utils.js"),G=require("../../shared/Styles.js"),D=y(require("../SwiperBox/index.js")),p=require("../../components/index.js"),L=y(require("../Title/index.js")),B=require("../VideoModal/index.js"),U=require("../TextModal/index.js"),T=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),z=require("../AiuiProvider/index.js");const d="image",h="graphic",$=e=>{let o="";const s=u=>(u?.url&&(o=u.url),o),n=s(e.lgDesktop),i=s(e.desktop),m=s(e.laptop),f=s(e.tablet),b=e.default?.url;return[`${n} 9999`,`${i} 1919`,`${m} 1439`,`${f} 1024`,`${b} 768`].join(", ")},C="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]",O=({data:e,configuration:o})=>{const s=(0,l.useRef)(null),[n,i]=(0,l.useState)({visible:!1,x:0,y:0,text:""}),m=()=>{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]"}},f=r=>{e?.description&&i({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},b=()=>{i(r=>({...r,visible:!1}))};(0,T.useExposure)(s,{componentType:d,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const u=e?.href?"a":"div",k=e?.href?{href:(0,w.trackUrlRef)(e.href,`${d}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,a.cn)(m(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,a.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsxs)("a",{"aria-label":e?.title||e?.description,href:(0,w.trackUrlRef)(e?.href||"",`${d}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),(0,t.jsx)("span",{className:"sr-only",children:e?.title||e?.description})]}):(0,t.jsx)("div",{className:"rounded-card block size-full overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(u,{...k,className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,a.cn)("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(p.Text,{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&&(0,t.jsxs)("div",{onMouseMove:f,onMouseLeave:b,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${C} graphic-description`}):(0,t.jsx)("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${C} graphic-description-item`}),typeof window<"u"&&n.visible&&(0,S.createPortal)((0,t.jsx)("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:`${n.x+16}px`,top:`${n.y+16}px`},children:n.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.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:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:r=>{r.preventDefault(),r.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:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(p.Button,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,w.trackUrlRef)((0,a.getLocalizedPath)(e?.href||"",o?.locale||"us"),`${d}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},V=l.default.forwardRef(({data:e,className:o,...s},n)=>{const i=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,l.useRef)(null),[f,b]=(0,l.useState)(!1),[u,k]=(0,l.useState)(""),[r,E]=(0,l.useState)(""),[H,R]=(0,l.useState)(""),[j,I]=(0,l.useState)(null),[_,M]=(0,l.useState)(!1),{locale:Y="us"}=(0,z.useAiuiContext)(),g=x=>{const c=e?.items?.length>3,A=e?.items?.length>2;switch(x){case 1440:return c?4:e?.items?.length;case 1024:return c?3:e?.items?.length;case 768:return e?.items?.length===1?1:c||A?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(n,()=>m.current),(0,T.useExposure)(m,{componentType:d,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:m,className:(0,a.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(L.default,{data:{title:e?.title}}),(0,t.jsx)(D.default,{id:"Graphic",className:(0,a.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:Y,onVideoPlayBtnClick:(x,c)=>{b(!0),c?.isYouTube?E?.(c?.youtubeId||""):(k?.(c?.video?.url||""),R?.(c?.mobileVideo?.url||""))},onIconClick:x=>{M(!0),I(x)},title:e?.title}},Slide:O,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)}}})]}),(0,t.jsx)(B.VideoModal,{visible:f,youTubeId:r,onCloseModal:()=>b(!1),videoUrl:i&&H||u}),(0,t.jsx)(U.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{M(!1),I(null)}})]})});V.displayName="Graphic";var W=(0,G.withLayout)(V);
 //# sourceMappingURL=index.js.map

package/dist/cjs/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": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_react_dom", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "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", "React", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "Title", "SwiperBox", "_"]
+  "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": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_react_dom", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "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", "React", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "Title", "SwiperBox", "_"]
 }

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

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

package/dist/cjs/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": "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",
-  "names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
+  "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": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
 }

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

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