@anker-in/headless-ui 1.1.74 → 1.1.76

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

@@ -0,0 +1,120 @@
+import type { Media } from '../../types/props.js';
+import type { Product } from '../Listing/types/product.js';
+/**
+ * 礼品货架产品项（简化版产品信息）
+ */
+export interface GiftShelfProduct {
+    /** 产品 SKU */
+    sku: string;
+    /** 产品名称 */
+    name: string;
+    /** 产品图片 URL */
+    image: string;
+    /** 产品值/标识 (通常与 handle 相同) */
+    value: string;
+    /** 产品 handle (URL slug) */
+    handle: string;
+    /** Shopify 产品 ID */
+    shopify_id: string;
+    /** 自定义库存 */
+    custom_inventory?: number;
+    /** 自定义价格 */
+    custom_price?: number;
+    /** 自定义产品描述 */
+    custom_description?: string | null;
+}
+/**
+ * 倒计时配置接口
+ */
+export interface CountdownConfig {
+    /** 倒计时开始时间，支持 ISO 8601 字符串（如 "2026-02-10T04:00:00.000Z"）或时间戳（毫秒） */
+    startTime: string | number;
+    /** 每轮倒计时时长（天），默认为 1 天 */
+    durationDays?: number;
+    /** 倒计时轮次，默认为 1 */
+    rounds?: number;
+}
+/**
+ * 响应式背景图片类型
+ * 支持 5 个断点的图片配置
+ */
+export interface ResponsiveBackgroundImage {
+    /** 默认图片 (<768px 移动端) */
+    default?: Media;
+    /** tablet 断点图片 (≥768px) */
+    tablet?: Media;
+    /** laptop 断点图片 (≥1025px) */
+    laptop?: Media;
+    /** desktop 断点图片 (≥1440px) */
+    desktop?: Media;
+    /** lg-desktop 断点图片 (≥1920px) */
+    lgDesktop?: Media;
+}
+/**
+ * 礼品卡片项数据接口
+ */
+export interface GiftShelfItem {
+    /** 卡片倒计时配置（可选） */
+    countdown?: CountdownConfig;
+    /** 产品列表 */
+    products: GiftShelfProduct[];
+    /** 响应式背景图片（支持 5 个断点） */
+    backgroundImage?: ResponsiveBackgroundImage;
+    /** Code 前缀，后缀会根据当前轮次自动生成（MMDD 格式） */
+    codePrefix?: string;
+}
+/**
+ * 礼品货架组件数据接口
+ */
+export interface GiftShelfData {
+    /** 礼品卡片列表 */
+    items: GiftShelfItem[];
+    /** 主题模式，默认为 light */
+    theme?: 'light' | 'dark';
+    /** 购买按钮文本 */
+    buttonText: string;
+    /** 购买按钮链接 */
+    buttonLink?: string;
+    /** 剩余数量提示文本，支持模板变量 {inventory} 和 {quantity} */
+    remainText?: string;
+    /** 低库存提示文本 */
+    lowStockText?: string;
+    /** 售罄按钮文本 */
+    soldOutButtonText?: string;
+    /** 折扣文案（可选） */
+    discountText?: string;
+    /** 倒计时文案 */
+    countdownText?: string;
+    /** 最后一轮提示文案 */
+    lastRoundText?: string;
+    /** 开始前提示文案 */
+    beforeStartText?: string;
+    /** 即将开始按钮文案 */
+    comingSoonButtonText?: string;
+    /** 倒计时图标 */
+    countdownIcon?: Media;
+}
+/**
+ * 语义化类名
+ */
+export type GiftShelfSemanticName = 'root' | 'card' | 'countdown' | 'button';
+/**
+ * 礼品货架组件 Props
+ */
+export interface GiftShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: GiftShelfData;
+    /** 构建时数据（产品列表等） */
+    buildData?: {
+        products: Product[];
+    };
+    /** 语义化类名 */
+    classNames?: Partial<Record<GiftShelfSemanticName, string>>;
+    /** 按钮点击回调，code 为当前轮次的完整 Code（前缀 + MMDD 后缀） */
+    onButtonClick?: ({ product, code }: {
+        product: GiftShelfProduct;
+        code: string;
+    }) => void;
+    /** 按钮加载状态 */
+    loading?: boolean;
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GiftShelf/types.ts"],
+  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport type { Product } from '../Listing/types/product.js'\n\n/**\n * \u793C\u54C1\u8D27\u67B6\u4EA7\u54C1\u9879\uFF08\u7B80\u5316\u7248\u4EA7\u54C1\u4FE1\u606F\uFF09\n */\nexport interface GiftShelfProduct {\n  /** \u4EA7\u54C1 SKU */\n  sku: string\n  /** \u4EA7\u54C1\u540D\u79F0 */\n  name: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  image: string\n  /** \u4EA7\u54C1\u503C/\u6807\u8BC6 (\u901A\u5E38\u4E0E handle \u76F8\u540C) */\n  value: string\n  /** \u4EA7\u54C1 handle (URL slug) */\n  handle: string\n  /** Shopify \u4EA7\u54C1 ID */\n  shopify_id: string\n  /** \u81EA\u5B9A\u4E49\u5E93\u5B58 */\n  custom_inventory?: number\n  /** \u81EA\u5B9A\u4E49\u4EF7\u683C */\n  custom_price?: number\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string | null\n}\n\n/**\n * \u5012\u8BA1\u65F6\u914D\u7F6E\u63A5\u53E3\n */\nexport interface CountdownConfig {\n  /** \u5012\u8BA1\u65F6\u5F00\u59CB\u65F6\u95F4\uFF0C\u652F\u6301 ISO 8601 \u5B57\u7B26\u4E32\uFF08\u5982 \"2026-02-10T04:00:00.000Z\"\uFF09\u6216\u65F6\u95F4\u6233\uFF08\u6BEB\u79D2\uFF09 */\n  startTime: string | number\n  /** \u6BCF\u8F6E\u5012\u8BA1\u65F6\u65F6\u957F\uFF08\u5929\uFF09\uFF0C\u9ED8\u8BA4\u4E3A 1 \u5929 */\n  durationDays?: number\n  /** \u5012\u8BA1\u65F6\u8F6E\u6B21\uFF0C\u9ED8\u8BA4\u4E3A 1 */\n  rounds?: number\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u7C7B\u578B\n * \u652F\u6301 5 \u4E2A\u65AD\u70B9\u7684\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u9ED8\u8BA4\u56FE\u7247 (<768px \u79FB\u52A8\u7AEF) */\n  default?: Media\n  /** tablet \u65AD\u70B9\u56FE\u7247 (\u2265768px) */\n  tablet?: Media\n  /** laptop \u65AD\u70B9\u56FE\u7247 (\u22651025px) */\n  laptop?: Media\n  /** desktop \u65AD\u70B9\u56FE\u7247 (\u22651440px) */\n  desktop?: Media\n  /** lg-desktop \u65AD\u70B9\u56FE\u7247 (\u22651920px) */\n  lgDesktop?: Media\n}\n\n/**\n * \u793C\u54C1\u5361\u7247\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface GiftShelfItem {\n  /** \u5361\u7247\u5012\u8BA1\u65F6\u914D\u7F6E\uFF08\u53EF\u9009\uFF09 */\n  countdown?: CountdownConfig\n  /** \u4EA7\u54C1\u5217\u8868 */\n  products: GiftShelfProduct[]\n  /** \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\uFF08\u652F\u6301 5 \u4E2A\u65AD\u70B9\uFF09 */\n  backgroundImage?: ResponsiveBackgroundImage\n  /** Code \u524D\u7F00\uFF0C\u540E\u7F00\u4F1A\u6839\u636E\u5F53\u524D\u8F6E\u6B21\u81EA\u52A8\u751F\u6210\uFF08MMDD \u683C\u5F0F\uFF09 */\n  codePrefix?: string\n}\n\n/**\n * \u793C\u54C1\u8D27\u67B6\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface GiftShelfData {\n  /** \u793C\u54C1\u5361\u7247\u5217\u8868 */\n  items: GiftShelfItem[]\n  /** \u4E3B\u9898\u6A21\u5F0F\uFF0C\u9ED8\u8BA4\u4E3A light */\n  theme?: 'light' | 'dark'\n  /** \u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  buttonText: string\n  /** \u8D2D\u4E70\u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u5269\u4F59\u6570\u91CF\u63D0\u793A\u6587\u672C\uFF0C\u652F\u6301\u6A21\u677F\u53D8\u91CF {inventory} \u548C {quantity} */\n  remainText?: string\n  /** \u4F4E\u5E93\u5B58\u63D0\u793A\u6587\u672C */\n  lowStockText?: string\n  /** \u552E\u7F44\u6309\u94AE\u6587\u672C */\n  soldOutButtonText?: string\n  /** \u6298\u6263\u6587\u6848\uFF08\u53EF\u9009\uFF09 */\n  discountText?: string\n  /** \u5012\u8BA1\u65F6\u6587\u6848 */\n  countdownText?: string\n  /** \u6700\u540E\u4E00\u8F6E\u63D0\u793A\u6587\u6848 */\n  lastRoundText?: string\n  /** \u5F00\u59CB\u524D\u63D0\u793A\u6587\u6848 */\n  beforeStartText?: string\n  /** \u5373\u5C06\u5F00\u59CB\u6309\u94AE\u6587\u6848 */\n  comingSoonButtonText?: string\n  /** \u5012\u8BA1\u65F6\u56FE\u6807 */\n  countdownIcon?: Media\n}\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type GiftShelfSemanticName = 'root' | 'card' | 'countdown' | 'button'\n\n/**\n * \u793C\u54C1\u8D27\u67B6\u7EC4\u4EF6 Props\n */\nexport interface GiftShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: GiftShelfData\n  /** \u6784\u5EFA\u65F6\u6570\u636E\uFF08\u4EA7\u54C1\u5217\u8868\u7B49\uFF09 */\n  buildData?: {\n    products: Product[]\n  }\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<GiftShelfSemanticName, string>>\n  /** \u6309\u94AE\u70B9\u51FB\u56DE\u8C03\uFF0Ccode \u4E3A\u5F53\u524D\u8F6E\u6B21\u7684\u5B8C\u6574 Code\uFF08\u524D\u7F00 + MMDD \u540E\u7F00\uFF09 */\n  onButtonClick?: ({ product, code }: { product: GiftShelfProduct; code: string }) => void\n  /** \u6309\u94AE\u52A0\u8F7D\u72B6\u6001 */\n  loading?: boolean\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

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

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+export type { GiftTierShelfProps, GiftTierShelfData, GiftTierItem, GiftTierProduct } from './types.js';

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

@@ -0,0 +1,2 @@
+"use strict";"use client";var L=Object.create;var g=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var R=(e,i)=>{for(var l in i)g(e,l,{get:i[l],enumerable:!0})},N=(e,i,l,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of D(i))!H.call(e,o)&&o!==l&&g(e,o,{get:()=>i[o],enumerable:!(m=U(i,o))||m.enumerable});return e};var b=(e,i,l)=>(l=e!=null?L(E(e)):{},N(i||!e||!e.__esModule?g(l,"default",{value:e,enumerable:!0}):l,e)),_=e=>N(g({},"__esModule",{value:!0}),e);var K={};R(K,{default:()=>J});module.exports=_(K);var t=require("react/jsx-runtime"),s=b(require("react")),d=require("../../helpers/index.js"),a=require("../../components/index.js"),k=require("class-variance-authority"),f=require("swiper/react"),C=b(require("swiper/modules")),B=require("../../shared/Styles.js"),F=require("../AiuiProvider/index.js"),I=require("../Listing/utils/index.js");const q=(0,k.cva)("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",{variants:{theme:{light:"bg-gradient-to-b from-[#FCCA7B] to-[#FFE6BF]",dark:"bg-gradient-to-b from-[#3A3A3A] to-[#1D1D1F]"}},defaultVariants:{theme:"light"}}),P=(0,k.cva)("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-white"}},defaultVariants:{theme:"light"}}),M=s.memo(({image:e})=>e?(0,t.jsx)(a.Picture,{source:e.url,alt:e.alt||"Member Tag",className:"h-full w-auto",imgClassName:"h-full w-auto object-contain"}):null);M.displayName="MemberTag";const y=s.memo(({theme:e="light"})=>{const i=e==="light"?"bg-[#f6cd4e]":"bg-[#F5F6F7]";return(0,t.jsx)("div",{className:"flex h-4 w-full items-center",children:(0,t.jsx)("div",{className:(0,d.cn)("flex h-1 w-full items-center justify-center",i),children:(0,t.jsx)("div",{className:(0,d.cn)("relative size-4 shrink-0 rounded-full",i)})})})});y.displayName="TimelineItem";const V=s.memo(({item:e,theme:i="light",className:l,onClick:m,buildData:o})=>{const{locale:v="us"}=(0,F.useAiuiContext)(),n=e.products?.[0],p=s.useMemo(()=>!n?.handle||!o?.products?.length?null:o.products.find(w=>w.handle===n.handle)||null,[n?.handle,o?.products]),h=s.useMemo(()=>p?.variants?.find(w=>w?.sku===n?.sku)||{},[n?.sku,p?.variants]),x=(0,I.formatPrice)({locale:v||"us",amount:n?.custom_price??h?.price?.amount,currencyCode:p?.price?.currencyCode||"USD"});return(0,t.jsxs)("div",{className:(0,d.cn)(q({theme:i}),l),onClick:m,"data-ui-component-id":"GiftTierCard",children:[(0,t.jsx)("div",{className:"lg-desktop:h-[28px] z-10 h-6",children:e.showMemberTag&&e.memberTagImage&&(0,t.jsx)(M,{image:e.memberTagImage})}),(0,t.jsx)("div",{className:"relative z-10 mx-auto min-h-0 w-fit flex-1",children:(0,t.jsx)(a.Picture,{source:h?.image?.url||p?.images[0]?.url,className:"size-full",imgClassName:"size-full object-contain"})}),(0,t.jsxs)("div",{className:(0,d.cn)("z-10 flex w-full shrink-0 flex-col gap-2",P({theme:i})),children:[(0,t.jsxs)("div",{className:"flex items-end gap-1",children:[(0,t.jsx)(a.Heading,{html:x,size:4,className:"font-bold leading-[1.2] tracking-[-0.04em]"}),e.valueUnit&&(0,t.jsx)(a.Text,{html:e.valueUnit,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.2] tracking-[-0.04em]"})]}),(0,t.jsx)(a.Text,{html:h?.title||p?.title,className:"lg-desktop:text-2xl line-clamp-2 min-h-[48px] text-wrap text-xl font-bold leading-[1.2] tracking-[-0.04em]"})]})]})});V.displayName="GiftTierCard";const G=s.forwardRef(({classNames:e={},data:i,onCardClick:l,buildData:m,...o},v)=>{const n=i.theme||"light",p=i.showTimeline!==!1,[h,x]=s.useState(null),[w,z]=s.useState(null),u=s.useMemo(()=>m?.products?.length?i.items.filter(r=>{const c=r.products?.[0];return c?.handle?m.products.find(S=>S.handle===c.handle)?.variants?.find(S=>S?.sku===c?.sku)?.availableForSale!==!1:!0}):i.items,[i.items,m?.products]),A=s.useMemo(()=>{const r=u.length;return{0:{slidesPerView:1.2,spaceBetween:12},768:{slidesPerView:Math.min(r,2.5),spaceBetween:12},1025:{slidesPerView:Math.min(r,3.5),spaceBetween:16},1440:{slidesPerView:Math.min(r,4),spaceBetween:16}}},[u.length]),j=s.useMemo(()=>{const r=u.length;return{0:{slidesPerView:1.2,spaceBetween:0},768:{slidesPerView:Math.min(r,2.5),spaceBetween:0},1025:{slidesPerView:Math.min(r,3.5),spaceBetween:0},1440:{slidesPerView:Math.min(r,4),spaceBetween:0}}},[u.length]),T=s.useMemo(()=>C.Controller?[C.Controller]:[],[]);return(0,t.jsxs)(a.Container,{ref:v,className:(0,d.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"GiftTierShelf",...o,children:[(0,t.jsx)(f.Swiper,{modules:T,breakpoints:A,className:"w-full !overflow-visible",onSwiper:x,controller:{control:w},children:u.map((r,c)=>(0,t.jsx)(f.SwiperSlide,{children:(0,t.jsx)(V,{item:r,theme:n,buildData:m,className:e?.card,onClick:()=>l?.(r,c)})},"giftTierItem"+c))}),p&&(0,t.jsx)("div",{className:"mt-4 flex flex-col gap-4",children:(0,t.jsx)("div",{className:(0,d.cn)("w-full",e?.timeline),children:(0,t.jsx)(f.Swiper,{modules:T,breakpoints:j,className:"w-full !overflow-visible",onSwiper:z,controller:{control:h},children:u.map((r,c)=>(0,t.jsx)(f.SwiperSlide,{children:(0,t.jsxs)("div",{className:"flex flex-col items-center",children:[(0,t.jsx)(y,{theme:n}),(0,t.jsx)(a.Text,{html:r.threshold,className:(0,d.cn)("lg-desktop:text-2xl text-center text-xl font-bold leading-[1.2] tracking-[-0.04em]",P({theme:n}),e?.thresholdText)})]})},"timelineItem"+c))})})})]})});G.displayName="GiftTierShelf";var J=(0,B.withLayout)(G);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 { 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/GiftTierShelf/types.d.ts

@@ -0,0 +1,75 @@
+import type { Media } from '../../types/props.js';
+import type { Product } from '../Listing/types/product.js';
+export type { Media };
+export interface GiftShelfProduct {
+    /** 产品 SKU */
+    sku: string;
+    /** 产品名称 */
+    name: string;
+    /** 产品图片 URL */
+    image: string;
+    /** 产品值/标识 (通常与 handle 相同) */
+    value: string;
+    /** 产品 handle (URL slug) */
+    handle: string;
+    /** Shopify 产品 ID */
+    shopify_id: string;
+    /** 自定义库存 */
+    custom_inventory?: number;
+    /** 自定义价格 */
+    custom_price?: number;
+    /** 自定义产品描述 */
+    custom_description?: string | null;
+}
+/**
+ * 满赠阶梯产品项
+ */
+export interface GiftTierProduct {
+    /** 价值单位（如 "Value"） */
+    valueUnit?: string;
+}
+/**
+ * 满赠阶梯项
+ */
+export interface GiftTierItem {
+    /** 阶梯门槛文本（如 "Order Over $3,000"） */
+    threshold: string;
+    /** 该阶梯对应的产品 */
+    products: GiftShelfProduct[];
+    /** 是否显示会员标签 */
+    showMemberTag?: boolean;
+    /** 会员标签图片 */
+    memberTagImage?: Media;
+    /** 价值单位（如 "Value"） */
+    valueUnit?: string;
+}
+/**
+ * 满赠货架组件数据接口
+ */
+export interface GiftTierShelfData {
+    /** 阶梯项列表 */
+    items: GiftTierItem[];
+    /** 主题模式 */
+    theme?: 'light' | 'dark';
+    /** 是否显示时间轴 */
+    showTimeline?: boolean;
+}
+/**
+ * 语义化类名
+ */
+export type GiftTierShelfSemanticName = 'root' | 'card' | 'timeline' | 'thresholdText';
+/**
+ * 满赠货架组件 Props
+ */
+export interface GiftTierShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: GiftTierShelfData;
+    /** 构建时数据（产品列表等） */
+    buildData?: {
+        products: Product[];
+    };
+    /** 语义化类名 */
+    classNames?: Partial<Record<GiftTierShelfSemanticName, string>>;
+    /** 卡片点击回调 */
+    onCardClick?: (item: GiftTierItem, index: number) => void;
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GiftTierShelf/types.ts"],
+  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport type { Product } from '../Listing/types/product.js'\n\nexport type { Media }\n\nexport interface GiftShelfProduct {\n  /** \u4EA7\u54C1 SKU */\n  sku: string\n  /** \u4EA7\u54C1\u540D\u79F0 */\n  name: string\n  /** \u4EA7\u54C1\u56FE\u7247 URL */\n  image: string\n  /** \u4EA7\u54C1\u503C/\u6807\u8BC6 (\u901A\u5E38\u4E0E handle \u76F8\u540C) */\n  value: string\n  /** \u4EA7\u54C1 handle (URL slug) */\n  handle: string\n  /** Shopify \u4EA7\u54C1 ID */\n  shopify_id: string\n  /** \u81EA\u5B9A\u4E49\u5E93\u5B58 */\n  custom_inventory?: number\n  /** \u81EA\u5B9A\u4E49\u4EF7\u683C */\n  custom_price?: number\n  /** \u81EA\u5B9A\u4E49\u4EA7\u54C1\u63CF\u8FF0 */\n  custom_description?: string | null\n}\n\n/**\n * \u6EE1\u8D60\u9636\u68AF\u4EA7\u54C1\u9879\n */\nexport interface GiftTierProduct {\n  /** \u4EF7\u503C\u5355\u4F4D\uFF08\u5982 \"Value\"\uFF09 */\n  valueUnit?: string\n}\n\n/**\n * \u6EE1\u8D60\u9636\u68AF\u9879\n */\nexport interface GiftTierItem {\n  /** \u9636\u68AF\u95E8\u69DB\u6587\u672C\uFF08\u5982 \"Order Over $3,000\"\uFF09 */\n  threshold: string\n  /** \u8BE5\u9636\u68AF\u5BF9\u5E94\u7684\u4EA7\u54C1 */\n  products: GiftShelfProduct[]\n  /** \u662F\u5426\u663E\u793A\u4F1A\u5458\u6807\u7B7E */\n  showMemberTag?: boolean\n  /** \u4F1A\u5458\u6807\u7B7E\u56FE\u7247 */\n  memberTagImage?: Media\n  /** \u4EF7\u503C\u5355\u4F4D\uFF08\u5982 \"Value\"\uFF09 */\n  valueUnit?: string\n}\n\n/**\n * \u6EE1\u8D60\u8D27\u67B6\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface GiftTierShelfData {\n  /** \u9636\u68AF\u9879\u5217\u8868 */\n  items: GiftTierItem[]\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n  /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74 */\n  showTimeline?: boolean\n}\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\nexport type GiftTierShelfSemanticName = 'root' | 'card' | 'timeline' | 'thresholdText'\n\n/**\n * \u6EE1\u8D60\u8D27\u67B6\u7EC4\u4EF6 Props\n */\nexport interface GiftTierShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: GiftTierShelfData\n  /** \u6784\u5EFA\u65F6\u6570\u636E\uFF08\u4EA7\u54C1\u5217\u8868\u7B49\uFF09 */\n  buildData?: {\n    products: Product[]\n  }\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<GiftTierShelfSemanticName, string>>\n  /** \u5361\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onCardClick?: (item: GiftTierItem, index: number) => void\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var xe=Object.create;var B=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var ke=(t,r)=>{for(var n in r)B(t,n,{get:r[n],enumerable:!0})},O=(t,r,n,N)=>{if(r&&typeof r=="object"||typeof r=="function")for(let g of ye(r))!we.call(t,g)&&g!==n&&B(t,g,{get:()=>r[g],enumerable:!(N=he(r,g))||N.enumerable});return t};var M=(t,r,n)=>(n=t!=null?xe(ve(t)):{},O(r||!t||!t.__esModule?B(n,"default",{value:t,enumerable:!0}):n,t)),Ne=t=>O(B({},"__esModule",{value:!0}),t);var Ie={};ke(Ie,{default:()=>Te});module.exports=Ne(Ie);var e=require("react/jsx-runtime"),o=M(require("react")),v=M(require("gsap")),w=require("gsap/dist/ScrollTrigger"),D=require("react-responsive"),X=require("react-intersection-observer"),Y=M(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),c=require("../../helpers/index.js"),k=require("class-variance-authority"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js"),ae=require("../../helpers/utils.js"),re=require("../AiuiProvider/index.js"),oe=require("../../components/button.js"),le=require("../VideoModal/index.js");const m="image",d="hero_banner",$e=(0,k.cva)("hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]",center:"left-1/2 -translate-x-1/2 items-center text-center"}},defaultVariants:{align:"left"}}),Be=(0,k.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Ve=(0,k.cva)("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),ze=(0,k.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),He=({size:t="base"})=>{const{width:r,height:n}=oe.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:n,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},W=o.default.forwardRef(({data:t,className:r,classNames:n={},onSecondaryClick:N,onPrimaryClick:g,...ne},se)=>{const{locale:E}=(0,re.useAiuiContext)(),z=a=>!a||!E?a:(0,ae.getLocalizedPath)(a,E),{label:j,title:i,subtitle:p,endDate:U,endDate_tz:ie,dateFormat:pe,pcImage:H,padImage:_,mobileImage:$,pcVideo:ce,padVideo:ue,mobileVideo:G,isShowVideo:me,isVideoLoop:de=!0,primaryButton:u,secondaryButton:s,theme:ge="light",size:T="default",titleSize:I,caption:C=[],blockLink:F,iconArray:fe,align:b="left"}=t,A=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),q=(0,D.useMediaQuery)({query:"(max-width: 1024px)"}),[Q,Z]=(0,o.useState)(!1),{ref:be,inView:J}=(0,X.useInView)(),P=(0,o.useRef)(null),S=(0,o.useRef)(null),R=(0,o.useRef)(null),x=(0,o.useRef)(null),f=(0,o.useRef)(null);return(0,te.useExposure)(f,{componentType:m,componentName:d,componentTitle:i,componentDescription:p}),(0,o.useImperativeHandle)(se,()=>f.current),(0,o.useEffect)(()=>{v.default.registerPlugin(w.ScrollTrigger);function a(){if(!x.current)return;const L=f.current?.clientHeight||100;window.innerHeight<=L?P.current=w.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*40-20;v.default.set(x.current,{yPercent:y})}}):(R.current=w.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const y=h.progress*20-20;v.default.set(x.current,{yPercent:y})}}),S.current=w.ScrollTrigger.create({trigger:f.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*20;v.default.set(x.current,{yPercent:y})}}))}return J&&a(),()=>{P.current&&P.current.kill(),R.current&&R.current.kill(),S.current&&S.current.kill()}},[J]),(0,e.jsx)("div",{...ne,ref:be,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:f,className:(0,c.cn)(ge==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":T==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":T==="sm"},r),children:[F&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,V.trackUrlRef)(z(F),`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}`,tabIndex:-1,"aria-hidden":"true","aria-label":i}),(0,e.jsx)("div",{ref:x,className:(0,c.cn)("absolute left-0 top-0 size-full"),children:me?(0,e.jsx)(Y.default,{poster:A?$?.url:q?_?.url||$?.url:H?.url,src:A?G?.url:q?ue?.url||G?.url:ce?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:de,playsInline:!0}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:H?.alt||"",source:`${H?.url||""} , ${_?.url??($?.url||"")} 1024, ${$?.url||""} 767`})}),(0,e.jsxs)("div",{className:$e({align:b}),children:[(0,e.jsxs)("div",{className:Be({align:b}),children:[j&&(0,e.jsx)(l.Text,{size:2,as:"p",className:(0,c.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:j}),i&&(0,e.jsx)(l.Heading,{as:I==="4"?"h1":"h2",html:i,className:(0,c.cn)("hero-banner-title",n.title),size:I?Number(I||"5"):T==="sm"?4:5}),p&&(0,e.jsx)(l.Text,{as:"p",size:2,className:(0,c.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:p}),U&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(l.Countdown,{endDate:U,endDate_tz:ie,dateFormat:pe,variant:"spacious",align:b})})]}),(0,e.jsxs)("div",{className:Ve({align:b}),children:[s?.isShowPlayVideoButton&&s?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>Z(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${s?.playVideoButtonText}`,children:[s?.playVideoButtonText," ",(0,e.jsx)(He,{size:"lg"})]}):s?.text?(0,e.jsxs)(l.Button,{"aria-label":i??p,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:s?.isCustomSecondaryButton?"button":"a",href:(0,V.trackUrlRef)(z(s?.link),`${m}_${d}`),onClick:a=>s?.isCustomSecondaryButton&&N?.(t,a,s?.customSecondaryEventId),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${s?.text}`,children:[s?.text,(0,e.jsx)("span",{className:"sr-only",children:i??p})]}):null,u&&u.text&&(0,e.jsx)(l.Button,{"aria-label":i??p,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:u?.isCustomPrimaryButton?"button":"a",href:(0,V.trackUrlRef)(z(u.link),`${m}_${d}`),onClick:a=>u?.isCustomPrimaryButton&&g?.(t,a,u?.customPrimaryEventId),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${u?.text}`,children:u.text})]}),(0,e.jsx)("div",{className:ze({align:b}),children:fe?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),C.length>0&&(0,e.jsx)("div",{className:(0,c.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",n.captionGroup),children:C.map((a,L)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,c.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:a.title}),L<C.length-1&&(0,e.jsx)("div",{className:(0,c.cn)("bg-info-primary w-px")})]},a.title))}),Q&&(0,e.jsx)(le.VideoModal,{visible:Q,videoUrl:s?.videoUrl?.url,youTubeId:s?.youtubeId,onCloseModal:()=>Z(!1)})]})})});W.displayName="HeroBanner";var Te=(0,ee.withLayout)(W);
+"use strict";"use client";var xe=Object.create;var V=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var ke=(t,r)=>{for(var s in r)V(t,s,{get:r[s],enumerable:!0})},K=(t,r,s,N)=>{if(r&&typeof r=="object"||typeof r=="function")for(let g of ye(r))!we.call(t,g)&&g!==s&&V(t,g,{get:()=>r[g],enumerable:!(N=he(r,g))||N.enumerable});return t};var M=(t,r,s)=>(s=t!=null?xe(ve(t)):{},K(r||!t||!t.__esModule?V(s,"default",{value:t,enumerable:!0}):s,t)),Ne=t=>K(V({},"__esModule",{value:!0}),t);var Ie={};ke(Ie,{default:()=>Te});module.exports=Ne(Ie);var e=require("react/jsx-runtime"),l=M(require("react")),v=M(require("gsap")),w=require("gsap/dist/ScrollTrigger"),D=require("react-responsive"),W=require("react-intersection-observer"),X=M(require("../../helpers/ScrollLoadVideo.js")),n=require("../../components/index.js"),c=require("../../helpers/index.js"),k=require("class-variance-authority"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),B=require("../../shared/trackUrlRef.js"),ae=require("../../helpers/utils.js"),re=require("../AiuiProvider/index.js"),oe=require("../../components/button.js"),le=require("../VideoModal/index.js");const m="image",d="hero_banner",$e=(0,k.cva)("hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]",center:"left-1/2 -translate-x-1/2 items-center text-center"}},defaultVariants:{align:"left"}}),Ve=(0,k.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Be=(0,k.cva)("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),ze=(0,k.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),He=({size:t="base"})=>{const{width:r,height:s}=oe.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},O=l.default.forwardRef(({data:t,className:r,classNames:s={},onSecondaryClick:N,onPrimaryClick:g,...ne},se)=>{const{locale:E}=(0,re.useAiuiContext)(),z=a=>!a||!E?a:(0,ae.getLocalizedPath)(a,E),{label:j,title:i,subtitle:p,endDate:U,endDate_tz:ie,dateFormat:pe,pcImage:H,padImage:_,mobileImage:$,pcVideo:ce,padVideo:ue,mobileVideo:G,isShowVideo:me,isVideoLoop:de=!0,primaryButton:u,secondaryButton:o,theme:ge="light",size:T="default",titleSize:I,caption:C=[],blockLink:F,iconArray:fe,align:b="left"}=t,A=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),q=(0,D.useMediaQuery)({query:"(max-width: 1024px)"}),[Y,Q]=(0,l.useState)(!1),{ref:be,inView:Z}=(0,W.useInView)(),P=(0,l.useRef)(null),S=(0,l.useRef)(null),R=(0,l.useRef)(null),x=(0,l.useRef)(null),f=(0,l.useRef)(null);return(0,te.useExposure)(f,{componentType:m,componentName:d,componentTitle:i,componentDescription:p}),(0,l.useImperativeHandle)(se,()=>f.current),(0,l.useEffect)(()=>{v.default.registerPlugin(w.ScrollTrigger);function a(){if(!x.current)return;const L=f.current?.clientHeight||100;window.innerHeight<=L?P.current=w.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*40-20;v.default.set(x.current,{yPercent:y})}}):(R.current=w.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const y=h.progress*20-20;v.default.set(x.current,{yPercent:y})}}),S.current=w.ScrollTrigger.create({trigger:f.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const y=h.progress*20;v.default.set(x.current,{yPercent:y})}}))}return Z&&a(),()=>{P.current&&P.current.kill(),R.current&&R.current.kill(),S.current&&S.current.kill()}},[Z]),(0,e.jsx)("div",{...ne,ref:be,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:f,className:(0,c.cn)(ge==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":T==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":T==="sm"},r),children:[F&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,B.trackUrlRef)(z(F),`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}`,tabIndex:-1,"aria-hidden":"true","aria-label":i}),(0,e.jsx)("div",{ref:x,className:(0,c.cn)("absolute left-0 top-0 size-full"),children:me?(0,e.jsx)(X.default,{poster:A?$?.url:q?_?.url||$?.url:H?.url,src:A?G?.url:q?ue?.url||G?.url:ce?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:de,playsInline:!0}):(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:H?.alt||"",source:`${H?.url||""} , ${_?.url??($?.url||"")} 1024, ${$?.url||""} 767`})}),(0,e.jsxs)("div",{className:$e({align:b}),children:[(0,e.jsxs)("div",{className:Ve({align:b}),children:[j&&(0,e.jsx)(n.Text,{size:2,as:"p",className:(0,c.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:j}),i&&(0,e.jsx)(n.Heading,{as:I==="4"?"h1":"h2",html:i,className:(0,c.cn)("hero-banner-title",s.title),size:I?Number(I||"5"):T==="sm"?4:5}),p&&(0,e.jsx)(n.Text,{as:"p",size:2,className:(0,c.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:p}),U&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(n.Countdown,{endDate:U,endDate_tz:ie,dateFormat:pe,variant:"spacious",align:b})})]}),(0,e.jsxs)("div",{className:Be({align:b}),children:[o?.isShowPlayVideoButton&&o?.playVideoButtonText?(0,e.jsxs)(n.Button,{onClick:()=>Q(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${o?.playVideoButtonText}`,children:[o?.playVideoButtonText," ",(0,e.jsx)(He,{size:"lg"})]}):o?.text?(0,e.jsxs)(n.Button,{"aria-label":i??p,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:o?.isCustomSecondaryButton?"button":"a",href:(0,B.trackUrlRef)(z(o?.link),`${m}_${d}`),onClick:a=>o?.isCustomSecondaryButton&&N?.(t,a,o?.customSecondaryEventId),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${o?.text}`,children:[o?.text,(0,e.jsx)("span",{className:"sr-only",children:i??p})]}):null,u&&u.text&&(0,e.jsx)(n.Button,{"aria-label":i??p,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:u?.isCustomPrimaryButton?"button":"a",href:(0,B.trackUrlRef)(z(u.link),`${m}_${d}`),onClick:a=>u?.isCustomPrimaryButton&&g?.(t,a,u?.customPrimaryEventId),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${i}#${p}#${u?.text}`,children:u.text})]}),(0,e.jsx)("div",{className:ze({align:b}),children:fe?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),C.length>0&&(0,e.jsx)("div",{className:(0,c.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",s.captionGroup),children:C.map((a,L)=>(0,e.jsxs)(l.default.Fragment,{children:[(0,e.jsx)(n.Text,{size:2,className:(0,c.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:a.title}),L<C.length-1&&(0,e.jsx)("div",{className:(0,c.cn)("bg-info-primary w-px")})]},a.title))}),Y&&(0,e.jsx)(le.VideoModal,{visible:Y,videoUrl:o?.isYoutubeVideo?void 0:o?.videoUrl?.url,youTubeId:o?.isYoutubeVideo?o?.youtubeId:void 0,onCloseModal:()=>Q(!1)})]})})});O.displayName="HeroBanner";var Te=(0,ee.withLayout)(O);
 //# sourceMappingURL=HeroBanner.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n  'hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n  {\n    variants: {\n      align: {\n        left: 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]',\n        center: 'left-1/2 -translate-x-1/2 items-center text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst textVariants = cva(\n  'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n  {\n    variants: {\n      align: {\n        left: 'laptop:text-left',\n        center: 'text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'laptop:justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, ...rest }, ref) => {\n  const { locale } = useAiuiContext()\n\n  // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n  const localizeUrl = (url?: string) => {\n    if (!url || !locale) return url\n    return getLocalizedPath(url, locale)\n  }\n\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    isVideoLoop = true,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    titleSize,\n    caption = [],\n    blockLink,\n    iconArray,\n    align = 'left',\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary relative  w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n              size === 'default',\n            'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n              size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop={isVideoLoop}\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className={contentVariants({ align })}>\n          <div className={textVariants({ align })}>\n            {label && (\n              <Text\n                size={2}\n                as=\"p\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as={titleSize === '4' ? 'h1' : 'h2'}\n                html={title}\n                className={cn('hero-banner-title', classNames.title)}\n                size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n              />\n            )}\n            {subtitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown\n                  endDate={endDate}\n                  endDate_tz={endDate_tz}\n                  dateFormat={dateFormat}\n                  variant=\"spacious\"\n                  align={align}\n                />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className={buttonGroupVariants({ align })}>\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  secondaryButton?.isCustomSecondaryButton &&\n                  onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className={iconGroupVariants({ align })}>\n            {iconArray?.map(icon => (\n              <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={c.title}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n  'hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n  {\n    variants: {\n      align: {\n        left: 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]',\n        center: 'left-1/2 -translate-x-1/2 items-center text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst textVariants = cva(\n  'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n  {\n    variants: {\n      align: {\n        left: 'laptop:text-left',\n        center: 'text-center',\n      },\n    },\n    defaultVariants: {\n      align: 'left',\n    },\n  }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'laptop:justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n  variants: {\n    align: {\n      left: 'justify-start',\n      center: 'justify-center',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n  },\n})\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, ...rest }, ref) => {\n  const { locale } = useAiuiContext()\n\n  // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n  const localizeUrl = (url?: string) => {\n    if (!url || !locale) return url\n    return getLocalizedPath(url, locale)\n  }\n\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    isVideoLoop = true,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    titleSize,\n    caption = [],\n    blockLink,\n    iconArray,\n    align = 'left',\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary relative  w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n              size === 'default',\n            'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n              size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(localizeUrl(blockLink), `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop={isVideoLoop}\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className={contentVariants({ align })}>\n          <div className={textVariants({ align })}>\n            {label && (\n              <Text\n                size={2}\n                as=\"p\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as={titleSize === '4' ? 'h1' : 'h2'}\n                html={title}\n                className={cn('hero-banner-title', classNames.title)}\n                size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n              />\n            )}\n            {subtitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown\n                  endDate={endDate}\n                  endDate_tz={endDate_tz}\n                  dateFormat={dateFormat}\n                  variant=\"spacious\"\n                  align={align}\n                />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className={buttonGroupVariants({ align })}>\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  secondaryButton?.isCustomSecondaryButton &&\n                  onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n                onClick={e =>\n                  primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n                }\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className={iconGroupVariants({ align })}>\n            {iconArray?.map(icon => (\n              <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={c.title}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
   "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_class_variance_authority", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_utils", "import_AiuiProvider", "import_button", "import_VideoModal", "componentType", "componentName", "contentVariants", "textVariants", "buttonGroupVariants", "iconGroupVariants", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "rest", "ref", "locale", "localizeUrl", "url", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "align", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "e", "icon", "c", "index"]
 }

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

@@ -43,6 +43,8 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
             playIcon?: boolean;
             videoUrl?: Media;
             youtubeId?: string;
+            /** 是否为YouTube视频，true时播放YouTube视频（需要youtubeId），false时播放原生video（需要isShowPlayVideoButton为true且videoUrl.url存在） */
+            isYoutubeVideo?: boolean;
             isCustomSecondaryButton?: boolean;
             /** 自定义事件ID，传递给 onSecondaryClick */
             customSecondaryEventId?: string;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/types.ts"],
-  "sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\ntype TitleSizeType = '5' | '4' | '3' | '2' | '1'\nexport interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  data: {\n    /** \u6807\u7B7E */\n    label?: string\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n    subtitle: string\n    /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n    endDate?: string\n    /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n    endDate_tz?: string\n    dateFormat?: string\n    /** \u56FE\u6807\u5217\u8868 */\n    iconArray?: Array<any>\n    pcImage: Media\n    padImage?: Media\n    mobileImage: Media\n    pcVideo?: Media\n    padVideo?: Media\n    mobileVideo?: Media\n    isShowVideo?: boolean\n    /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n    isVideoLoop?: boolean\n    blockLink?: string\n    /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    primaryButton?: {\n      text: string\n      link?: string\n      isCustomPrimaryButton?: boolean\n      /** \u81EA\u5B9A\u4E49\u4E8B\u4EF6ID\uFF0C\u4F20\u9012\u7ED9 onPrimaryClick */\n      customPrimaryEventId?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    secondaryButton?: {\n      text: string\n      link?: string\n      isShowPlayVideoButton?: boolean\n      playVideoButtonText?: string\n      playIcon?: boolean\n      videoUrl?: Media\n      youtubeId?: string\n      isCustomSecondaryButton?: boolean\n      /** \u81EA\u5B9A\u4E49\u4E8B\u4EF6ID\uFF0C\u4F20\u9012\u7ED9 onSecondaryClick */\n      customSecondaryEventId?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u4E3B\u9898 */\n    theme?: Theme\n    /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n    size?: 'default' | 'sm'\n    titleSize?: TitleSizeType\n    /** \u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F */\n    align?: 'left' | 'center'\n    /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n    caption?: Array<{\n      title: string\n    }>\n  }\n  onSecondaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void\n  onPrimaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void\n}\n"],
+  "sourcesContent": ["import type { ButtonProps } from '../../components/button.js'\nimport type { Media, Theme } from '../../types/props.js'\n\ntype TitleSizeType = '5' | '4' | '3' | '2' | '1'\nexport interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  data: {\n    /** \u6807\u7B7E */\n    label?: string\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u672C */\n    subtitle: string\n    /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n    endDate?: string\n    /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n    endDate_tz?: string\n    dateFormat?: string\n    /** \u56FE\u6807\u5217\u8868 */\n    iconArray?: Array<any>\n    pcImage: Media\n    padImage?: Media\n    mobileImage: Media\n    pcVideo?: Media\n    padVideo?: Media\n    mobileVideo?: Media\n    isShowVideo?: boolean\n    /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n    isVideoLoop?: boolean\n    blockLink?: string\n    /** \u4E3B\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    primaryButton?: {\n      text: string\n      link?: string\n      isCustomPrimaryButton?: boolean\n      /** \u81EA\u5B9A\u4E49\u4E8B\u4EF6ID\uFF0C\u4F20\u9012\u7ED9 onPrimaryClick */\n      customPrimaryEventId?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u6B21\u8981\u6309\u94AE\u6587\u672C\u548C\u914D\u7F6E */\n    secondaryButton?: {\n      text: string\n      link?: string\n      isShowPlayVideoButton?: boolean\n      playVideoButtonText?: string\n      playIcon?: boolean\n      videoUrl?: Media\n      youtubeId?: string\n      /** \u662F\u5426\u4E3AYouTube\u89C6\u9891\uFF0Ctrue\u65F6\u64AD\u653EYouTube\u89C6\u9891\uFF08\u9700\u8981youtubeId\uFF09\uFF0Cfalse\u65F6\u64AD\u653E\u539F\u751Fvideo\uFF08\u9700\u8981isShowPlayVideoButton\u4E3Atrue\u4E14videoUrl.url\u5B58\u5728\uFF09 */\n      isYoutubeVideo?: boolean\n      isCustomSecondaryButton?: boolean\n      /** \u81EA\u5B9A\u4E49\u4E8B\u4EF6ID\uFF0C\u4F20\u9012\u7ED9 onSecondaryClick */\n      customSecondaryEventId?: string\n    } & Omit<ButtonProps, 'children'>\n    /** \u4E3B\u9898 */\n    theme?: Theme\n    /** \u5927\u5C0F, \u9ED8\u8BA4default,\u5355banner, \u53EF\u9009sm, \u7528\u4E8E\u591Abanner\u573A\u666F */\n    size?: 'default' | 'sm'\n    titleSize?: TitleSizeType\n    /** \u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F */\n    align?: 'left' | 'center'\n    /** \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */\n    caption?: Array<{\n      title: string\n    }>\n  }\n  onSecondaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void\n  onPrimaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var ue=Object.create;var S=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var be=(n,p)=>{for(var g in p)S(n,g,{get:p[g],enumerable:!0})},U=(n,p,g,w)=>{if(p&&typeof p=="object"||typeof p=="function")for(let v of he(p))!ve.call(n,v)&&v!==g&&S(n,v,{get:()=>p[v],enumerable:!(w=fe(p,v))||w.enumerable});return n};var we=(n,p,g)=>(g=n!=null?ue(ge(n)):{},U(p||!n||!n.__esModule?S(g,"default",{value:n,enumerable:!0}):g,n)),_e=n=>U(S({},"__esModule",{value:!0}),n);var Te={};be(Te,{default:()=>Ne});module.exports=_e(Te);var e=require("react/jsx-runtime"),a=we(require("react")),r=require("../../components/index.js"),l=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),ae=require("../AiuiProvider/index.js"),y=require("framer-motion");const ye="image",ke="image_with_text",X=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=a.default.forwardRef(({data:n,className:p},g)=>{const{title:w,subtitle:v,desc:T,descIcon:M,image:k,padImage:z,mobileImage:E,theme:oe="dark",items:H=[],layout:le="left",mediaType:se="image",datalist:m=[],video:j,padVideo:R,mobVideo:W,button:b,textAlign:d="left"}=n,i=le,{locale:C="us"}=(0,ae.useAiuiContext)(),D=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(null),A=(0,a.useRef)(null),[u,re]=(0,a.useState)(0),q=(0,a.useRef)([]),[$,ne]=(0,a.useState)({left:0,width:0}),[_,B]=(0,a.useState)(""),[F,O]=(0,a.useState)(""),[Z,G]=(0,a.useState)(""),c=m.length>0,N=se==="video";(0,te.useExposure)(D,{componentType:ye,componentName:ke,componentTitle:w,componentDescription:v}),(0,a.useImperativeHandle)(g,()=>D.current),(0,a.useEffect)(()=>{if(m.length>0){const t=q.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;ne({left:s,width:o})}}},[u,m.length]);const[J,de]=(0,a.useState)(!1);(0,ie.useIntersectionObserverDelay)(A,{once:!0,threshold:.01,callback:()=>{de(!0)}}),(0,a.useEffect)(()=>{if(!J||!N)return;let t="",s="",o="";if(c&&m[u]){const f=m[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=j?.url||"",s=R?.url||t,o=W?.url||t;t&&B(t),s&&O(s),o&&G(o),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[J,N,c,u,m,j?.url,R?.url,W?.url]);const me=(t,s)=>{if(re(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),N&&c&&m[t]){const o=m[t];o.video?.url&&B(o.video.url),o.padVideo?.url&&O(o.padVideo.url),o.mobVideo?.url&&G(o.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},pe=()=>!V||!b?.text?null:(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":d==="center","flex justify-start":d==="left","laptop:hidden":i==="top"||i==="bottom"}),children:(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(b.link||"",C),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:X,children:b.text})}),x=H.length>0,V=!!b,K=()=>{if(c&&m[u]){const t=m[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return k?`${k?.url},${z?.url||k?.url} 1024, ${E?.url||k?.url} 768`:""},Q=()=>{if(c){const f=m[u],h=f.image?.url,ce=f.imgPad?.url||h,xe=f.imageMob?.url||h;return(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:F||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:Z||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=k?.url,s=z?.url||t,o=E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:F||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:Z||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:D,"data-ui-component-id":"ImageWithText",className:(0,l.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!c&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":oe==="dark"},p),children:[c&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":d==="left","text-center":d==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:w,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:T,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":d==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),m.map((t,s)=>(0,e.jsx)("div",{ref:o=>{q.current[s]=o},onClick:o=>me(s,o),className:(0,l.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!c&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":x,"items-start":d==="left","items-center":d==="center","text-left":d==="left","text-center":d==="center","laptop:order-1":i==="left"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__main-content",{"flex flex-col":V}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__header",{"items-end justify-between gap-16 hidden laptop:flex":(i==="top"||i==="bottom")&&b?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex flex-col",children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:w,className:(0,l.cn)("image-with-text__title",{"w-full":x,"text-left":x&&d==="left","text-center":x&&d==="center"})}),v&&(0,e.jsx)(r.Text,{as:"p",size:x?4:3,html:v,className:(0,l.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&d==="left","text-center":x&&d==="center"})})]}),(i==="top"||i==="bottom")&&b?.text&&(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(b.link||"",C),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:X,children:b.text})]}),!x&&(T||M)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[M&&(0,e.jsx)("img",{src:M,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),T&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:T,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:H.map((t,s)=>(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item",{"text-center":d==="center"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":d==="center","justify-start":d==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),pe()]}),(0,e.jsx)("div",{ref:A,className:(0,l.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:c?N?Q():(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:K(),alt:m[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},m[u].image?.url)}):N?Q():(0,e.jsx)(r.Picture,{source:K(),className:(0,l.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Ne=(0,ee.withLayout)(Y);
+"use strict";"use client";var ue=Object.create;var S=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var ge=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var be=(n,p)=>{for(var g in p)S(n,g,{get:p[g],enumerable:!0})},U=(n,p,g,w)=>{if(p&&typeof p=="object"||typeof p=="function")for(let v of he(p))!ve.call(n,v)&&v!==g&&S(n,v,{get:()=>p[v],enumerable:!(w=fe(p,v))||w.enumerable});return n};var we=(n,p,g)=>(g=n!=null?ue(ge(n)):{},U(p||!n||!n.__esModule?S(g,"default",{value:n,enumerable:!0}):g,n)),_e=n=>U(S({},"__esModule",{value:!0}),n);var Te={};be(Te,{default:()=>Ne});module.exports=_e(Te);var e=require("react/jsx-runtime"),a=we(require("react")),r=require("../../components/index.js"),l=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),ae=require("../AiuiProvider/index.js"),y=require("framer-motion");const ye="image",ke="image_with_text",X=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=a.default.forwardRef(({data:n,className:p},g)=>{const{title:w,subtitle:v,desc:T,descIcon:M,image:k,padImage:z,mobileImage:E,theme:oe="dark",items:H=[],layout:le="left",mediaType:se="image",datalist:d=[],video:j,padVideo:R,mobVideo:W,button:b,textAlign:m="left"}=n,i=le,{locale:C="us"}=(0,ae.useAiuiContext)(),D=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(null),A=(0,a.useRef)(null),[u,re]=(0,a.useState)(0),q=(0,a.useRef)([]),[$,ne]=(0,a.useState)({left:0,width:0}),[_,B]=(0,a.useState)(""),[F,O]=(0,a.useState)(""),[Z,G]=(0,a.useState)(""),c=d.length>0,N=se==="video";(0,te.useExposure)(D,{componentType:ye,componentName:ke,componentTitle:w,componentDescription:v}),(0,a.useImperativeHandle)(g,()=>D.current),(0,a.useEffect)(()=>{if(d.length>0){const t=q.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;ne({left:s,width:o})}}},[u,d.length]);const[J,me]=(0,a.useState)(!1);(0,ie.useIntersectionObserverDelay)(A,{once:!0,threshold:.01,callback:()=>{me(!0)}}),(0,a.useEffect)(()=>{if(!J||!N)return;let t="",s="",o="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=j?.url||"",s=R?.url||t,o=W?.url||t;t&&B(t),s&&O(s),o&&G(o),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[J,N,c,u,d,j?.url,R?.url,W?.url]);const de=(t,s)=>{if(re(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),N&&c&&d[t]){const o=d[t];o.video?.url&&B(o.video.url),o.padVideo?.url&&O(o.padVideo.url),o.mobVideo?.url&&G(o.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},pe=()=>!V||!b?.text?null:(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":m==="center","flex justify-start":m==="left","laptop:hidden":i==="top"||i==="bottom"}),children:(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(b.link||"",C),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:X,children:b.text})}),x=H.length>0,V=!!b,K=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return k?`${k?.url},${z?.url||k?.url} 1024, ${E?.url||k?.url} 768`:""},Q=()=>{if(c){const f=d[u],h=f.image?.url,ce=f.imgPad?.url||h,xe=f.imageMob?.url||h;return(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ce,src:F||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:Z||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=k?.url,s=z?.url||t,o=E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:_,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:F||_,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:Z||_,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:D,"data-ui-component-id":"ImageWithText",className:(0,l.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!c&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":oe==="dark"},p),children:[c&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":m==="left","text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:w,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:T,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":m==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:o=>{q.current[s]=o},onClick:o=>de(s,o),className:(0,l.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!c&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":x,"items-start":m==="left","items-center":m==="center","text-left":m==="left","text-center":m==="center","laptop:order-1":i==="left"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__main-content",{"flex flex-col":V}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&b?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex flex-col",children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:w,className:(0,l.cn)("image-with-text__title",{"w-full":x,"text-left":x&&m==="left","text-center":x&&m==="center"})}),v&&(0,e.jsx)(r.Text,{as:"p",size:x?4:3,html:v,className:(0,l.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&m==="left","text-center":x&&m==="center"})})]}),(i==="top"||i==="bottom")&&b?.text&&(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(b.link||"",C),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:X,children:b.text})]}),!x&&(T||M)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[M&&(0,e.jsx)("img",{src:M,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),T&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:T,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:H.map((t,s)=>(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item",{"text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":m==="center","justify-start":m==="left"}),children:[(0,e.jsx)(r.Picture,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),pe()]}),(0,e.jsx)("div",{ref:A,className:(0,l.cn)("image-with-text__media-wrapper",{"w-[60%] shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:c?N?Q():(0,e.jsx)(y.AnimatePresence,{mode:"wait",children:(0,e.jsx)(y.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:K(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):N?Q():(0,e.jsx)(r.Picture,{source:K(),className:(0,l.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Ne=(0,ee.withLayout)(Y);
 //# sourceMappingURL=ImageWithText.js.map