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

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

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

Files changed (323) hide show

package/dist/cjs/biz-components/ProductLottery/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductLottery/types.ts"],
-  "sourcesContent": ["/**\n * ProductLottery - \u4EA7\u54C1\u62BD\u5956\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n *\n * \u57FA\u4E8E\u5A92\u4F53\u5C55\u793A\uFF08\u56FE\u7247/\u89C6\u9891\uFF09\u7684\u62BD\u5956\u7EC4\u4EF6\uFF0C\u70B9\u51FB CTA \u6309\u94AE\u89E6\u53D1\u62BD\u5956\u3002\n * \u5171\u4EAB\u7C7B\u578B\u6765\u81EA LotteryShared/types.ts\u3002\n *\n * @module ProductLotteryTypes\n * @date 2026-04-07\n */\n\nimport type {\n  Prize,\n  WinnerModalConfig,\n  ShareModalConfig,\n  ChanceMethod,\n  WinningInfo,\n  RulesModalConfig,\n  ActionButtonConfig,\n  MyRewardsModalConfig,\n  ErrorModalConfig,\n  UserData,\n  ChanceMechanismType,\n  ChanceInputConfig,\n} from '../LotteryShared/types.js'\n\nimport type { Theme, Media } from '../../types/props.js'\n\n// Re-export shared types for convenience\nexport type { Theme, Media }\n\n// ============================================================================\n// \u5A92\u4F53\u914D\u7F6E\u7C7B\u578B\n// ============================================================================\n\n/**\n * \u5A92\u4F53\u914D\u7F6E\uFF08MediaConfig\uFF09\n *\n * \u7CBE\u786E\u5BF9\u9F50 CMS block \u5B57\u6BB5\u7ED3\u6784\uFF0C\u76F4\u63A5\u6620\u5C04\u65E0\u9700\u989D\u5916\u8F6C\u6362\u3002\n *\n * @example\n * ```tsx\n * // \u56FE\u7247\u6A21\u5F0F\uFF08\u54CD\u5E94\u5F0F\uFF09\n * const imageMedia: MediaConfig = {\n *   type: 'image',\n *   image:          { url: '/img/banner-sm.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageTablet:    { url: '/img/banner-md.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageLaptop:    { url: '/img/banner-lg.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageDesktop:   { url: '/img/banner-xl.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageLgDesktop: { url: '/img/banner-xxl.jpg', alt: 'Banner', thumbnailURL: '' },\n * }\n *\n * // \u89C6\u9891\u6A21\u5F0F\n * const videoMedia: MediaConfig = {\n *   type: 'video',\n *   video: {\n *     url: 'https://cdn.example.com/promo.mp4',\n *     alt: 'Product Lottery Video',\n *     thumbnailURL: 'https://cdn.example.com/poster.jpg',\n *     mimeType: 'video/mp4',\n *   },\n * }\n * ```\n */\nexport interface MediaConfig {\n  /** \u5A92\u4F53\u7C7B\u578B */\n  type: 'image' | 'video'\n\n  // \u2014\u2014 \u56FE\u7247\u5B57\u6BB5\uFF08type === 'image' \u65F6\u4F7F\u7528\uFF09\u2014\u2014\n\n  /** \u9ED8\u8BA4/\u79FB\u52A8\u7AEF\u56FE\u7247\uFF08<768px\uFF09 */\n  image?: Media\n  /** \u5E73\u677F\u7AEF\u56FE\u7247\uFF08\u2265768px\uFF09 */\n  imageTablet?: Media\n  /** \u5C0F\u684C\u9762\u56FE\u7247\uFF08\u22651025px\uFF09 */\n  imageLaptop?: Media\n  /** \u5927\u684C\u9762\u56FE\u7247\uFF08\u22651440px\uFF09 */\n  imageDesktop?: Media\n  /** \u8D85\u5927\u5C4F\u56FE\u7247\uFF08\u22651920px\uFF09 */\n  imageLgDesktop?: Media\n\n  // \u2014\u2014 \u89C6\u9891\u5B57\u6BB5\uFF08type === 'video' \u65F6\u4F7F\u7528\uFF09\u2014\u2014\n\n  /** \u89C6\u9891\u5A92\u4F53\uFF08mimeType: 'video/mp4'\uFF0CthumbnailURL \u4F5C\u5C01\u9762\u56FE\uFF09 */\n  video?: Media\n}\n\n// ============================================================================\n// CTA \u6309\u94AE\u914D\u7F6E\n// ============================================================================\n\n/**\n * CTA \u6309\u94AE\u914D\u7F6E\uFF08CtaButtonConfig\uFF09\n *\n * \u914D\u7F6E\u8986\u76D6\u5728\u5A92\u4F53\u533A\u57DF\u4E0A\u7684\u884C\u52A8\u53F7\u53EC\u6309\u94AE\u3002\n *\n * @example\n * ```tsx\n * const ctaButton: CtaButtonConfig = {\n *   text: 'Join the Draw',\n *   style: 'primary',\n * }\n * ```\n */\nexport interface CtaButtonConfig {\n  /**\n   * \u6309\u94AE\u6587\u6848\n   * @default \"Join the Draw\"\n   * @optional\n   */\n  text?: string\n\n  /**\n   * \u6309\u94AE\u6837\u5F0F\n   * @default \"primary\"\n   * @optional\n   */\n  style?: 'primary' | 'secondary' | 'outline'\n}\n\n// ============================================================================\n// \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08CMS error group\uFF09\n// ============================================================================\n\n/**\n * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08ErrorConfig\uFF09\n *\n * \u5BF9\u9F50 CMS `error` group \u5B57\u6BB5\u7ED3\u6784\u3002\n *\n * CMS \u5B57\u6BB5\u6620\u5C04:\n * - `title`                  \u2192 \u5F39\u7A97\u6807\u9898\n * - `defaultMessage`         \u2192 \u9ED8\u8BA4\u9519\u8BEF\u5185\u5BB9\u6587\u6848\n * - `confirmButton`          \u2192 \u786E\u8BA4\u6309\u94AE\u6587\u6848\n * - `exchangeFailedTitle`    \u2192 \u5151\u6362\u5931\u8D25\u5F39\u7A97\u6807\u9898\n * - `exchangeFailedMessage`  \u2192 \u5151\u6362\u5931\u8D25\u5F39\u7A97\u5185\u5BB9\n */\nexport interface ErrorConfig {\n  title?: string\n  defaultMessage?: string\n  confirmButton?: string\n  exchangeFailedTitle?: string\n  exchangeFailedMessage?: string\n}\n\n// ============================================================================\n// \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS tryAgain group\uFF09\n// ============================================================================\n\n/**\n * \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08TryAgainConfig\uFF09\n *\n * \u5BF9\u9F50 CMS `tryAgain` group \u5B57\u6BB5\u7ED3\u6784\u3002\n *\n * CMS \u5B57\u6BB5\u6620\u5C04:\n * - `title`       \u2192 \u5F39\u7A97\u6807\u9898\n * - `message`     \u2192 \u5185\u5BB9\u6587\u6848\n * - `confirmText` \u2192 \u786E\u8BA4\u6309\u94AE\u6587\u6848\n */\nexport interface TryAgainConfig {\n  title?: string\n  message?: string\n  confirmText?: string\n}\n\n// ============================================================================\n// Imperative Handle \u63A5\u53E3\n// ============================================================================\n\n/**\n * ProductLottery \u7EC4\u4EF6\u547D\u4EE4\u5F0F\u63A7\u5236\u63A5\u53E3\n *\n * \u901A\u8FC7 ref \u66B4\u9732\u7ED9\u7236\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u5F39\u7A97\u7B49\u72B6\u6001\u3002\n * \u4E0E WheelLotteryHandle \u4FDD\u6301\u4E00\u81F4\u7684\u5F39\u7A97\u63A7\u5236\u65B9\u6CD5\u3002\n *\n * @example\n * ```tsx\n * const lotteryRef = useRef<ProductLotteryHandle>(null)\n *\n * <ProductLottery ref={lotteryRef} prizes={prizes} media={media} />\n *\n * // \u5916\u90E8\u89E6\u53D1\u9519\u8BEF\u5F39\u7A97\n * lotteryRef.current?.showError({\n *   title: 'Network Error',\n *   message: 'Failed to connect to server',\n *   confirmText: 'Retry'\n * })\n *\n * // \u663E\u793A\u89C4\u5219\u5F39\u7A97\n * lotteryRef.current?.showRules()\n *\n * // \u5173\u95ED\u6240\u6709\u5F39\u7A97\n * lotteryRef.current?.hideAllModals()\n * ```\n */\nexport interface ProductLotteryHandle {\n  /** \u663E\u793A\u9519\u8BEF\u5F39\u7A97 */\n  showError: (config: { message: string; title?: string; confirmText?: string }) => void\n\n  /** \u9690\u85CF\u9519\u8BEF\u5F39\u7A97 */\n  hideError: () => void\n\n  /** \u663E\u793A\u672A\u4E2D\u5956\u5F39\u7A97 */\n  showNoWin: (config?: { title?: string; message?: string; confirmText?: string }) => void\n\n  /** \u9690\u85CF\u672A\u4E2D\u5956\u5F39\u7A97 */\n  hideNoWin: () => void\n\n  /** \u663E\u793A\u4E2D\u5956\u5F39\u7A97 */\n  showWinner: (prize: Prize, config?: Partial<WinnerModalConfig>) => void\n\n  /** \u9690\u85CF\u4E2D\u5956\u5F39\u7A97 */\n  hideWinner: () => void\n\n  /** \u663E\u793A\u89C4\u5219\u5F39\u7A97 */\n  showRules: () => void\n\n  /** \u9690\u85CF\u89C4\u5219\u5F39\u7A97 */\n  hideRules: () => void\n\n  /** \u663E\u793A\u6211\u7684\u5956\u52B1\u5F39\u7A97 */\n  showRewards: () => void\n\n  /** \u9690\u85CF\u6211\u7684\u5956\u52B1\u5F39\u7A97 */\n  hideRewards: () => void\n\n  /** \u663E\u793A\u5206\u4EAB\u5F39\u7A97 */\n  showShare: (config?: Partial<ShareModalConfig>) => void\n\n  /** \u9690\u85CF\u5206\u4EAB\u5F39\u7A97 */\n  hideShare: () => void\n\n  /** \u5173\u95ED\u6240\u6709\u5F39\u7A97 */\n  hideAllModals: () => void\n}\n\n// ============================================================================\n// MediaDrawArea \u5B50\u7EC4\u4EF6 Props\n// ============================================================================\n\n/**\n * MediaDrawArea \u5B50\u7EC4\u4EF6 Props\n *\n * \u5A92\u4F53\u62BD\u5956\u533A\u57DF\uFF0C\u5C55\u793A\u56FE\u7247/\u89C6\u9891\u5E76\u53E0\u52A0 CTA \u6309\u94AE\u3002\n */\nexport interface MediaDrawAreaProps {\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: Theme\n\n  /** \u5A92\u4F53\u914D\u7F6E\uFF08\u5FC5\u9700\uFF09 */\n  media: MediaConfig\n\n  /** CTA \u6309\u9492\u914D\u7F6E */\n  ctaButton?: CtaButtonConfig\n\n  /**\n   * \u89C6\u9891\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5 mimeType='video/mp4' \u65F6\u6709\u6548\uFF09\n   * @default true\n   */\n  videoAutoPlay?: boolean\n\n  /**\n   * \u89C6\u9891\u9759\u97F3\uFF08\u4EC5 mimeType='video/mp4' \u65F6\u6709\u6548\uFF09\n   * @default true\n   */\n  videoMuted?: boolean\n\n  /**\n   * \u89C6\u9891\u5FAA\u73AF\uFF08\u4EC5 mimeType='video/mp4' \u65F6\u6709\u6548\uFF09\n   * @default true\n   */\n  videoLoop?: boolean\n\n  /** \u662F\u5426\u6B63\u5728\u62BD\u5956\u4E2D */\n  isDrawing?: boolean\n\n  /** \u662F\u5426\u7981\u7528\uFF08\u672A\u767B\u5F55\u6216\u65E0\u6B21\u6570\uFF09 */\n  isDisabled?: boolean\n\n  /** \u70B9\u51FB\u62BD\u5956\u56DE\u8C03 */\n  onClick: () => void\n\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n\n  /** \u70B9\u51FB\u8FFD\u8E2A\uFF1Adata-headless-type-name \u5C5E\u6027\u503C\uFF0C\u683C\u5F0F `{clickType}#{componentName}` */\n  ctaTrackTypeName?: string\n\n  /** \u70B9\u51FB\u8FFD\u8E2A\uFF1Adata-headless-title-desc-button \u5C5E\u6027\u503C\uFF0C\u683C\u5F0F `{title}#{desc}#{buttonName}` */\n  ctaTrackTitleDescButton?: string\n}\n\n// ============================================================================\n// \u4E3B\u7EC4\u4EF6 Props\n// ============================================================================\n\n/**\n * ProductLottery \u7EC4\u4EF6 Props\n *\n * \u57FA\u4E8E\u5A92\u4F53\u5C55\u793A\u7684\u4EA7\u54C1\u62BD\u5956\u7EC4\u4EF6\u3002\u5DE6\u4FA7\u4E3A\u53EF\u70B9\u51FB\u7684\u5A92\u4F53\u533A\u57DF\uFF08\u56FE\u7247/\u89C6\u9891\uFF09\uFF0C\n * \u53F3\u4FA7\u4E3A\u83B7\u53D6\u673A\u4F1A\u533A\u57DF\uFF0C\u5E95\u90E8\u4E3A\u5956\u54C1\u6C60\u3002\n *\n * @example\n * ```tsx\n * <ProductLottery\n *   prizes={prizes}\n *   media={{ type: 'image', src: '/banner.jpg', alt: 'Lottery' }}\n *   ctaButton={{ text: 'Draw Now' }}\n *   onDrawStart={async () => {\n *     const result = await fetch('/api/lottery')\n *     const data = await result.json()\n *     return data.prizeId\n *   }}\n *   onDrawEnd={(prize) => console.log('Won:', prize.name)}\n * />\n * ```\n */\nexport interface ProductLotteryProps {\n  // ========== \u5FC5\u9700 Props ==========\n\n  /**\n   * 8 \u4E2A\u5956\u54C1\u6570\u7EC4\uFF08\u5FC5\u9700\uFF09\n   * @minLength 8\n   * @maxLength 8\n   */\n  prizes: Prize[]\n\n  /**\n   * \u5A92\u4F53\u914D\u7F6E\uFF08\u5FC5\u9700\uFF09\n   * \u914D\u7F6E\u5DE6\u4FA7\u62BD\u5956\u533A\u57DF\u5C55\u793A\u7684\u56FE\u7247\u6216\u89C6\u9891\uFF0C\u65E0\u9700 type/src \u5305\u88C5\u5C42\n   */\n  media: MediaConfig\n\n  /**\n   * \u89C6\u9891\u81EA\u52A8\u64AD\u653E\uFF08\u5F53 media.mimeType === 'video/mp4' \u65F6\u751F\u6548\uFF09\n   * @default true\n   * @optional\n   */\n  videoAutoPlay?: boolean\n\n  /**\n   * \u89C6\u9891\u9759\u97F3\uFF08\u5F53 media.mimeType === 'video/mp4' \u65F6\u751F\u6548\uFF09\n   * @default true\n   * @optional\n   */\n  videoMuted?: boolean\n\n  /**\n   * \u89C6\u9891\u5FAA\u73AF\uFF08\u5F53 media.mimeType === 'video/mp4' \u65F6\u751F\u6548\uFF09\n   * @default true\n   * @optional\n   */\n  videoLoop?: boolean\n\n  // ========== \u4E3B\u9898\u548C\u6837\u5F0F ==========\n\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: Theme\n\n  /** CTA \u6309\u94AE\u914D\u7F6E */\n  ctaButton?: CtaButtonConfig\n\n  // ========== CMS \u9876\u5C42\u5B57\u6BB5 ==========\n\n  /**\n   * \u62BD\u5956\u6D3B\u52A8\u7C7B\u578B\uFF08CMS: `dealsType`\uFF09\n   * \u7528\u4E8E\u6807\u8BC6\u62BD\u5956\u6D3B\u52A8\u7684\u552F\u4E00\u7C7B\u578B\uFF0C\u5982\uFF1A`ipc-2614`\n   * @optional\n   */\n  dealsType?: string\n\n  // ========== \u83B7\u53D6\u673A\u4F1A\u533A\u57DF Props ==========\n\n  /**\n   * \u83B7\u53D6\u673A\u4F1A\u65B9\u5F0F\u6570\u7EC4\n   * @optional\n   */\n  chanceMethods?: ChanceMethod[]\n\n  /**\n   * \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u673A\u5236\u7C7B\u578B\n   * @default \"methods\"\n   * @optional\n   */\n  mechanismType?: ChanceMechanismType\n\n  // \u2500\u2500 CMS flat input fields\uFF08mechanismType='input' \u65F6\u4F7F\u7528\uFF09\u2500\u2500\n\n  /**\n   * \u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C\uFF08CMS: `inputPlaceholder`\uFF09\n   * @default \"Enter your order number\"\n   * @optional\n   */\n  inputPlaceholder?: string\n\n  /**\n   * \u63D0\u4EA4\u6309\u94AE\u6587\u6848\uFF08CMS: `inputSubmitText`\uFF09\n   * @default \"Spin and Win\"\n   * @optional\n   */\n  inputSubmitText?: string\n\n  /**\n   * \u8F93\u5165\u6846\u7C7B\u578B\uFF08CMS: `inputType`\uFF09\n   * @default \"text\"\n   * @optional\n   */\n  inputType?: 'text' | 'email' | 'number'\n\n  /**\n   * \u8F93\u5165\u683C\u5F0F\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF08CMS: `inputValidationErrorText`\uFF09\n   * @optional\n   */\n  inputValidationErrorText?: string\n\n  /**\n   * \u8F93\u5165\u6846\u914D\u7F6E\uFF08\u5F53 mechanismType \u4E3A 'input' \u65F6\u4F7F\u7528\uFF09\n   * @deprecated Use flat input fields (`inputPlaceholder`, `inputSubmitText`, `inputType`, `inputValidationErrorText`) instead (CMS field names)\n   * @optional\n   */\n  inputConfig?: ChanceInputConfig\n\n  /**\n   * \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u6807\u9898\n   * @default \"Want more chances to win?\"\n   * @optional\n   */\n  chanceTitle?: string\n\n  /** \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u526F\u6807\u9898 */\n  chanceSubtitle?: string\n\n  /** \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u5E95\u90E8\u63D0\u793A */\n  chanceFooterNote?: string\n\n  /** \u83B7\u53D6\u673A\u4F1A\u65B9\u5F0F\u6587\u6848\u914D\u7F6E */\n  chanceMethodsText?: {\n    chanceBadgeText?: string\n    completedText?: string\n    usedText?: string\n    loadingText?: string\n  }\n\n  // ========== \u4E2D\u5956\u4FE1\u606F Props ==========\n\n  /**\n   * \u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS: `winningInfos` group \u2014 \u4E3B\u540D\u79F0\uFF09\n   *\n   * CMS \u4E2D `winningInfos` \u662F\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E group\uFF0C\u5B57\u6BB5\uFF1A\n   * `title`\u3001`confirmButton`\u3001`confirmUrl`\u3001`learnMoreUrl`\u3001`learnMoreText`\u3002\n   */\n  winningInfos?: WinnerModalConfig\n\n  /**\n   * \u5E95\u90E8\u6EDA\u52A8\u6761\u4E2D\u5956\u4EBA\u540D\u5355\u6570\u636E\n   *\n   * \u539F `winningInfos: WinningInfo[]` \u91CD\u547D\u540D\u4E3A `winnerTickerData` \u4EE5\u907F\u514D\n   * \u4E0E CMS `winningInfos` group \u547D\u540D\u51B2\u7A81\u3002\n   *\n   * @default []\n   */\n  winnerTickerData?: WinningInfo[]\n\n  /**\n   * \u4E2D\u5956\u6EDA\u52A8 Ticker \u6587\u6848\u6A21\u677F\uFF0C\u652F\u6301 {{name}} \u548C {{prize}} \u53D8\u91CF\n   * @default \"{{name}} just won {{prize}}!\"\n   * @optional\n   */\n  winnerNameTemplate?: string\n\n  /** \u5956\u54C1\u6C60\u5C55\u793A\u533A\u57DF\u6807\u9898 */\n  prizesTitle?: string\n\n  // ========== \u56DE\u8C03\u51FD\u6570 Props ==========\n\n  /**\n   * \u62BD\u5956\u5F00\u59CB\u65F6\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE Promise \u4EE5\u652F\u6301\u5F02\u6B65\u63A5\u53E3\u8C03\u7528\n   * @returns Promise<string> - \u4E2D\u5956\u5956\u54C1\u7684 prizeKey\n   */\n  onDrawStart?: () => Promise<string>\n\n  /**\n   * \u62BD\u5956\u7ED3\u675F\u65F6\u7684\u56DE\u8C03\uFF0C\u4F20\u9012\u4E2D\u5956\u5956\u54C1\n   * @param prize \u4E2D\u5956\u5956\u54C1\u5BF9\u8C61\n   */\n  onDrawEnd?: (prize: Prize) => void\n\n  /**\n   * \u62BD\u5956\u9519\u8BEF\u65F6\u7684\u56DE\u8C03\n   * @param error \u9519\u8BEF\u4FE1\u606F\n   */\n  onDrawError?: (error: Error) => void\n\n  // ========== \u5F39\u7A97\u914D\u7F6E Props ==========\n\n  /** \u4E2D\u5956\u5F39\u7A97\u914D\u7F6E */\n  winnerModalConfig?: WinnerModalConfig\n\n  /** \u89C4\u5219\u5F39\u7A97\u914D\u7F6E */\n  rulesModalConfig?: RulesModalConfig\n\n  /** \u9876\u680F\u53F3\u4FA7\u8DF3\u8F6C\u6309\u94AE\u914D\u7F6E\uFF1B\u672A\u914D\u7F6E text \u6216 url \u65F6\u4E0D\u5C55\u793A */\n  actionButtonConfig?: ActionButtonConfig\n\n  /** \u6211\u7684\u5956\u52B1\u5F39\u7A97\u914D\u7F6E */\n  myRewardsModalConfig?: MyRewardsModalConfig\n\n  /**\n   * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08CMS: `error` group \u2014 \u4E3B\u540D\u79F0\uFF09\n   *\n   * \u5B57\u6BB5\uFF1A`title`\u3001`defaultMessage`\u3001`confirmButton`\u3001\n   * `exchangeFailedTitle`\u3001`exchangeFailedMessage`\u3002\n   */\n  error?: ErrorConfig\n\n  /**\n   * \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS: `tryAgain` group\uFF09\n   *\n   * \u5B57\u6BB5\uFF1A`title`\u3001`message`\u3001`confirmText`\u3002\n   */\n  tryAgain?: TryAgainConfig\n\n  /**\n   * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08\u65E7\u7248\uFF09\n   * @deprecated Use `error` instead (CMS field name)\n   */\n  errorModalConfig?: ErrorModalConfig\n\n  /** \u5206\u4EAB\u5F39\u7A97\u914D\u7F6E */\n  shareModalConfig?: ShareModalConfig\n\n  // ========== CMS \u5E73\u94FA\u6587\u6848\u5B57\u6BB5\uFF08\u4E3B\u540D\u79F0\uFF09==========\n\n  /**\n   * \u672A\u767B\u5F55\u65F6\u7684\u63D0\u793A\u6587\u6848\uFF08CMS: `loginPrompt`\uFF09\n   * @default \"Please log in to participate in the lottery\"\n   */\n  loginPrompt?: string\n\n  /**\n   * \u6B21\u6570\u4E0D\u8DB3\u65F6\u7684\u63D0\u793A\u6587\u6848\uFF08CMS: `noChances`\uFF09\n   * @default \"You have no chances left. Get more chances below!\"\n   */\n  noChances?: string\n\n  /**\n   * \u673A\u4F1A\u8FDB\u5EA6\u524D\u7F00\u6587\u6848\uFF08CMS: `opportunitiesPrefix`\uFF09\n   * @default \"Number of draws remaining today: \"\n   */\n  opportunitiesPrefix?: string\n\n  // ========== \u7528\u6237\u76F8\u5173 Props ==========\n\n  /** \u7528\u6237\u6570\u636E */\n  userData?: UserData\n\n  /**\n   * \u672A\u767B\u5F55\u65F6\u7684\u63D0\u793A\u6587\u6848\n   * @deprecated Use `loginPrompt` instead (CMS field name)\n   * @default \"Please log in to participate\"\n   */\n  loginPromptText?: string\n\n  /**\n   * \u767B\u5F55\u6309\u94AE\u6587\u6848\n   * @default \"Log In\"\n   */\n  loginButtonText?: string\n\n  /**\n   * \u6B21\u6570\u4E0D\u8DB3\u65F6\u7684\u63D0\u793A\u6587\u6848\n   * @deprecated Use `noChances` instead (CMS field name)\n   * @default \"You have no chances left\"\n   */\n  noChancesText?: string\n\n  /**\n   * \u672A\u767B\u5F55\u65F6\u70B9\u51FB\u62BD\u5956\u7684\u56DE\u8C03\n   */\n  onLoginRequired?: () => void\n\n  // ========== \u5176\u4ED6\u914D\u7F6E ==========\n\n  /** \u590D\u5236\u4F18\u60E0\u7801\u56DE\u8C03 */\n  onCopyCode?: (code: string) => void\n\n  /**\n   * \u673A\u4F1A\u8FDB\u5EA6\u6587\u6848\u6570\u7EC4\uFF08\u65E7\u7248\uFF0C\u9996\u5143\u7D20\u4E3A\u524D\u7F00\uFF0C\u6B21\u5143\u7D20\u4E3A\u540E\u7F00\uFF09\n   * @deprecated Use `opportunitiesPrefix` instead (CMS field name)\n   * @default [\"Number of draws remaining today:\"]\n   */\n  opportunitiesText?: string[]\n\n  /** \u81EA\u5B9A\u4E49 CSS \u7C7B\u540D */\n  className?: string\n}\n\n// ============================================================================\n// \u9ED8\u8BA4\u914D\u7F6E\n// ============================================================================\n\n/** \u9ED8\u8BA4 CTA \u6309\u94AE\u914D\u7F6E */\nexport const DEFAULT_CTA_BUTTON: CtaButtonConfig = {\n  text: '',\n  style: 'primary',\n}\n\n/** \u9ED8\u8BA4\u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u6807\u9898 */\nexport const DEFAULT_CHANCE_TITLE = 'Want more chances to win?'\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0BAAAE,EAAA,uBAAAC,IAAA,eAAAC,EAAAJ,GAwlBO,MAAMG,EAAsC,CACjD,KAAM,GACN,MAAO,SACT,EAGaD,EAAuB",
+  "sourcesContent": ["/**\n * ProductLottery - \u4EA7\u54C1\u62BD\u5956\u7EC4\u4EF6\u7C7B\u578B\u5B9A\u4E49\n *\n * \u57FA\u4E8E\u5A92\u4F53\u5C55\u793A\uFF08\u56FE\u7247/\u89C6\u9891\uFF09\u7684\u62BD\u5956\u7EC4\u4EF6\uFF0C\u70B9\u51FB CTA \u6309\u94AE\u89E6\u53D1\u62BD\u5956\u3002\n * \u5171\u4EAB\u7C7B\u578B\u6765\u81EA LotteryShared/types.ts\u3002\n *\n * ## CMS \u5951\u7EA6\u4F18\u5148\n *\n * \u672C\u6587\u4EF6\u4EE5 CMS block schema (`/src/blocks/ProductLottery/config.ts`) \u4F5C\u4E3A\n * \u9996\u8981\u6587\u6863\u5951\u7EA6\uFF0C\u5B57\u6BB5\u540D\u4E0E CMS \u5BF9\u9F50\u3002\u65E7\u7248\u5B57\u6BB5\u4FDD\u7559\u4F46\u6807\u6CE8 `@deprecated`\uFF0C\n * \u4EE5\u7EF4\u6301\u5411\u540E\u517C\u5BB9\u3002CMS \u7AEF\u5B57\u6BB5\u4F18\u5148\u7EA7\u9AD8\u4E8E\u540C\u4E49\u65E7\u7248\u5B57\u6BB5\u3002\n *\n * @module ProductLotteryTypes\n * @date 2026-04-07\n */\n\nimport type {\n  Prize,\n  WinnerModalConfig,\n  ShareModalConfig,\n  ChanceMethod,\n  WinningInfo,\n  RulesModalConfig,\n  ActionButtonConfig,\n  MyRewardsModalConfig,\n  ErrorModalConfig,\n  UserData,\n  ChanceMechanismType,\n  ChanceInputConfig,\n} from '../LotteryShared/types.js'\n\nimport type { Theme, Media } from '../../types/props.js'\n\n// Re-export shared types for convenience\nexport type { Theme, Media }\n\n// ============================================================================\n// \u5A92\u4F53\u914D\u7F6E\u7C7B\u578B\n// ============================================================================\n\n/**\n * \u5A92\u4F53\u914D\u7F6E\uFF08MediaConfig\uFF09\n *\n * \u7CBE\u786E\u5BF9\u9F50 CMS block \u5B57\u6BB5\u7ED3\u6784\uFF0C\u76F4\u63A5\u6620\u5C04\u65E0\u9700\u989D\u5916\u8F6C\u6362\u3002\n *\n * @example\n * ```tsx\n * // \u56FE\u7247\u6A21\u5F0F\uFF08\u54CD\u5E94\u5F0F\uFF09\n * const imageMedia: MediaConfig = {\n *   type: 'image',\n *   image:          { url: '/img/banner-sm.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageTablet:    { url: '/img/banner-md.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageLaptop:    { url: '/img/banner-lg.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageDesktop:   { url: '/img/banner-xl.jpg',  alt: 'Banner', thumbnailURL: '' },\n *   imageLgDesktop: { url: '/img/banner-xxl.jpg', alt: 'Banner', thumbnailURL: '' },\n * }\n *\n * // \u89C6\u9891\u6A21\u5F0F\n * const videoMedia: MediaConfig = {\n *   type: 'video',\n *   video: {\n *     url: 'https://cdn.example.com/promo.mp4',\n *     alt: 'Product Lottery Video',\n *     thumbnailURL: 'https://cdn.example.com/poster.jpg',\n *     mimeType: 'video/mp4',\n *   },\n * }\n * ```\n */\nexport interface MediaConfig {\n  /** \u5A92\u4F53\u7C7B\u578B */\n  type: 'image' | 'video'\n\n  // \u2014\u2014 \u56FE\u7247\u5B57\u6BB5\uFF08type === 'image' \u65F6\u4F7F\u7528\uFF09\u2014\u2014\n\n  /** \u9ED8\u8BA4/\u79FB\u52A8\u7AEF\u56FE\u7247\uFF08<768px\uFF09 */\n  image?: Media\n  /** \u5E73\u677F\u7AEF\u56FE\u7247\uFF08\u2265768px\uFF09 */\n  imageTablet?: Media\n  /** \u5C0F\u684C\u9762\u56FE\u7247\uFF08\u22651025px\uFF09 */\n  imageLaptop?: Media\n  /** \u5927\u684C\u9762\u56FE\u7247\uFF08\u22651440px\uFF09 */\n  imageDesktop?: Media\n  /** \u8D85\u5927\u5C4F\u56FE\u7247\uFF08\u22651920px\uFF09 */\n  imageLgDesktop?: Media\n\n  // \u2014\u2014 \u89C6\u9891\u5B57\u6BB5\uFF08type === 'video' \u65F6\u4F7F\u7528\uFF09\u2014\u2014\n\n  /** \u89C6\u9891\u5A92\u4F53\uFF08mimeType: 'video/mp4'\uFF0CthumbnailURL \u4F5C\u5C01\u9762\u56FE\uFF09 */\n  video?: Media\n}\n\n// ============================================================================\n// CTA \u6309\u94AE\u914D\u7F6E\n// ============================================================================\n\n/**\n * CTA \u6309\u94AE\u914D\u7F6E\uFF08CtaButtonConfig\uFF09\n *\n * \u914D\u7F6E\u8986\u76D6\u5728\u5A92\u4F53\u533A\u57DF\u4E0A\u7684\u884C\u52A8\u53F7\u53EC\u6309\u94AE\u3002\n *\n * @example\n * ```tsx\n * const ctaButton: CtaButtonConfig = {\n *   text: 'Join the Draw',\n *   style: 'primary',\n * }\n * ```\n */\nexport interface CtaButtonConfig {\n  /**\n   * \u6309\u94AE\u6587\u6848\n   * @default \"Join the Draw\"\n   * @optional\n   */\n  text?: string\n\n  /**\n   * \u6309\u94AE\u6837\u5F0F\n   * @default \"primary\"\n   * @optional\n   */\n  style?: 'primary' | 'secondary' | 'outline'\n}\n\n// ============================================================================\n// \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08CMS error group\uFF09\n// ============================================================================\n\n/**\n * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08ErrorConfig\uFF09\n *\n * \u5BF9\u9F50 CMS `error` group \u5B57\u6BB5\u7ED3\u6784\u3002\n *\n * CMS \u5B57\u6BB5\u6620\u5C04:\n * - `title`                  \u2192 \u5F39\u7A97\u6807\u9898\n * - `defaultMessage`         \u2192 \u9ED8\u8BA4\u9519\u8BEF\u5185\u5BB9\u6587\u6848\n * - `confirmButton`          \u2192 \u786E\u8BA4\u6309\u94AE\u6587\u6848\n * - `exchangeFailedTitle`    \u2192 \u5151\u6362\u5931\u8D25\u5F39\u7A97\u6807\u9898\n * - `exchangeFailedMessage`  \u2192 \u5151\u6362\u5931\u8D25\u5F39\u7A97\u5185\u5BB9\n */\nexport interface ErrorConfig {\n  title?: string\n  defaultMessage?: string\n  confirmButton?: string\n  exchangeFailedTitle?: string\n  exchangeFailedMessage?: string\n}\n\n// ============================================================================\n// \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS tryAgain group\uFF09\n// ============================================================================\n\n/**\n * \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08TryAgainConfig\uFF09\n *\n * \u5BF9\u9F50 CMS `tryAgain` group \u5B57\u6BB5\u7ED3\u6784\u3002\n *\n * CMS \u5B57\u6BB5\u6620\u5C04:\n * - `title`       \u2192 \u5F39\u7A97\u6807\u9898\n * - `message`     \u2192 \u5185\u5BB9\u6587\u6848\n * - `confirmText` \u2192 \u786E\u8BA4\u6309\u94AE\u6587\u6848\n */\nexport interface TryAgainConfig {\n  title?: string\n  message?: string\n  confirmText?: string\n}\n\n// ============================================================================\n// Imperative Handle \u63A5\u53E3\n// ============================================================================\n\n/**\n * ProductLottery \u7EC4\u4EF6\u547D\u4EE4\u5F0F\u63A7\u5236\u63A5\u53E3\n *\n * \u901A\u8FC7 ref \u66B4\u9732\u7ED9\u7236\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u5F39\u7A97\u7B49\u72B6\u6001\u3002\n * \u4E0E WheelLotteryHandle \u4FDD\u6301\u4E00\u81F4\u7684\u5F39\u7A97\u63A7\u5236\u65B9\u6CD5\u3002\n *\n * @example\n * ```tsx\n * const lotteryRef = useRef<ProductLotteryHandle>(null)\n *\n * <ProductLottery ref={lotteryRef} prizes={prizes} media={media} />\n *\n * // \u5916\u90E8\u89E6\u53D1\u9519\u8BEF\u5F39\u7A97\n * lotteryRef.current?.showError({\n *   title: 'Network Error',\n *   message: 'Failed to connect to server',\n *   confirmText: 'Retry'\n * })\n *\n * // \u663E\u793A\u89C4\u5219\u5F39\u7A97\n * lotteryRef.current?.showRules()\n *\n * // \u5173\u95ED\u6240\u6709\u5F39\u7A97\n * lotteryRef.current?.hideAllModals()\n * ```\n */\nexport interface ProductLotteryHandle {\n  /** \u663E\u793A\u9519\u8BEF\u5F39\u7A97 */\n  showError: (config: { message: string; title?: string; confirmText?: string }) => void\n\n  /** \u9690\u85CF\u9519\u8BEF\u5F39\u7A97 */\n  hideError: () => void\n\n  /** \u663E\u793A\u672A\u4E2D\u5956\u5F39\u7A97 */\n  showNoWin: (config?: { title?: string; message?: string; confirmText?: string }) => void\n\n  /** \u9690\u85CF\u672A\u4E2D\u5956\u5F39\u7A97 */\n  hideNoWin: () => void\n\n  /** \u663E\u793A\u4E2D\u5956\u5F39\u7A97 */\n  showWinner: (prize: Prize, config?: Partial<WinnerModalConfig>) => void\n\n  /** \u9690\u85CF\u4E2D\u5956\u5F39\u7A97 */\n  hideWinner: () => void\n\n  /** \u663E\u793A\u89C4\u5219\u5F39\u7A97 */\n  showRules: () => void\n\n  /** \u9690\u85CF\u89C4\u5219\u5F39\u7A97 */\n  hideRules: () => void\n\n  /** \u663E\u793A\u6211\u7684\u5956\u52B1\u5F39\u7A97 */\n  showRewards: () => void\n\n  /** \u9690\u85CF\u6211\u7684\u5956\u52B1\u5F39\u7A97 */\n  hideRewards: () => void\n\n  /** \u663E\u793A\u5206\u4EAB\u5F39\u7A97 */\n  showShare: (config?: Partial<ShareModalConfig>) => void\n\n  /** \u9690\u85CF\u5206\u4EAB\u5F39\u7A97 */\n  hideShare: () => void\n\n  /** \u5173\u95ED\u6240\u6709\u5F39\u7A97 */\n  hideAllModals: () => void\n}\n\n// ============================================================================\n// \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08CMS error group\uFF09\n// ============================================================================\n\n/**\n * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08ErrorConfig\uFF09\n *\n * \u5BF9\u9F50 CMS `error` group \u5B57\u6BB5\u7ED3\u6784\u3002\u65B0\u4EE3\u7801\u4F7F\u7528\u6B64\u7C7B\u578B\uFF1B\n * `errorModalConfig`\uFF08`ErrorModalConfig`\uFF09\u5DF2\u5E9F\u5F03\uFF0C\u4FDD\u7559\u4EC5\u4F9B\u8FC7\u6E21\u671F\u4F7F\u7528\u3002\n *\n * CMS \u5B57\u6BB5\u6620\u5C04:\n * - `title`                 \u2192 \u9519\u8BEF\u6807\u9898\n * - `defaultMessage`        \u2192 \u9ED8\u8BA4\u9519\u8BEF\u6D88\u606F\uFF08\u5BF9\u5E94\u6E32\u67D3\u5C42\u7684 `message`\uFF09\n * - `confirmButton`         \u2192 \u786E\u8BA4\u6309\u94AE\u6587\u6848\uFF08\u5BF9\u5E94\u6E32\u67D3\u5C42\u7684 `confirmText`\uFF09\n * - `exchangeFailedTitle`   \u2192 \u5151\u6362\u5931\u8D25\u6807\u9898\n * - `exchangeFailedMessage` \u2192 \u5151\u6362\u5931\u8D25\u6D88\u606F\n */\nexport interface ErrorConfig {\n  title?: string\n  defaultMessage?: string\n  confirmButton?: string\n  exchangeFailedTitle?: string\n  exchangeFailedMessage?: string\n}\n\n// ============================================================================\n// \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS tryAgain group\uFF09\n// ============================================================================\n\n/**\n * \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08TryAgainConfig\uFF09\n *\n * \u5BF9\u9F50 CMS `tryAgain` group \u5B57\u6BB5\u7ED3\u6784\u3002\n *\n * CMS \u5B57\u6BB5\u6620\u5C04:\n * - `title`       \u2192 \u5F39\u7A97\u6807\u9898\n * - `message`     \u2192 \u5185\u5BB9\u6587\u6848\n * - `confirmText` \u2192 \u786E\u8BA4\u6309\u94AE\u6587\u6848\n */\nexport interface TryAgainConfig {\n  title?: string\n  message?: string\n  confirmText?: string\n}\n\n// ============================================================================\n// MediaDrawArea \u5B50\u7EC4\u4EF6 Props\n// ============================================================================\n\n/**\n * MediaDrawArea \u5B50\u7EC4\u4EF6 Props\n *\n * \u5A92\u4F53\u62BD\u5956\u533A\u57DF\uFF0C\u5C55\u793A\u56FE\u7247/\u89C6\u9891\u5E76\u53E0\u52A0 CTA \u6309\u94AE\u3002\n * videoAutoPlay / videoMuted / videoLoop \u4E3A\u7EC4\u4EF6\u7EA7\u8FD0\u884C\u65F6\u63A7\u5236\uFF0CCMS \u4E0D\u914D\u7F6E\u3002\n */\nexport interface MediaDrawAreaProps {\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: Theme\n\n  /** \u5A92\u4F53\u914D\u7F6E\uFF08\u5FC5\u9700\uFF09 */\n  media: MediaConfig\n\n  /** CTA \u6309\u9492\u914D\u7F6E */\n  ctaButton?: CtaButtonConfig\n\n  /**\n   * \u89C6\u9891\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5 mimeType='video/mp4' \u65F6\u6709\u6548\uFF09\n   * @default true\n   */\n  videoAutoPlay?: boolean\n\n  /**\n   * \u89C6\u9891\u9759\u97F3\uFF08\u4EC5 mimeType='video/mp4' \u65F6\u6709\u6548\uFF09\n   * @default true\n   */\n  videoMuted?: boolean\n\n  /**\n   * \u89C6\u9891\u5FAA\u73AF\uFF08\u4EC5 mimeType='video/mp4' \u65F6\u6709\u6548\uFF09\n   * @default true\n   */\n  videoLoop?: boolean\n\n  /** \u662F\u5426\u6B63\u5728\u62BD\u5956\u4E2D */\n  isDrawing?: boolean\n\n  /** \u662F\u5426\u7981\u7528\uFF08\u672A\u767B\u5F55\u6216\u65E0\u6B21\u6570\uFF09 */\n  isDisabled?: boolean\n\n  /** \u70B9\u51FB\u62BD\u5956\u56DE\u8C03 */\n  onClick: () => void\n\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n\n  /** \u70B9\u51FB\u8FFD\u8E2A\uFF1Adata-headless-type-name \u5C5E\u6027\u503C\uFF0C\u683C\u5F0F `{clickType}#{componentName}` */\n  ctaTrackTypeName?: string\n\n  /** \u70B9\u51FB\u8FFD\u8E2A\uFF1Adata-headless-title-desc-button \u5C5E\u6027\u503C\uFF0C\u683C\u5F0F `{title}#{desc}#{buttonName}` */\n  ctaTrackTitleDescButton?: string\n}\n\n// ============================================================================\n// \u4E3B\u7EC4\u4EF6 Props\n// ============================================================================\n\n/**\n * ProductLottery \u7EC4\u4EF6 Props\n *\n * \u57FA\u4E8E\u5A92\u4F53\u5C55\u793A\u7684\u4EA7\u54C1\u62BD\u5956\u7EC4\u4EF6\u3002\u5DE6\u4FA7\u4E3A\u53EF\u70B9\u51FB\u7684\u5A92\u4F53\u533A\u57DF\uFF08\u56FE\u7247/\u89C6\u9891\uFF09\uFF0C\n * \u53F3\u4FA7\u4E3A\u83B7\u53D6\u673A\u4F1A\u533A\u57DF\uFF0C\u5E95\u90E8\u4E3A\u5956\u54C1\u6C60\u3002\n *\n * ## \u5B57\u6BB5\u547D\u540D\u7B56\u7565\uFF08CMS-primary\uFF09\n *\n * \u672C\u63A5\u53E3\u4EE5 CMS block schema \u5B57\u6BB5\u540D\u4E3A\u4E3B\u540D\u79F0\u3002\u65E7\u7248\u547D\u540D\u4EE5 `@deprecated` \u6807\u8BB0\uFF0C\n * \u4FDD\u7559\u4EC5\u4F9B\u8FC7\u6E21\u671F\u4F7F\u7528\u3002\u5F53 CMS \u5B57\u6BB5\u4E0E\u65E7\u7248\u5B57\u6BB5\u540C\u65F6\u5B58\u5728\u65F6\uFF0CCMS \u5B57\u6BB5\u4F18\u5148\u3002\n *\n * @example\n * ```tsx\n * <ProductLottery\n *   prizes={prizes}\n *   media={{ type: 'image', image: { url: '/banner.jpg', alt: 'Lottery', thumbnailURL: '' } }}\n *   ctaButton={{ text: 'Draw Now' }}\n *   loginPrompt=\"Please sign in to join the draw\"\n *   onDrawStart={async () => {\n *     const result = await fetch('/api/lottery')\n *     const data = await result.json()\n *     return data.prizeId\n *   }}\n *   onDrawEnd={(prize) => console.log('Won:', prize.name)}\n * />\n * ```\n */\nexport interface ProductLotteryProps {\n  // ========== \u5FC5\u9700 Props ==========\n\n  /**\n   * 8 \u4E2A\u5956\u54C1\u6570\u7EC4\uFF08\u5FC5\u9700\uFF09\n   * @minLength 8\n   * @maxLength 8\n   */\n  prizes: Prize[]\n\n  /**\n   * \u5A92\u4F53\u914D\u7F6E\uFF08\u5FC5\u9700\uFF09\n   * \u914D\u7F6E\u5DE6\u4FA7\u62BD\u5956\u533A\u57DF\u5C55\u793A\u7684\u56FE\u7247\u6216\u89C6\u9891\uFF0C\u65E0\u9700 type/src \u5305\u88C5\u5C42\n   */\n  media: MediaConfig\n\n  /**\n   * \u89C6\u9891\u81EA\u52A8\u64AD\u653E\uFF08\u5F53 media.mimeType === 'video/mp4' \u65F6\u751F\u6548\uFF09\n   * @default true\n   * @optional\n   */\n  videoAutoPlay?: boolean\n\n  /**\n   * \u89C6\u9891\u9759\u97F3\uFF08\u5F53 media.mimeType === 'video/mp4' \u65F6\u751F\u6548\uFF09\n   * @default true\n   * @optional\n   */\n  videoMuted?: boolean\n\n  /**\n   * \u89C6\u9891\u5FAA\u73AF\uFF08\u5F53 media.mimeType === 'video/mp4' \u65F6\u751F\u6548\uFF09\n   * @default true\n   * @optional\n   */\n  videoLoop?: boolean\n\n  // ========== \u4E3B\u9898\u548C\u6837\u5F0F ==========\n\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: Theme\n\n  /** CTA \u6309\u94AE\u914D\u7F6E */\n  ctaButton?: CtaButtonConfig\n\n  // ========== CMS \u9876\u5C42\u5B57\u6BB5 ==========\n\n  /**\n   * \u62BD\u5956\u6D3B\u52A8\u7C7B\u578B\uFF08CMS: `dealsType`\uFF09\n   * \u7528\u4E8E\u6807\u8BC6\u62BD\u5956\u6D3B\u52A8\u7684\u552F\u4E00\u7C7B\u578B\uFF0C\u5982\uFF1A`ipc-2614`\n   * @optional\n   */\n  dealsType?: string\n\n  // ========== \u83B7\u53D6\u673A\u4F1A\u533A\u57DF Props ==========\n\n  /**\n   * \u83B7\u53D6\u673A\u4F1A\u65B9\u5F0F\u6570\u7EC4\n   * @optional\n   */\n  chanceMethods?: ChanceMethod[]\n\n  /**\n   * \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u673A\u5236\u7C7B\u578B\n   * @default \"methods\"\n   * @optional\n   */\n  mechanismType?: ChanceMechanismType\n\n  // \u2500\u2500 CMS flat input fields\uFF08mechanismType='input' \u65F6\u4F7F\u7528\uFF09\u2500\u2500\n\n  /**\n   * \u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C\uFF08CMS: `inputPlaceholder`\uFF09\n   * @default \"Enter your order number\"\n   * @optional\n   */\n  inputPlaceholder?: string\n\n  /**\n   * \u63D0\u4EA4\u6309\u94AE\u6587\u6848\uFF08CMS: `inputSubmitText`\uFF09\n   * @default \"Spin and Win\"\n   * @optional\n   */\n  inputSubmitText?: string\n\n  /**\n   * \u8F93\u5165\u6846\u7C7B\u578B\uFF08CMS: `inputType`\uFF09\n   * @default \"text\"\n   * @optional\n   */\n  inputType?: 'text' | 'email' | 'number'\n\n  /**\n   * \u8F93\u5165\u683C\u5F0F\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF08CMS: `inputValidationErrorText`\uFF09\n   * @optional\n   */\n  inputValidationErrorText?: string\n\n  /**\n   * \u8F93\u5165\u6846\u914D\u7F6E\uFF08\u5F53 mechanismType \u4E3A 'input' \u65F6\u4F7F\u7528\uFF09\n   * @deprecated Use flat input fields (`inputPlaceholder`, `inputSubmitText`, `inputType`, `inputValidationErrorText`) instead (CMS field names)\n   * @optional\n   */\n  inputConfig?: ChanceInputConfig\n\n  /**\n   * \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u6807\u9898\n   * @default \"Want more chances to win?\"\n   * @optional\n   */\n  chanceTitle?: string\n\n  /** \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u526F\u6807\u9898 */\n  chanceSubtitle?: string\n\n  /** \u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u5E95\u90E8\u63D0\u793A */\n  chanceFooterNote?: string\n\n  /** \u83B7\u53D6\u673A\u4F1A\u65B9\u5F0F\u6587\u6848\u914D\u7F6E */\n  chanceMethodsText?: {\n    chanceBadgeText?: string\n    completedText?: string\n    usedText?: string\n    loadingText?: string\n  }\n\n  // ========== \u4E2D\u5956\u5F39\u7A97 Props ==========\n\n  /**\n   * \u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS: `winningInfos` group \u2014 \u4E3B\u540D\u79F0\uFF09\n   *\n   * CMS \u4E2D `winningInfos` \u662F\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E group\uFF0C\u5B57\u6BB5\uFF1A\n   * `title`\u3001`confirmButton`\uFF08\u5BF9\u5E94\u6E32\u67D3\u5C42 confirmText\uFF09\u3001`confirmUrl`\u3001\n   * `learnMoreUrl`\u3001`learnMoreText`\u3002\n   *\n   * @note CMS \u5B57\u6BB5 `confirmButton` \u5BF9\u5E94\u7EC4\u4EF6\u6E32\u67D3\u5C42\u7684 `confirmText`\u3002\n   */\n  winningInfos?: WinnerModalConfig\n\n  /**\n   * \u5E95\u90E8\u6EDA\u52A8\u6761\u4E2D\u5956\u4EBA\u540D\u5355\u6570\u636E\n   *\n   * \u539F `winningInfos: WinningInfo[]` \u91CD\u547D\u540D\u4E3A `winnerTickerData` \u4EE5\u907F\u514D\n   * \u4E0E CMS `winningInfos` group \u547D\u540D\u51B2\u7A81\u3002\n   *\n   * @default []\n   */\n  winnerTickerData?: WinningInfo[]\n\n  /**\n   * \u4E2D\u5956\u6EDA\u52A8 Ticker \u6587\u6848\u6A21\u677F\uFF0C\u652F\u6301 {{name}} \u548C {{prize}} \u53D8\u91CF\n   * @default \"{{name}} just won {{prize}}!\"\n   * @optional\n   */\n  winnerNameTemplate?: string\n\n  /** \u5956\u54C1\u6C60\u5C55\u793A\u533A\u57DF\u6807\u9898 */\n  prizesTitle?: string\n\n  // ========== \u56DE\u8C03\u51FD\u6570 Props ==========\n\n  /**\n   * \u62BD\u5956\u5F00\u59CB\u65F6\u7684\u56DE\u8C03\uFF0C\u8FD4\u56DE Promise \u4EE5\u652F\u6301\u5F02\u6B65\u63A5\u53E3\u8C03\u7528\n   * @returns Promise<string> - \u4E2D\u5956\u5956\u54C1\u7684 prizeKey\n   */\n  onDrawStart?: () => Promise<string>\n\n  /**\n   * \u62BD\u5956\u7ED3\u675F\u65F6\u7684\u56DE\u8C03\uFF0C\u4F20\u9012\u4E2D\u5956\u5956\u54C1\n   * @param prize \u4E2D\u5956\u5956\u54C1\u5BF9\u8C61\n   */\n  onDrawEnd?: (prize: Prize) => void\n\n  /**\n   * \u62BD\u5956\u9519\u8BEF\u65F6\u7684\u56DE\u8C03\n   * @param error \u9519\u8BEF\u4FE1\u606F\n   */\n  onDrawError?: (error: Error) => void\n\n  // ========== \u5F39\u7A97\u914D\u7F6E Props ==========\n\n  /**\n   * \u4E2D\u5956\u5F39\u7A97\u8BE6\u7EC6\u6E32\u67D3\u914D\u7F6E\uFF08\u542B prizeTitle / prizeImage / couponCode \u7B49\uFF09\n   *\n   * @note `winningInfos` is the CMS-primary equivalent for basic config, and `winnerModalConfig` is for extended UI config that overlays on top.\n   * \u4E0E `winningInfos` \u5171\u540C\u914D\u7F6E\u4E2D\u5956\u5F39\u7A97\u3002\u5F53\u4E24\u8005\u540C\u65F6\u5B58\u5728\u65F6\uFF0C\u6B64\u5B57\u6BB5\u4E2D\u7684\n   * \u540C\u540D\u5C5E\u6027\u4F18\u5148\u7EA7\u66F4\u9AD8\uFF08\u9010\u5B57\u6BB5\u5408\u5E76\uFF0C\u6B64\u5B57\u6BB5\u8986\u76D6 `winningInfos`\uFF09\u3002\n   */\n  winnerModalConfig?: WinnerModalConfig\n\n  /** \u89C4\u5219\u5F39\u7A97\u914D\u7F6E */\n  rulesModalConfig?: RulesModalConfig\n\n  /** \u9876\u680F\u53F3\u4FA7\u8DF3\u8F6C\u6309\u94AE\u914D\u7F6E\uFF1B\u672A\u914D\u7F6E text \u6216 url \u65F6\u4E0D\u5C55\u793A */\n  actionButtonConfig?: ActionButtonConfig\n\n  /** \u6211\u7684\u5956\u52B1\u5F39\u7A97\u914D\u7F6E */\n  myRewardsModalConfig?: MyRewardsModalConfig\n\n  /**\n   * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08CMS: `error` group \u2014 \u4E3B\u540D\u79F0\uFF09\n   *\n   * \u5B57\u6BB5\uFF1A`title`\u3001`defaultMessage`\u3001`confirmButton`\u3001\n   * `exchangeFailedTitle`\u3001`exchangeFailedMessage`\u3002\n   */\n  error?: ErrorConfig\n\n  /**\n   * \u672A\u4E2D\u5956\u5F39\u7A97\u914D\u7F6E\uFF08CMS: `tryAgain` group\uFF09\n   *\n   * \u5B57\u6BB5\uFF1A`title`\u3001`message`\u3001`confirmText`\u3002\n   */\n  tryAgain?: TryAgainConfig\n\n  /** \u5206\u4EAB\u5F39\u7A97\u914D\u7F6E */\n  shareModalConfig?: ShareModalConfig\n\n  /**\n   * \u9519\u8BEF\u5F39\u7A97\u914D\u7F6E\uFF08\u65E7\u7248\uFF09\n   * @deprecated Use `error` instead (CMS field name)\n   */\n  errorModalConfig?: ErrorModalConfig\n\n  // ========== CMS \u5E73\u94FA\u6587\u6848\u5B57\u6BB5\uFF08\u4E3B\u540D\u79F0\uFF09==========\n\n  /**\n   * \u672A\u767B\u5F55\u65F6\u7684\u63D0\u793A\u6587\u6848\uFF08CMS: `loginPrompt`\uFF09\n   * @default \"Please log in to participate in the lottery\"\n   */\n  loginPrompt?: string\n\n  /**\n   * \u6B21\u6570\u4E0D\u8DB3\u65F6\u7684\u63D0\u793A\u6587\u6848\uFF08CMS: `noChances`\uFF09\n   * @default \"You have no chances left. Get more chances below!\"\n   */\n  noChances?: string\n\n  /**\n   * \u673A\u4F1A\u8FDB\u5EA6\u524D\u7F00\u6587\u6848\uFF08CMS: `opportunitiesPrefix`\uFF09\n   * @default \"Number of draws remaining today: \"\n   */\n  opportunitiesPrefix?: string\n\n  // ========== \u7528\u6237\u76F8\u5173 Props ==========\n\n  /** \u7528\u6237\u6570\u636E */\n  userData?: UserData\n\n  /**\n   * \u672A\u767B\u5F55\u65F6\u7684\u63D0\u793A\u6587\u6848\n   * @deprecated Use `loginPrompt` instead (CMS field name)\n   * @default \"Please log in to participate\"\n   */\n  loginPromptText?: string\n\n  /**\n   * \u767B\u5F55\u6309\u94AE\u6587\u6848\n   * @default \"Log In\"\n   */\n  loginButtonText?: string\n\n  /**\n   * \u6B21\u6570\u4E0D\u8DB3\u65F6\u7684\u63D0\u793A\u6587\u6848\n   * @deprecated Use `noChances` instead (CMS field name)\n   * @default \"You have no chances left\"\n   */\n  noChancesText?: string\n\n  /**\n   * \u672A\u767B\u5F55\u65F6\u70B9\u51FB\u62BD\u5956\u7684\u56DE\u8C03\n   */\n  onLoginRequired?: () => void\n\n  // ========== \u5176\u4ED6\u914D\u7F6E ==========\n\n  /** \u590D\u5236\u4F18\u60E0\u7801\u56DE\u8C03 */\n  onCopyCode?: (code: string) => void\n\n  /**\n   * \u673A\u4F1A\u8FDB\u5EA6\u6587\u6848\u6570\u7EC4\uFF08\u65E7\u7248\uFF0C\u9996\u5143\u7D20\u4E3A\u524D\u7F00\uFF0C\u6B21\u5143\u7D20\u4E3A\u540E\u7F00\uFF09\n   * @deprecated Use `opportunitiesPrefix` instead (CMS field name)\n   * @default [\"Number of draws remaining today:\"]\n   */\n  opportunitiesText?: string[]\n\n  /** \u81EA\u5B9A\u4E49 CSS \u7C7B\u540D */\n  className?: string\n}\n\n// ============================================================================\n// \u9ED8\u8BA4\u914D\u7F6E\n// ============================================================================\n\n/** \u9ED8\u8BA4 CTA \u6309\u94AE\u914D\u7F6E */\nexport const DEFAULT_CTA_BUTTON: CtaButtonConfig = {\n  text: '',\n  style: 'primary',\n}\n\n/** \u9ED8\u8BA4\u83B7\u53D6\u673A\u4F1A\u533A\u57DF\u6807\u9898 */\nexport const DEFAULT_CHANCE_TITLE = 'Want more chances to win?'\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0BAAAE,EAAA,uBAAAC,IAAA,eAAAC,EAAAJ,GA2pBO,MAAMG,EAAsC,CACjD,KAAM,GACN,MAAO,SACT,EAGaD,EAAuB",
   "names": ["types_exports", "__export", "DEFAULT_CHANCE_TITLE", "DEFAULT_CTA_BUTTON", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var F=Object.create;var N=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var $=(r,l)=>{for(var p in l)N(r,p,{get:l[p],enumerable:!0})},M=(r,l,p,x)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of I(l))!_.call(r,c)&&c!==p&&N(r,c,{get:()=>l[c],enumerable:!(x=G(l,c))||x.enumerable});return r};var q=(r,l,p)=>(p=r!=null?F(V(r)):{},M(l||!r||!r.__esModule?N(p,"default",{value:r,enumerable:!0}):p,r)),O=r=>M(N({},"__esModule",{value:!0}),r);var U={};$(U,{default:()=>Q});module.exports=O(U);var t=require("react/jsx-runtime"),n=require("react"),E=require("../../helpers/utils.js"),H=require("../../shared/Styles.js"),m=require("../../components/index.js"),A=require("../../hooks/useExposure.js"),S=q(require("@radix-ui/react-popover"));const W="navigation",J="product_nav",K=r=>(0,t.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r,children:(0,t.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),D=(0,n.forwardRef)(({className:r="",data:l,id:p,onAnchorClick:x,scrollOffsetExtra:c=0},B)=>{const{tabLinks:k=[],anchorList:i=[],textLink:d,buyBtn:f,theme:z="light"}=l||{},[j,b]=(0,n.useState)(""),g=(0,n.useRef)(null),y=(0,n.useRef)(!1),h=(0,n.useRef)(""),w=(0,n.useRef)(null),P=(0,n.useRef)(new Map);(0,n.useImperativeHandle)(B,()=>g.current),(0,A.useExposure)(g,{componentType:W,componentName:J});const T=(0,n.useCallback)(()=>{if(i.length===0)return;const e=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const o=new Map;i.forEach(a=>{const s=document.getElementById(a.id);if(s){const u=s.getBoundingClientRect();o.set(a.id,u.top+window.scrollY)}}),P.current=o,window.scrollTo({top:e,behavior:"instant"})})},[i]);(0,n.useEffect)(()=>{if(i.length===0)return;const e=setTimeout(T,100);return()=>clearTimeout(e)},[i,T]),(0,n.useEffect)(()=>{if(i.length===0)return;let e=null;const o=new ResizeObserver(()=>{e&&clearTimeout(e),e=setTimeout(T,150)});return o.observe(document.body),()=>{o.disconnect(),e&&clearTimeout(e)}},[i,T]),(0,n.useEffect)(()=>{if(i.length===0)return;const e=()=>{if(y.current){w.current&&clearTimeout(w.current),w.current=setTimeout(()=>{y.current=!1,h.current&&(b(h.current),h.current="")},100);return}const a=g.current?.offsetHeight||0,s=window.scrollY+a+c+10;let u="";const R=P.current;for(let v=i.length-1;v>=0;v--){const C=i[v],L=R.get(C.id);if(L!==void 0&&s>=L){u=C.id;break}}if(!u&&i.length>0){const v=R.get(i[0].id);v!==void 0&&s<v&&(u="")}b(u)},o=setTimeout(()=>{e()},200);return window.addEventListener("scroll",e,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",e),w.current&&clearTimeout(w.current)}},[i,c]),(0,n.useEffect)(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(a=>{const s=a;o.push({element:s,originalPosition:s.style.position||getComputedStyle(s).position}),s.style.position="relative"}),()=>{o.forEach(({element:a,originalPosition:s})=>{a.style.position=s==="static"?"":s})}},[]);const Y=(e,o)=>{e.preventDefault();const a=P.current.get(o);if(a===void 0){console.warn(`Cached position for "${o}" not found`);return}b(o),h.current=o,y.current=!0;const s=g.current?.offsetHeight||0,u=a-s-c;window.scrollTo({top:u,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return(0,t.jsxs)("div",{id:p,ref:g,className:(0,E.cn)("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":z==="dark"},r),children:[(0,t.jsxs)("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[(0,t.jsxs)("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[(0,t.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[k.map((e,o)=>(0,t.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,t.jsx)("a",{href:e.link,className:(0,E.cn)("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:(0,t.jsx)("span",{children:e.label})}),o!==k.length-1&&(0,t.jsx)("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),k.length>1&&(0,t.jsxs)(S.Root,{children:[(0,t.jsx)(S.Trigger,{asChild:!0,children:(0,t.jsx)("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:(0,t.jsx)(K,{className:"text-[#1D1D1F]"})})}),(0,t.jsx)(S.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:k.slice(1).map(e=>(0,t.jsx)("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:(0,t.jsx)("span",{children:e.label})},e.link))})]})]}),(0,t.jsxs)("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[d?.link&&(0,t.jsx)("a",{href:d.link,target:d.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:(0,t.jsx)(m.Text,{size:2,className:"text-nowrap",children:d.text})}),f?.link&&(0,t.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]}),(0,t.jsx)("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:i.map((e,o)=>(0,t.jsxs)("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:a=>{x?(a.preventDefault(),b(e.id),h.current=e.id,y.current=!0,x(e,o)):Y(a,e.id)},children:[(0,t.jsx)(m.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),(0,t.jsx)("div",{className:(0,E.cn)("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":j===e.id})})]},e.id))})]}),(0,t.jsxs)("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[d?.link&&(0,t.jsx)("a",{href:d.link,target:d.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:(0,t.jsx)(m.Text,{size:2,className:"text-nowrap",children:d.text})}),f?.link&&(0,t.jsx)(m.Button,{as:"a",href:f.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:f.text})]})]})});D.displayName="ProductNav";var Q=(0,H.withLayout)(D);
+"use strict";"use client";var O=Object.create;var _=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(r,l)=>{for(var p in l)_(r,p,{get:l[p],enumerable:!0})},A=(r,l,p,y)=>{if(l&&typeof l=="object"||typeof l=="function")for(let d of W(l))!K.call(r,d)&&d!==p&&_(r,d,{get:()=>l[d],enumerable:!(y=U(l,d))||y.enumerable});return r};var X=(r,l,p)=>(p=r!=null?O(J(r)):{},A(l||!r||!r.__esModule?_(p,"default",{value:r,enumerable:!0}):p,r)),Z=r=>A(_({},"__esModule",{value:!0}),r);var oe={};Q(oe,{default:()=>te});module.exports=Z(oe);var t=require("react/jsx-runtime"),n=require("react"),c=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),g=require("../../components/index.js"),j=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js"),Y=require("../AiuiProvider/index.js"),H=X(require("@radix-ui/react-popover"));const f="navigation",v="product_nav",ee=r=>(0,t.jsx)("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r,children:(0,t.jsx)("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),z=(0,n.forwardRef)(({className:r="",data:l,id:p,onAnchorClick:y,scrollOffsetExtra:d=0},F)=>{const{tabLinks:$=[],anchorList:s=[],textLink:u,buyBtn:h,theme:G="light"}=l||{},{locale:w="us",trackingData:I}=(0,Y.useAiuiContext)(),k=I?.contextHandle||"",[V,P]=(0,n.useState)(""),T=(0,n.useRef)(null),R=(0,n.useRef)(!1),N=(0,n.useRef)(""),E=(0,n.useRef)(null),C=(0,n.useRef)(new Map);(0,n.useImperativeHandle)(F,()=>T.current),(0,j.useExposure)(T,{componentType:f,componentName:v});const S=(0,n.useCallback)(()=>{if(s.length===0)return;const e=window.scrollY;window.scrollTo({top:0,behavior:"instant"}),requestAnimationFrame(()=>{const o=new Map;s.forEach(a=>{const i=document.getElementById(a.id);if(i){const m=i.getBoundingClientRect();o.set(a.id,m.top+window.scrollY)}}),C.current=o,window.scrollTo({top:e,behavior:"instant"})})},[s]);(0,n.useEffect)(()=>{if(s.length===0)return;const e=setTimeout(S,100);return()=>clearTimeout(e)},[s,S]),(0,n.useEffect)(()=>{if(s.length===0)return;let e=null;const o=new ResizeObserver(()=>{e&&clearTimeout(e),e=setTimeout(S,150)});return o.observe(document.body),()=>{o.disconnect(),e&&clearTimeout(e)}},[s,S]),(0,n.useEffect)(()=>{if(s.length===0)return;const e=()=>{if(R.current){E.current&&clearTimeout(E.current),E.current=setTimeout(()=>{R.current=!1,N.current&&(P(N.current),N.current="")},100);return}const a=T.current?.offsetHeight||0,i=window.scrollY+a+d+10;let m="";const L=C.current;for(let b=s.length-1;b>=0;b--){const D=s[b],M=L.get(D.id);if(M!==void 0&&i>=M){m=D.id;break}}if(!m&&s.length>0){const b=L.get(s[0].id);b!==void 0&&i<b&&(m="")}P(m)},o=setTimeout(()=>{e()},200);return window.addEventListener("scroll",e,{passive:!0}),()=>{clearTimeout(o),window.removeEventListener("scroll",e),E.current&&clearTimeout(E.current)}},[s,d]),(0,n.useEffect)(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(a=>{const i=a;o.push({element:i,originalPosition:i.style.position||getComputedStyle(i).position}),i.style.position="relative"}),()=>{o.forEach(({element:a,originalPosition:i})=>{a.style.position=i==="static"?"":i})}},[]);const q=(e,o)=>{e.preventDefault();const a=C.current.get(o);if(a===void 0){console.warn(`Cached position for "${o}" not found`);return}P(o),N.current=o,R.current=!0;const i=T.current?.offsetHeight||0,m=a-i-d;window.scrollTo({top:m,behavior:"smooth"}),window.history.pushState(null,"",`#${o}`)};return(0,t.jsxs)("div",{id:p,ref:T,className:(0,c.cn)("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":G==="dark"},r),children:[(0,t.jsxs)("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[(0,t.jsxs)("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[(0,t.jsxs)("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[$.map((e,o)=>(0,t.jsxs)("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[(0,t.jsx)("a",{href:(0,x.trackUrlRef)((0,c.getLocalizedPath)(e.link,w),`${k}_${f}_${v}`),className:(0,c.cn)("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:(0,t.jsx)("span",{children:e.label})}),o!==$.length-1&&(0,t.jsx)("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),$.length>1&&(0,t.jsxs)(H.Root,{children:[(0,t.jsx)(H.Trigger,{asChild:!0,children:(0,t.jsx)("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:(0,t.jsx)(ee,{className:"text-[#1D1D1F]"})})}),(0,t.jsx)(H.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:$.slice(1).map(e=>(0,t.jsx)("a",{href:(0,x.trackUrlRef)((0,c.getLocalizedPath)(e.link,w),`${k}_${f}_${v}`),className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:(0,t.jsx)("span",{children:e.label})},e.link))})]})]}),(0,t.jsxs)("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[u?.link&&(0,t.jsx)("a",{href:(0,x.trackUrlRef)((0,c.getLocalizedPath)(u.link,w),`${k}_${f}_${v}`),target:u.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:(0,t.jsx)(g.Text,{size:2,className:"text-nowrap",children:u.text})}),h?.link&&(0,t.jsx)(g.Button,{as:"a",href:(0,x.trackUrlRef)((0,c.getLocalizedPath)(h.link,w),`${k}_${f}_${v}`),size:"sm",className:"product-nav-buy-button text-nowrap",children:h.text})]})]}),(0,t.jsx)("div",{className:"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",children:s.map((e,o)=>(0,t.jsxs)("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:a=>{y?(a.preventDefault(),P(e.id),N.current=e.id,R.current=!0,y(e,o)):q(a,e.id)},children:[(0,t.jsx)(g.Text,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),(0,t.jsx)("div",{className:(0,c.cn)("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"!bg-brand-0":V===e.id})})]},e.id))})]}),(0,t.jsxs)("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[u?.link&&(0,t.jsx)("a",{href:(0,x.trackUrlRef)((0,c.getLocalizedPath)(u.link,w),`${k}_${f}_${v}`),target:u.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:(0,t.jsx)(g.Text,{size:2,className:"text-nowrap",children:u.text})}),h?.link&&(0,t.jsx)(g.Button,{as:"a",href:(0,x.trackUrlRef)((0,c.getLocalizedPath)(h.link,w),`${k}_${f}_${v}`),size:"sm",className:"product-nav-buy-button text-nowrap",children:h.text})]})]})});z.displayName="ProductNav";var te=(0,B.withLayout)(z);
 //# sourceMappingURL=ProductNav.js.map

package/dist/cjs/biz-components/ProductNav/ProductNav.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path\n        d=\"M5 7.5L10 12.5L15 7.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n  ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n    const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n    const [activeAnchorId, setActiveAnchorId] = useState('')\n    const innerRef = useRef<HTMLDivElement>(null)\n    const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n    const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n    const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n    const anchorPositionsRef = useRef<Map<string, number>>(new Map()) // \u7F13\u5B58\u951A\u70B9\u539F\u59CB\u4F4D\u7F6E\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    // \u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u7EDD\u5BF9\u4F4D\u7F6E\uFF08\u6EDA\u52A8\u5230\u9876\u90E8\u540E\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n    const updateAnchorPositions = useCallback(() => {\n      if (anchorList.length === 0) return\n\n      const originalScrollY = window.scrollY\n      window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\n      requestAnimationFrame(() => {\n        const positions = new Map<string, number>()\n        anchorList.forEach(anchor => {\n          const element = document.getElementById(anchor.id)\n          if (element) {\n            const rect = element.getBoundingClientRect()\n            positions.set(anchor.id, rect.top + window.scrollY)\n          }\n        })\n        anchorPositionsRef.current = positions\n\n        window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n      })\n    }, [anchorList])\n\n    // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\n    useEffect(() => {\n      if (anchorList.length === 0) return\n\n      // \u9875\u9762\u52A0\u8F7D\u540E\u5EF6\u8FDF\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5E03\u5C40\u5B8C\u6210\n      const timer = setTimeout(updateAnchorPositions, 100)\n\n      return () => clearTimeout(timer)\n    }, [anchorList, updateAnchorPositions])\n\n    // \u76D1\u542C body \u9AD8\u5EA6\u53D8\u5316\uFF0C\u9AD8\u5EA6\u6539\u53D8\u65F6\u91CD\u65B0\u8BA1\u7B97\u951A\u70B9\u4F4D\u7F6E\n    useEffect(() => {\n      if (anchorList.length === 0) return\n\n      let resizeTimer: ReturnType<typeof setTimeout> | null = null\n\n      const observer = new ResizeObserver(() => {\n        // debounce\uFF0C\u907F\u514D\u9AD8\u9891\u89E6\u53D1\n        if (resizeTimer) clearTimeout(resizeTimer)\n        resizeTimer = setTimeout(updateAnchorPositions, 150)\n      })\n\n      observer.observe(document.body)\n\n      return () => {\n        observer.disconnect()\n        if (resizeTimer) clearTimeout(resizeTimer)\n      }\n    }, [anchorList, updateAnchorPositions])\n\n    // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n    useEffect(() => {\n      if (anchorList.length === 0) return\n\n      const handleScroll = () => {\n        // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n        if (isScrollingRef.current) {\n          // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n          if (scrollEndTimerRef.current) {\n            clearTimeout(scrollEndTimerRef.current)\n          }\n          // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n          scrollEndTimerRef.current = setTimeout(() => {\n            isScrollingRef.current = false\n            // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n            if (targetAnchorIdRef.current) {\n              setActiveAnchorId(targetAnchorIdRef.current)\n              targetAnchorIdRef.current = ''\n            }\n          }, 100)\n          return\n        }\n\n        const navHeight = innerRef.current?.offsetHeight || 0\n        const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n        let currentAnchorId = ''\n\n        // \u4F7F\u7528\u7F13\u5B58\u7684\u951A\u70B9\u4F4D\u7F6E\n        const positions = anchorPositionsRef.current\n\n        // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n        for (let i = anchorList.length - 1; i >= 0; i--) {\n          const anchor = anchorList[i]\n          const elementTop = positions.get(anchor.id)\n          if (elementTop !== undefined && scrollPosition >= elementTop) {\n            currentAnchorId = anchor.id\n            break\n          }\n        }\n\n        // \u5982\u679C\u6CA1\u6709\u627E\u5230\u4E14\u7F13\u5B58\u4E2D\u6709\u7B2C\u4E00\u4E2A\u951A\u70B9\u7684\u4F4D\u7F6E\n        if (!currentAnchorId && anchorList.length > 0) {\n          const firstElementTop = positions.get(anchorList[0].id)\n          if (firstElementTop !== undefined && scrollPosition < firstElementTop) {\n            currentAnchorId = ''\n          }\n        }\n\n        setActiveAnchorId(currentAnchorId)\n      }\n\n      // \u5EF6\u8FDF\u521D\u59CB\u5316\uFF0C\u7B49\u5F85\u4F4D\u7F6E\u7F13\u5B58\u5B8C\u6210\n      const timer = setTimeout(() => {\n        handleScroll()\n      }, 200)\n\n      window.addEventListener('scroll', handleScroll, { passive: true })\n      return () => {\n        clearTimeout(timer)\n        window.removeEventListener('scroll', handleScroll)\n        // \u6E05\u7406\u5B9A\u65F6\u5668\n        if (scrollEndTimerRef.current) {\n          clearTimeout(scrollEndTimerRef.current)\n        }\n      }\n    }, [anchorList, scrollOffsetExtra])\n\n    // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n    useEffect(() => {\n      const headerElements = document.querySelectorAll('.header')\n      const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n      headerElements.forEach(element => {\n        const htmlElement = element as HTMLElement\n        // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n        originalStyles.push({\n          element: htmlElement,\n          originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n        })\n        // \u8BBE\u7F6E\u4E3Arelative\n        htmlElement.style.position = 'relative'\n      })\n\n      // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n      return () => {\n        originalStyles.forEach(({ element, originalPosition }) => {\n          element.style.position = originalPosition === 'static' ? '' : originalPosition\n        })\n      }\n    }, [])\n\n    // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n    const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n      e.preventDefault()\n\n      // \u4F7F\u7528\u7F13\u5B58\u7684\u4F4D\u7F6E\n      const elementAbsoluteTop = anchorPositionsRef.current.get(anchorId)\n      if (elementAbsoluteTop === undefined) {\n        console.warn(`Cached position for \"${anchorId}\" not found`)\n        return\n      }\n\n      // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n      setActiveAnchorId(anchorId)\n\n      // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n      targetAnchorIdRef.current = anchorId\n\n      // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n      isScrollingRef.current = true\n\n      // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n      const navHeight = innerRef.current?.offsetHeight || 0\n\n      // \u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E = \u7F13\u5B58\u7684\u5143\u7D20\u7EDD\u5BF9\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\n      const targetPosition = elementAbsoluteTop - navHeight - scrollOffsetExtra\n\n      // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n      window.scrollTo({\n        top: targetPosition,\n        behavior: 'smooth',\n      })\n\n      // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n      window.history.pushState(null, '', `#${anchorId}`)\n\n      // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n      // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n    }\n\n    return (\n      <div\n        id={id}\n        ref={innerRef}\n        className={cn(\n          'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className\n        )}\n      >\n        <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n          {/* Tab Links Section */}\n          <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n            <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n              {tabLinks.map((tabLink, index) => {\n                return (\n                  <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n                    <a\n                      href={tabLink.link}\n                      className={cn(\n                        'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n                        {\n                          'text-[#6D6D6F]': index !== 0,\n                          'hidden desktop:block': index === 1,\n                        }\n                      )}\n                      // onClick={() => onShowSpecs?.(false)}\n                    >\n                      <span>{tabLink.label}</span>\n                    </a>\n                    {index !== tabLinks.length - 1 && (\n                      <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n                    )}\n                  </div>\n                )\n              })}\n\n              {/* Mobile Dropdown */}\n              {tabLinks.length > 1 && (\n                <Popover.Root>\n                  <Popover.Trigger asChild>\n                    <button\n                      className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n                      aria-label=\"More products\"\n                    >\n                      <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n                    </button>\n                  </Popover.Trigger>\n                  <Popover.Content\n                    className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n                    style={{\n                      boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n                    }}\n                    side=\"bottom\"\n                    align=\"end\"\n                    alignOffset={10}\n                    sideOffset={10}\n                  >\n                    {tabLinks.slice(1).map(tabLink => (\n                      <a\n                        key={tabLink.link}\n                        href={tabLink.link}\n                        className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n                      >\n                        <span>{tabLink.label}</span>\n                      </a>\n                    ))}\n                  </Popover.Content>\n                </Popover.Root>\n              )}\n            </div>\n\n            {/* Mobile Actions */}\n            <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n              {/* {specs?.text && (\n                <Text\n                  size={2}\n                  onClick={handleSpecsClick}\n                  className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n                >\n                  {specs.text}\n                </Text>\n              )} */}\n              {textLink?.link && (\n                <a\n                  href={textLink.link}\n                  target={textLink.target || '_self'}\n                  className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n                >\n                  <Text size={2} className=\"text-nowrap\">\n                    {textLink.text}\n                  </Text>\n                </a>\n              )}\n              {buyBtn?.link && (\n                <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n                  {buyBtn.text}\n                </Button>\n              )}\n            </div>\n          </div>\n\n          {/* Anchor Navigation */}\n          <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n            {anchorList.map((anchor, index) => (\n              <a\n                key={anchor.id}\n                href={`#${anchor.id}`}\n                className=\"product-nav-anchor-link\"\n                onClick={e => {\n                  // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n                  if (onAnchorClick) {\n                    e.preventDefault()\n                    // \u6807\u8BB0\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u9AD8\u4EAE\u95EA\u70C1\n                    setActiveAnchorId(anchor.id)\n                    targetAnchorIdRef.current = anchor.id\n                    isScrollingRef.current = true\n                    onAnchorClick(anchor, index)\n                  } else {\n                    // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n                    handleAnchorClick(e, anchor.id)\n                  }\n                }}\n              >\n                <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n                  {anchor.label}\n                </Text>\n                <div\n                  className={cn(\n                    'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n                    {\n                      '!bg-brand-0': activeAnchorId === anchor.id,\n                    }\n                  )}\n                />\n              </a>\n            ))}\n          </div>\n        </div>\n\n        {/* Desktop Actions */}\n        <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n          {/* {specs?.text && (\n            <Text\n              size={2}\n              onClick={handleSpecsClick}\n              className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n            >\n              {specs.text}\n            </Text>\n          )} */}\n          {textLink?.link && (\n            <a\n              href={textLink.link}\n              target={textLink.target || '_self'}\n              className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n            >\n              <Text size={2} className=\"text-nowrap\">\n                {textLink.text}\n              </Text>\n            </a>\n          )}\n          {buyBtn?.link && (\n            <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n              {buyBtn.text}\n            </Button>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
-  "mappings": "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",
-  "names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "anchorPositionsRef", "updateAnchorPositions", "originalScrollY", "positions", "anchor", "element", "rect", "timer", "resizeTimer", "observer", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index", "e"]
+  "sourcesContent": ["'use client'\nimport { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path\n        d=\"M5 7.5L10 12.5L15 7.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(\n  ({ className = '', data, id, onAnchorClick, scrollOffsetExtra = 0 }, ref) => {\n    const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const contextHandle = trackingData?.contextHandle || ''\n    const [activeAnchorId, setActiveAnchorId] = useState('')\n    const innerRef = useRef<HTMLDivElement>(null)\n    const isScrollingRef = useRef(false) // \u6807\u8BB0\u662F\u5426\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\n    const targetAnchorIdRef = useRef<string>('') // \u8BB0\u5F55\u70B9\u51FB\u76EE\u6807\u951A\u70B9\n    const scrollEndTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // \u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u5B9A\u65F6\u5668\n    const anchorPositionsRef = useRef<Map<string, number>>(new Map()) // \u7F13\u5B58\u951A\u70B9\u539F\u59CB\u4F4D\u7F6E\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    // \u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u7EDD\u5BF9\u4F4D\u7F6E\uFF08\u6EDA\u52A8\u5230\u9876\u90E8\u540E\u8BA1\u7B97\uFF0C\u907F\u514D sticky \u5F71\u54CD\uFF09\n    const updateAnchorPositions = useCallback(() => {\n      if (anchorList.length === 0) return\n\n      const originalScrollY = window.scrollY\n      window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })\n\n      requestAnimationFrame(() => {\n        const positions = new Map<string, number>()\n        anchorList.forEach(anchor => {\n          const element = document.getElementById(anchor.id)\n          if (element) {\n            const rect = element.getBoundingClientRect()\n            positions.set(anchor.id, rect.top + window.scrollY)\n          }\n        })\n        anchorPositionsRef.current = positions\n\n        window.scrollTo({ top: originalScrollY, behavior: 'instant' as ScrollBehavior })\n      })\n    }, [anchorList])\n\n    // \u521D\u59CB\u5316\u65F6\u7F13\u5B58\u6240\u6709\u951A\u70B9\u7684\u539F\u59CB\u4F4D\u7F6E\n    useEffect(() => {\n      if (anchorList.length === 0) return\n\n      // \u9875\u9762\u52A0\u8F7D\u540E\u5EF6\u8FDF\u8BA1\u7B97\uFF0C\u786E\u4FDD\u5E03\u5C40\u5B8C\u6210\n      const timer = setTimeout(updateAnchorPositions, 100)\n\n      return () => clearTimeout(timer)\n    }, [anchorList, updateAnchorPositions])\n\n    // \u76D1\u542C body \u9AD8\u5EA6\u53D8\u5316\uFF0C\u9AD8\u5EA6\u6539\u53D8\u65F6\u91CD\u65B0\u8BA1\u7B97\u951A\u70B9\u4F4D\u7F6E\n    useEffect(() => {\n      if (anchorList.length === 0) return\n\n      let resizeTimer: ReturnType<typeof setTimeout> | null = null\n\n      const observer = new ResizeObserver(() => {\n        // debounce\uFF0C\u907F\u514D\u9AD8\u9891\u89E6\u53D1\n        if (resizeTimer) clearTimeout(resizeTimer)\n        resizeTimer = setTimeout(updateAnchorPositions, 150)\n      })\n\n      observer.observe(document.body)\n\n      return () => {\n        observer.disconnect()\n        if (resizeTimer) clearTimeout(resizeTimer)\n      }\n    }, [anchorList, updateAnchorPositions])\n\n    // \u6EDA\u52A8\u76D1\u542C\uFF1A\u68C0\u6D4B\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n    useEffect(() => {\n      if (anchorList.length === 0) return\n\n      const handleScroll = () => {\n        // \u5982\u679C\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\u4E2D\uFF0C\u4F7F\u7528 debounce \u68C0\u6D4B\u6EDA\u52A8\u7ED3\u675F\n        if (isScrollingRef.current) {\n          // \u6E05\u9664\u4E4B\u524D\u7684\u5B9A\u65F6\u5668\n          if (scrollEndTimerRef.current) {\n            clearTimeout(scrollEndTimerRef.current)\n          }\n          // \u8BBE\u7F6E\u65B0\u7684\u5B9A\u65F6\u5668\uFF0C100ms \u6CA1\u6709\u65B0\u6EDA\u52A8\u4E8B\u4EF6\u5219\u8BA4\u4E3A\u6EDA\u52A8\u7ED3\u675F\n          scrollEndTimerRef.current = setTimeout(() => {\n            isScrollingRef.current = false\n            // \u6EDA\u52A8\u7ED3\u675F\u540E\uFF0C\u786E\u4FDD\u9AD8\u4EAE\u505C\u7559\u5728\u76EE\u6807\u951A\u70B9\n            if (targetAnchorIdRef.current) {\n              setActiveAnchorId(targetAnchorIdRef.current)\n              targetAnchorIdRef.current = ''\n            }\n          }, 100)\n          return\n        }\n\n        const navHeight = innerRef.current?.offsetHeight || 0\n        const scrollPosition = window.scrollY + navHeight + scrollOffsetExtra + 10 // 10px \u7F13\u51B2\n\n        let currentAnchorId = ''\n\n        // \u4F7F\u7528\u7F13\u5B58\u7684\u951A\u70B9\u4F4D\u7F6E\n        const positions = anchorPositionsRef.current\n\n        // \u904D\u5386\u6240\u6709\u951A\u70B9\uFF0C\u627E\u5230\u5F53\u524D\u6EDA\u52A8\u4F4D\u7F6E\u5BF9\u5E94\u7684\u951A\u70B9\n        for (let i = anchorList.length - 1; i >= 0; i--) {\n          const anchor = anchorList[i]\n          const elementTop = positions.get(anchor.id)\n          if (elementTop !== undefined && scrollPosition >= elementTop) {\n            currentAnchorId = anchor.id\n            break\n          }\n        }\n\n        // \u5982\u679C\u6CA1\u6709\u627E\u5230\u4E14\u7F13\u5B58\u4E2D\u6709\u7B2C\u4E00\u4E2A\u951A\u70B9\u7684\u4F4D\u7F6E\n        if (!currentAnchorId && anchorList.length > 0) {\n          const firstElementTop = positions.get(anchorList[0].id)\n          if (firstElementTop !== undefined && scrollPosition < firstElementTop) {\n            currentAnchorId = ''\n          }\n        }\n\n        setActiveAnchorId(currentAnchorId)\n      }\n\n      // \u5EF6\u8FDF\u521D\u59CB\u5316\uFF0C\u7B49\u5F85\u4F4D\u7F6E\u7F13\u5B58\u5B8C\u6210\n      const timer = setTimeout(() => {\n        handleScroll()\n      }, 200)\n\n      window.addEventListener('scroll', handleScroll, { passive: true })\n      return () => {\n        clearTimeout(timer)\n        window.removeEventListener('scroll', handleScroll)\n        // \u6E05\u7406\u5B9A\u65F6\u5668\n        if (scrollEndTimerRef.current) {\n          clearTimeout(scrollEndTimerRef.current)\n        }\n      }\n    }, [anchorList, scrollOffsetExtra])\n\n    // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n    useEffect(() => {\n      const headerElements = document.querySelectorAll('.header')\n      const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n      headerElements.forEach(element => {\n        const htmlElement = element as HTMLElement\n        // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n        originalStyles.push({\n          element: htmlElement,\n          originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n        })\n        // \u8BBE\u7F6E\u4E3Arelative\n        htmlElement.style.position = 'relative'\n      })\n\n      // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n      return () => {\n        originalStyles.forEach(({ element, originalPosition }) => {\n          element.style.position = originalPosition === 'static' ? '' : originalPosition\n        })\n      }\n    }, [])\n\n    // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n    const handleAnchorClick = (e: React.MouseEvent, anchorId: string) => {\n      e.preventDefault()\n\n      // \u4F7F\u7528\u7F13\u5B58\u7684\u4F4D\u7F6E\n      const elementAbsoluteTop = anchorPositionsRef.current.get(anchorId)\n      if (elementAbsoluteTop === undefined) {\n        console.warn(`Cached position for \"${anchorId}\" not found`)\n        return\n      }\n\n      // \u7ACB\u5373\u66F4\u65B0\u9AD8\u4EAE\u72B6\u6001\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u95EA\u70C1\n      setActiveAnchorId(anchorId)\n\n      // \u8BB0\u5F55\u76EE\u6807\u951A\u70B9\uFF0C\u7528\u4E8E\u6EDA\u52A8\u7ED3\u675F\u540E\u786E\u4FDD\u9AD8\u4EAE\u6B63\u786E\n      targetAnchorIdRef.current = anchorId\n\n      // \u6807\u8BB0\u6B63\u5728\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u6682\u505C\u6EDA\u52A8\u76D1\u542C\n      isScrollingRef.current = true\n\n      // \u83B7\u53D6\u5BFC\u822A\u680F\u9AD8\u5EA6\n      const navHeight = innerRef.current?.offsetHeight || 0\n\n      // \u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E = \u7F13\u5B58\u7684\u5143\u7D20\u7EDD\u5BF9\u4F4D\u7F6E - \u5BFC\u822A\u680F\u9AD8\u5EA6 - \u989D\u5916\u504F\u79FB\n      const targetPosition = elementAbsoluteTop - navHeight - scrollOffsetExtra\n\n      // \u5E73\u6ED1\u6EDA\u52A8\u5230\u76EE\u6807\u4F4D\u7F6E\n      window.scrollTo({\n        top: targetPosition,\n        behavior: 'smooth',\n      })\n\n      // \u66F4\u65B0 URL hash\uFF08\u4E0D\u89E6\u53D1\u9875\u9762\u8DF3\u8F6C\uFF09\n      window.history.pushState(null, '', `#${anchorId}`)\n\n      // \u6CE8\u610F\uFF1A\u6EDA\u52A8\u7ED3\u675F\u68C0\u6D4B\u7531 handleScroll \u4E2D\u7684 debounce \u903B\u8F91\u5904\u7406\n      // \u4E0D\u518D\u4F7F\u7528\u56FA\u5B9A 800ms \u8D85\u65F6\uFF0C\u800C\u662F\u68C0\u6D4B\u5B9E\u9645\u6EDA\u52A8\u7ED3\u675F\n    }\n\n    return (\n      <div\n        id={id}\n        ref={innerRef}\n        className={cn(\n          'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className\n        )}\n      >\n        <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n          {/* Tab Links Section */}\n          <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n            <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n              {tabLinks.map((tabLink, index) => {\n                return (\n                  <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n                    <a\n                      href={trackUrlRef(\n                        getLocalizedPath(tabLink.link, locale),\n                        `${contextHandle}_${componentType}_${componentName}`\n                      )}\n                      className={cn(\n                        'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n                        {\n                          'text-[#6D6D6F]': index !== 0,\n                          'hidden desktop:block': index === 1,\n                        }\n                      )}\n                      // onClick={() => onShowSpecs?.(false)}\n                    >\n                      <span>{tabLink.label}</span>\n                    </a>\n                    {index !== tabLinks.length - 1 && (\n                      <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n                    )}\n                  </div>\n                )\n              })}\n\n              {/* Mobile Dropdown */}\n              {tabLinks.length > 1 && (\n                <Popover.Root>\n                  <Popover.Trigger asChild>\n                    <button\n                      className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n                      aria-label=\"More products\"\n                    >\n                      <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n                    </button>\n                  </Popover.Trigger>\n                  <Popover.Content\n                    className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n                    style={{\n                      boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n                    }}\n                    side=\"bottom\"\n                    align=\"end\"\n                    alignOffset={10}\n                    sideOffset={10}\n                  >\n                    {tabLinks.slice(1).map(tabLink => (\n                      <a\n                        key={tabLink.link}\n                        href={trackUrlRef(\n                          getLocalizedPath(tabLink.link, locale),\n                          `${contextHandle}_${componentType}_${componentName}`\n                        )}\n                        className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n                      >\n                        <span>{tabLink.label}</span>\n                      </a>\n                    ))}\n                  </Popover.Content>\n                </Popover.Root>\n              )}\n            </div>\n\n            {/* Mobile Actions */}\n            <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n              {/* {specs?.text && (\n                <Text\n                  size={2}\n                  onClick={handleSpecsClick}\n                  className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n                >\n                  {specs.text}\n                </Text>\n              )} */}\n              {textLink?.link && (\n                <a\n                  href={trackUrlRef(\n                    getLocalizedPath(textLink.link, locale),\n                    `${contextHandle}_${componentType}_${componentName}`\n                  )}\n                  target={textLink.target || '_self'}\n                  className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n                >\n                  <Text size={2} className=\"text-nowrap\">\n                    {textLink.text}\n                  </Text>\n                </a>\n              )}\n              {buyBtn?.link && (\n                <Button\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(buyBtn.link, locale),\n                    `${contextHandle}_${componentType}_${componentName}`\n                  )}\n                  size=\"sm\"\n                  className=\"product-nav-buy-button text-nowrap\"\n                >\n                  {buyBtn.text}\n                </Button>\n              )}\n            </div>\n          </div>\n\n          {/* Anchor Navigation */}\n          <div className=\"product-nav-anchors laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n            {anchorList.map((anchor, index) => (\n              <a\n                key={anchor.id}\n                href={`#${anchor.id}`}\n                className=\"product-nav-anchor-link\"\n                onClick={e => {\n                  // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u70B9\u51FB\u4E8B\u4EF6,\u4F7F\u7528\u81EA\u5B9A\u4E49\u4E8B\u4EF6\u5E76\u963B\u6B62\u9ED8\u8BA4\u884C\u4E3A\n                  if (onAnchorClick) {\n                    e.preventDefault()\n                    // \u6807\u8BB0\u7A0B\u5E8F\u5316\u6EDA\u52A8\uFF0C\u907F\u514D\u6EDA\u52A8\u8FC7\u7A0B\u4E2D\u9AD8\u4EAE\u95EA\u70C1\n                    setActiveAnchorId(anchor.id)\n                    targetAnchorIdRef.current = anchor.id\n                    isScrollingRef.current = true\n                    onAnchorClick(anchor, index)\n                  } else {\n                    // \u4F7F\u7528\u9ED8\u8BA4\u7684\u951A\u70B9\u6EDA\u52A8\u884C\u4E3A\uFF0C\u5E26\u504F\u79FB\u91CF\n                    handleAnchorClick(e, anchor.id)\n                  }\n                }}\n              >\n                <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n                  {anchor.label}\n                </Text>\n                <div\n                  className={cn(\n                    'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n                    {\n                      '!bg-brand-0': activeAnchorId === anchor.id,\n                    }\n                  )}\n                />\n              </a>\n            ))}\n          </div>\n        </div>\n\n        {/* Desktop Actions */}\n        <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n          {/* {specs?.text && (\n            <Text\n              size={2}\n              onClick={handleSpecsClick}\n              className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n            >\n              {specs.text}\n            </Text>\n          )} */}\n          {textLink?.link && (\n            <a\n              href={trackUrlRef(\n                getLocalizedPath(textLink.link, locale),\n                `${contextHandle}_${componentType}_${componentName}`\n              )}\n              target={textLink.target || '_self'}\n              className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n            >\n              <Text size={2} className=\"text-nowrap\">\n                {textLink.text}\n              </Text>\n            </a>\n          )}\n          {buyBtn?.link && (\n            <Button\n              as=\"a\"\n              href={trackUrlRef(\n                getLocalizedPath(buyBtn.link, locale),\n                `${contextHandle}_${componentType}_${componentName}`\n              )}\n              size=\"sm\"\n              className=\"product-nav-buy-button text-nowrap\"\n            >\n              {buyBtn.text}\n            </Button>\n          )}\n        </div>\n      </div>\n    )\n  }\n)\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
+  "mappings": "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",
+  "names": ["ProductNav_exports", "__export", "ProductNav_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "onAnchorClick", "scrollOffsetExtra", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "locale", "trackingData", "contextHandle", "activeAnchorId", "setActiveAnchorId", "innerRef", "isScrollingRef", "targetAnchorIdRef", "scrollEndTimerRef", "anchorPositionsRef", "updateAnchorPositions", "originalScrollY", "positions", "anchor", "element", "rect", "timer", "resizeTimer", "observer", "handleScroll", "navHeight", "scrollPosition", "currentAnchorId", "i", "elementTop", "firstElementTop", "headerElements", "originalStyles", "htmlElement", "originalPosition", "handleAnchorClick", "anchorId", "elementAbsoluteTop", "targetPosition", "tabLink", "index", "e"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var N=Object.create;var g=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var n in e)g(t,n,{get:e[n],enumerable:!0})},h=(t,e,n,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of y(e))!F.call(t,r)&&r!==n&&g(t,r,{get:()=>e[r],enumerable:!(p=D(e,r))||p.enumerable});return t};var U=(t,e,n)=>(n=t!=null?N(R(t)):{},h(e||!t||!t.__esModule?g(n,"default",{value:t,enumerable:!0}):n,t)),$=t=>h(g({},"__esModule",{value:!0}),t);var S={};L(S,{default:()=>z});module.exports=$(S);var i=require("react/jsx-runtime"),b=U(require("react")),m=require("../../helpers/index.js"),u=require("../../components/index.js"),v=require("../../shared/Styles.js"),B=require("../../helpers/index.js"),P=require("../AiuiProvider/index.js"),T=require("../../shared/trackUrlRef.js");const w="image",H="PromotionalBar",I=t=>{if(!t)return;const{mobile:e,tablet:n,laptop:p,desktop:r,lgDesktop:x}=t,o=[],s=M=>M?.url,a=s(x),l=s(r),c=s(p),d=s(n),f=s(e);return a?o.push(a):l?o.push(l):c?o.push(c):d?o.push(d):f&&o.push(f),l&&a&&o.push(`${l} 1920`),c&&(l||a)&&o.push(`${c} 1440`),d&&(c||l||a)&&o.push(`${d} 1024`),f&&(d||c||l||a)&&o.push(`${f} 768`),o.length>0?o.join(", "):void 0},k=b.forwardRef(({classNames:t,data:e,className:n,...p},r)=>{const{locale:x="us",pageHandle:o}=(0,P.useAiuiContext)(),{backgroundImage:s,theme:a="dark"}=e,l=b.useMemo(()=>I(s),[s]);return(0,i.jsx)("div",{ref:r,...p,className:(0,m.cn)("laptop:h-[192px] lg-desktop:h-[240px] h-[240px] text-[#080A0F]",{"text-[#F5F6F7]":a==="dark"},t?.root,n),children:(0,i.jsxs)("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[(0,i.jsxs)("div",{className:(0,m.cn)("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",t?.content),children:[e.contentTitle&&(0,i.jsx)(u.Heading,{className:(0,m.cn)("line-clamp-2 ",t?.title),html:e.contentTitle,size:3}),e.contentDesc&&(0,i.jsx)("p",{className:(0,m.cn)("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] ",t?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),(0,i.jsx)("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&(0,i.jsx)(u.Button,{as:"a",variant:"link",className:(0,m.cn)("!p-0 text-[#F5F6F7]",{"text-[#080A0F]":a==="light"},t?.button),href:(0,T.trackUrlRef)((0,B.getLocalizedPath)(e.buttonLink||"",x),`${o}_${w}_${H}`),iconClassName:"size-4",children:e.buttonText})})]}),(0,i.jsx)(u.Picture,{source:l,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});k.displayName="PromotionalBar";var z=(0,v.withLayout)(k);
+"use strict";"use client";var R=Object.create;var x=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var n in t)x(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of L(t))!H.call(e,l)&&l!==n&&x(e,l,{get:()=>t[l],enumerable:!(c=y(t,l))||c.enumerable});return e};var w=(e,t,n)=>(n=e!=null?R(F(e)):{},v(t||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e)),I=e=>v(x({},"__esModule",{value:!0}),e);var _={};U(_,{default:()=>S});module.exports=I(_);var i=require("react/jsx-runtime"),h=w(require("react")),m=require("../../helpers/index.js"),u=require("../../components/index.js"),D=require("../../shared/Styles.js"),B=require("../../helpers/index.js"),M=require("../AiuiProvider/index.js"),P=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js");const b="image",k="promotional_bar",z=e=>{if(!e)return;const{mobile:t,tablet:n,laptop:c,desktop:l,lgDesktop:g}=e,o=[],p=N=>N?.url,r=p(g),s=p(l),a=p(c),d=p(n),f=p(t);return r?o.push(r):s?o.push(s):a?o.push(a):d?o.push(d):f&&o.push(f),s&&r&&o.push(`${s} 1920`),a&&(s||r)&&o.push(`${a} 1440`),d&&(a||s||r)&&o.push(`${d} 1024`),f&&(d||a||s||r)&&o.push(`${f} 768`),o.length>0?o.join(", "):void 0},T=h.forwardRef(({classNames:e,data:t,className:n,...c},l)=>{const{locale:g="us",trackingData:o}=(0,M.useAiuiContext)(),{backgroundImage:p,theme:r="dark"}=t,s=h.useMemo(()=>z(p),[p]),a=h.useRef(null);return(0,P.useExposure)(a,{componentType:b,componentName:k,componentTitle:t.contentTitle||"",componentDescription:t.contentDesc||""}),(0,i.jsx)("div",{ref:a,...c,className:(0,m.cn)("laptop:h-[192px] lg-desktop:h-[240px] h-[240px] text-[#080A0F]",{"text-[#F5F6F7]":r==="dark"},e?.root,n),children:(0,i.jsxs)("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[(0,i.jsxs)("div",{className:(0,m.cn)("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",e?.content),children:[t.contentTitle&&(0,i.jsx)(u.Heading,{className:(0,m.cn)("line-clamp-2 ",e?.title),html:t.contentTitle,size:3}),t.contentDesc&&(0,i.jsx)("p",{className:(0,m.cn)("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] ",e?.description),dangerouslySetInnerHTML:{__html:t.contentDesc}}),(0,i.jsx)("div",{className:"laptop:mt-4 mt-2",children:t.buttonText&&(0,i.jsx)(u.Button,{as:"a",variant:"link",className:(0,m.cn)("!p-0 text-[#F5F6F7]",{"text-[#080A0F]":r==="light"},e?.button),href:(0,$.trackUrlRef)((0,B.getLocalizedPath)(t.buttonLink||"",g),`${o?.contextHandle||""}_${b}_${k}`),iconClassName:"size-4","data-headless-type-name":`${b}#${k}`,"data-headless-title-desc-button":`${t.contentTitle||""}#${t.contentDesc||""}#${t.buttonText||""}`,children:t.buttonText})})]}),(0,i.jsx)(u.Picture,{source:s,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});T.displayName="PromotionalBar";var S=(0,D.withLayout)(T);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  theme: Theme\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\nconst componentType = 'image'\nconst componentName = 'PromotionalBar'\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { locale = 'us', pageHandle } = useAiuiContext()\n    const { backgroundImage, theme = 'dark' } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn(\n          'laptop:h-[192px] lg-desktop:h-[240px] h-[240px] text-[#080A0F]',\n          {\n            'text-[#F5F6F7]': theme === 'dark',\n          },\n          classNames?.root,\n          className\n        )}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading className={cn('line-clamp-2 ', classNames?.title)} html={data.contentTitle} size={3} />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] ',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn(\n                    '!p-0 text-[#F5F6F7]',\n                    {\n                      'text-[#080A0F]': theme === 'light',\n                    },\n                    classNames?.button\n                  )}\n                  href={trackUrlRef(\n                    getLocalizedPath(data.buttonLink || '', locale),\n                    `${pageHandle}_${componentType}_${componentName}`\n                  )}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4HU,IAAAI,EAAA,6BA1HVC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAAyC,qCACzCC,EAA2B,kCAE3BF,EAAiC,kCACjCG,EAA+B,oCAC/BC,EAA4B,uCAiD5B,MAAMC,EAAgB,QAChBC,EAAgB,iBAKhBC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBvB,EAAM,WAC3B,CAAC,CAAE,WAAAwB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,OAAAC,EAAS,KAAM,WAAAC,CAAW,KAAI,kBAAe,EAC/C,CAAE,gBAAArB,EAAiB,MAAAsB,EAAQ,MAAO,EAAIN,EACtCO,EAAgBhC,EAAM,QAAQ,IAC3BQ,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,SACE,OAAC,OACC,IAAKmB,EACJ,GAAGD,EACJ,aAAW,MACT,iEACA,CACE,iBAAkBI,IAAU,MAC9B,EACAP,GAAY,KACZE,CACF,EAGA,oBAAC,OAAI,UAAU,uEACb,qBAAC,OACC,aAAW,MACT,mLACAF,GAAY,OACd,EAEC,UAAAC,EAAK,iBACJ,OAAC,WAAQ,aAAW,MAAG,gBAAiBD,GAAY,KAAK,EAAG,KAAMC,EAAK,aAAc,KAAM,EAAG,EAE/FA,EAAK,gBACJ,OAAC,KACC,aAAW,MACT,+GACAD,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,KAEF,OAAC,OAAI,UAAU,mBACZ,SAAAA,EAAK,eACJ,OAAC,UACC,GAAG,IACH,QAAQ,OACR,aAAW,MACT,sBACA,CACE,iBAAkBM,IAAU,OAC9B,EACAP,GAAY,MACd,EACA,QAAM,kBACJ,oBAAiBC,EAAK,YAAc,GAAII,CAAM,EAC9C,GAAGC,CAAU,IAAIxB,CAAa,IAAIC,CAAa,EACjD,EACA,cAAc,SAEb,SAAAkB,EAAK,WACR,EAEJ,GACF,KACA,OAAC,WACC,OAAQO,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAT,EAAe,YAAc,iBAC7B,IAAO1B,KAAQ,cAAW0B,CAAc",
-  "names": ["PromotionalBar_exports", "__export", "PromotionalBar_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_Styles", "import_AiuiProvider", "import_trackUrlRef", "componentType", "componentName", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "locale", "pageHandle", "theme", "pictureSource"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'promotional_bar'\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  theme: Theme\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const { backgroundImage, theme = 'dark' } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    const innerRef = React.useRef<HTMLDivElement>(null)\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: data.contentTitle || '',\n      componentDescription: data.contentDesc || '',\n    })\n\n    return (\n      <div\n        ref={innerRef}\n        {...rest}\n        className={cn(\n          'laptop:h-[192px] lg-desktop:h-[240px] h-[240px] text-[#080A0F]',\n          {\n            'text-[#F5F6F7]': theme === 'dark',\n          },\n          classNames?.root,\n          className\n        )}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading className={cn('line-clamp-2 ', classNames?.title)} html={data.contentTitle} size={3} />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] ',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn(\n                    '!p-0 text-[#F5F6F7]',\n                    {\n                      'text-[#080A0F]': theme === 'light',\n                    },\n                    classNames?.button\n                  )}\n                  href={trackUrlRef(\n                    getLocalizedPath(data.buttonLink || '', locale),\n                    `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                  )}\n                  iconClassName=\"size-4\"\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${data.contentTitle || ''}#${data.contentDesc || ''}#${data.buttonText || ''}`}\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
+  "mappings": "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",
+  "names": ["PromotionalBar_exports", "__export", "PromotionalBar_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_Styles", "import_AiuiProvider", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "locale", "trackingData", "theme", "pictureSource", "innerRef"]
 }

package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface SecondaryBannerCarouselProps extends React.HTMLAttributes<HTMLElement>
     data: SecondaryBannerData;
     classNames?: Partial<Record<SecondaryBannerSemanticName, string>>;
     jumpOptions?: JumpOptions;
+    theme?: 'light' | 'dark';
 }
 /**
  * SecondaryBannerCarousel — arrows-only Navigation Swiper wrapping SecondaryBanner slides.

package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var M=Object.create;var u=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var E=(t,n)=>{for(var r in n)u(t,r,{get:n[r],enumerable:!0})},v=(t,n,r,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of O(n))!D.call(t,i)&&i!==r&&u(t,i,{get:()=>n[i],enumerable:!(c=A(n,i))||c.enumerable});return t};var S=(t,n,r)=>(r=t!=null?M(P(t)):{},v(n||!t||!t.__esModule?u(r,"default",{value:t,enumerable:!0}):r,t)),H=t=>v(u({},"__esModule",{value:!0}),t);var W={};E(W,{default:()=>J});module.exports=H(W);var e=require("react/jsx-runtime"),a=S(require("react")),m=require("swiper/react"),o=require("swiper/modules"),C=require("../../helpers/index.js"),_=S(require("./index.js")),V=require("swiper/css"),$=require("swiper/css/navigation"),G=require("swiper/css/pagination");const I=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),z=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=a.default.forwardRef(({data:t,className:n,classNames:r,jumpOptions:c,...i},k)=>{const w=t.items||[],d=t.carousel,b=(0,a.useRef)(null),[q,L]=(0,a.useState)(0),y=(0,a.useRef)(w.map(()=>a.default.createRef())),N=(d?.showArrows??!0)&&w.length>1,h=d?.showDots??!0,f=d?.autoplaySeconds,B=f!==void 0?[o.Navigation,o.Pagination,o.Autoplay]:[o.Navigation,o.Pagination],R=f!==void 0?{delay:f*1e3,disableOnInteraction:!1}:!1,T=(0,a.useCallback)(l=>{const s=l.realIndex;y.current.forEach((p,j)=>{j!==s&&p.current&&p.current.querySelectorAll("video").forEach(g=>{g.pause(),g.currentTime=0})}),L(s)},[]);return(0,e.jsxs)("section",{ref:k,className:(0,C.cn)("secondary-banner-carousel relative w-full overflow-hidden",n),...i,children:[(0,e.jsx)(m.Swiper,{onSwiper:l=>b.current=l,onSlideChange:T,modules:B,slidesPerView:1,loop:d?.loop??!0,initialSlide:0,allowTouchMove:!0,autoplay:R,pagination:h?{clickable:!0,el:".secondary-banner-pagination",renderBullet:(l,s)=>`<span class="${s} banner-dot"></span>`}:!1,children:w.map((l,s)=>(0,e.jsx)(m.SwiperSlide,{children:({isActive:p})=>(0,e.jsx)("div",{ref:y.current[s],children:(0,e.jsx)(_.default,{data:l,isActive:p,classNames:r,jumpOptions:c})})},s))}),N&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>b.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(I,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>b.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(z,{})})]}),h&&(0,e.jsx)("div",{className:"secondary-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100"})]})});x.displayName="SecondaryBannerCarousel";var J=x;
+"use strict";"use client";var P=Object.create;var y=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var J=(t,n)=>{for(var i in n)y(t,i,{get:n[i],enumerable:!0})},x=(t,n,i,m)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of H(n))!V.call(t,c)&&c!==i&&y(t,c,{get:()=>n[c],enumerable:!(m=z(n,c))||m.enumerable});return t};var k=(t,n,i)=>(i=t!=null?P(q(t)):{},x(n||!t||!t.__esModule?y(i,"default",{value:t,enumerable:!0}):i,t)),W=t=>x(y({},"__esModule",{value:!0}),t);var K={};J(K,{default:()=>G});module.exports=W(K);var e=require("react/jsx-runtime"),a=k(require("react")),v=require("swiper/react"),l=require("swiper/modules"),L=require("../../helpers/index.js"),_=k(require("./index.js")),B=require("./index.js"),X=require("swiper/css"),Y=require("swiper/css/navigation"),Z=require("swiper/css/pagination");const $=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),C=a.default.forwardRef(({data:t,className:n,classNames:i,jumpOptions:m,theme:c,...N},E)=>{const d=t.items||[],g=t.carousel,T=d[0]?.size??"base",f=(0,a.useRef)(null),[M,j]=(0,a.useState)(0),A=(c??d[M]?.theme??"light")==="dark";(0,a.useEffect)(()=>{const o=()=>{const r=f.current;if(r)if(document.visibilityState==="hidden")r.autoplay?.stop();else{r.autoplay?.start();const u=r.realIndex??0;b.current.forEach((s,h)=>{s.current&&s.current.querySelectorAll("video").forEach(w=>{h!==u&&w.pause()})})}};return document.addEventListener("visibilitychange",o),()=>document.removeEventListener("visibilitychange",o)},[]);const b=(0,a.useRef)(d.map(()=>a.default.createRef())),R=(g?.showArrows??!0)&&d.length>1,S=g?.showDots??!0,p=g?.autoplaySeconds??void 0,O=p!=null&&p>0?[l.Navigation,l.Pagination,l.Autoplay]:[l.Navigation,l.Pagination],D=p!=null&&p>0?{delay:Math.max(p*1e3,3e3),disableOnInteraction:!1}:!1,I=(0,a.useCallback)(o=>{const r=o.realIndex;b.current.forEach((s,h)=>{h!==r&&s.current&&s.current.querySelectorAll("video").forEach(w=>{w.pause(),w.currentTime=0})});const u=b.current[r];u?.current&&u.current.querySelectorAll("video").forEach(s=>{s.paused&&s.play()?.catch(()=>{})}),j(r)},[]);return(0,e.jsxs)("section",{ref:E,className:(0,L.cn)("secondary-banner-carousel relative w-full overflow-hidden",(0,B.secondaryBannerVariants)({size:T}),{"aiui-dark":A},n),...N,children:[(0,e.jsx)(v.Swiper,{onSwiper:o=>f.current=o,onSlideChange:I,modules:O,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:D,pagination:S?{clickable:!0,el:".secondary-banner-pagination",renderBullet:(o,r)=>`<span class="${r} banner-dot"></span>`}:!1,children:d.map((o,r)=>(0,e.jsx)(v.SwiperSlide,{children:({isActive:u})=>(0,e.jsx)("div",{ref:b.current[r],children:(0,e.jsx)(_.default,{data:o,isActive:u,classNames:i,jumpOptions:m})})},r))}),R&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>f.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)($,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>f.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(F,{})})]}),S&&(0,e.jsx)("div",{className:"secondary-banner-pagination swiper-pagination tablet:bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100"})]})});C.displayName="SecondaryBannerCarousel";var G=C;
 //# sourceMappingURL=SecondaryBannerCarousel.js.map

package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SecondaryBanner/SecondaryBannerCarousel.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn } from '../../helpers/index.js'\nimport SecondaryBanner from './index.js'\nimport type { SecondaryBannerData, SecondaryBannerSemanticName, JumpOptions } from './index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n  <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface SecondaryBannerCarouselProps extends React.HTMLAttributes<HTMLElement> {\n  data: SecondaryBannerData\n  classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n  jumpOptions?: JumpOptions\n}\n\n/**\n * SecondaryBannerCarousel \u2014 arrows-only Navigation Swiper wrapping SecondaryBanner slides.\n *\n * Architecture:\n *  - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n *  - DECISION-A005: isActive pass-through to SecondaryBanner; querySelectorAll for video pause\n *  - DECISION-008:  SecondaryBanner.isActive => autoPlay={isActive ?? true}\n *  - DECISION-A006: arrow buttons at z-[20], above any overlay\n */\nconst SecondaryBannerCarousel = React.forwardRef<HTMLElement, SecondaryBannerCarouselProps>(\n  ({ data, className, classNames, jumpOptions, ...rest }, ref) => {\n    const items = data.items || []\n    const carousel = data.carousel\n\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [_activeIndex, setActiveIndex] = useState(0)\n\n    // Slide container refs for imperative video pause via querySelectorAll (DECISION-A005)\n    // Used as defense-in-depth; isActive prop is the primary control mechanism.\n    const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n      items.map(() => React.createRef<HTMLDivElement>())\n    )\n\n    // Arrow visibility formula \u2014 DECISION-011\n    const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n    // Pagination dots visibility formula \u2014 DECISION-006\n    const showDots = carousel?.showDots ?? true\n\n    // Autoplay module configuration \u2014 DECISION-006\n    const autoplaySeconds = carousel?.autoplaySeconds\n    const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n    const autoplayConfig =\n      autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n    // Slide transition handler \u2014 pause inactive slide videos via querySelectorAll (DECISION-A005)\n    const handleSlideChange = useCallback((swiper: SwiperType) => {\n      const newIndex = swiper.realIndex\n      // Defense-in-depth: imperatively pause videos in inactive slides\n      slideContainerRefs.current.forEach((cRef, i) => {\n        if (i !== newIndex && cRef.current) {\n          cRef.current.querySelectorAll('video').forEach(v => {\n            v.pause()\n            v.currentTime = 0\n          })\n        }\n      })\n      setActiveIndex(newIndex)\n    }, [])\n\n    return (\n      <section\n        ref={ref}\n        className={cn('secondary-banner-carousel relative w-full overflow-hidden', className)}\n        {...rest}\n      >\n        <Swiper\n          onSwiper={s => (swiperRef.current = s)}\n          onSlideChange={handleSlideChange}\n          modules={swiperModules}\n          slidesPerView={1}\n          loop={carousel?.loop ?? true}\n          initialSlide={0}\n          allowTouchMove={true}\n          autoplay={autoplayConfig}\n          pagination={\n            showDots\n              ? {\n                  clickable: true,\n                  el: '.secondary-banner-pagination',\n                  renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n                }\n              : false\n          }\n        >\n          {items.map((slideData, index) => (\n            <SwiperSlide key={index}>\n              {({ isActive }) => (\n                <div ref={slideContainerRefs.current[index]}>\n                  <SecondaryBanner\n                    data={slideData}\n                    isActive={isActive}\n                    classNames={classNames}\n                    jumpOptions={jumpOptions}\n                  />\n                </div>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n\n        {/* Arrow navigation \u2014 z-[20] for consistency with HeroBannerCarousel \u2014 DECISION-A006 */}\n        {showArrowControls && (\n          <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n            <button\n              type=\"button\"\n              className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n              onClick={() => swiperRef.current?.slidePrev()}\n              aria-label=\"Previous banner\"\n            >\n              <ChevronLeft />\n            </button>\n            <button\n              type=\"button\"\n              className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n              onClick={() => swiperRef.current?.slideNext()}\n              aria-label=\"Next banner\"\n            >\n              <ChevronRight />\n            </button>\n          </div>\n        )}\n\n        {/* Pagination dots \u2014 visible on all devices */}\n        {showDots && (\n          <div className=\"secondary-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n        )}\n      </section>\n    )\n  }\n)\n\nSecondaryBannerCarousel.displayName = 'SecondaryBannerCarousel'\n\nexport default SecondaryBannerCarousel\n"],
-  "mappings": "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",
-  "names": ["SecondaryBannerCarousel_exports", "__export", "SecondaryBannerCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_helpers", "import_index", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "SecondaryBannerCarousel", "React", "data", "className", "classNames", "jumpOptions", "rest", "ref", "items", "carousel", "swiperRef", "_activeIndex", "setActiveIndex", "slideContainerRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "handleSlideChange", "swiper", "newIndex", "cRef", "i", "v", "s", "_index", "slideData", "index", "isActive", "SecondaryBanner"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useCallback, useState, useEffect } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { cn } from '../../helpers/index.js'\nimport SecondaryBanner from './index.js'\nimport type { SecondaryBannerData, SecondaryBannerSemanticName, JumpOptions } from './index.js'\nimport { secondaryBannerVariants } from './index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n  <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n// \u2500\u2500 Props \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface SecondaryBannerCarouselProps extends React.HTMLAttributes<HTMLElement> {\n  data: SecondaryBannerData\n  classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n  jumpOptions?: JumpOptions\n  theme?: 'light' | 'dark'\n}\n\n/**\n * SecondaryBannerCarousel \u2014 arrows-only Navigation Swiper wrapping SecondaryBanner slides.\n *\n * Architecture:\n *  - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n *  - DECISION-A005: isActive pass-through to SecondaryBanner; querySelectorAll for video pause\n *  - DECISION-008:  SecondaryBanner.isActive => autoPlay={isActive ?? true}\n *  - DECISION-A006: arrow buttons at z-[20], above any overlay\n */\nconst SecondaryBannerCarousel = React.forwardRef<HTMLElement, SecondaryBannerCarouselProps>(\n  ({ data, className, classNames, jumpOptions, theme, ...rest }, ref) => {\n    const items = data.items || []\n    const carousel = data.carousel\n    const containerSize = items[0]?.size ?? 'base'\n\n    const swiperRef = useRef<SwiperType | null>(null)\n    const [activeIndex, setActiveIndex] = useState(0)\n\n    const activeTheme = theme ?? items[activeIndex]?.theme ?? 'light'\n    const isDark = activeTheme === 'dark'\n\n    useEffect(() => {\n      const handleVisibilityChange = () => {\n        const swiper = swiperRef.current\n        if (!swiper) return\n\n        if (document.visibilityState === 'hidden') {\n          swiper.autoplay?.stop()\n        } else {\n          swiper.autoplay?.start()\n          const currentIndex = swiper.realIndex ?? 0\n          slideContainerRefs.current.forEach((cRef, i) => {\n            if (!cRef.current) return\n            cRef.current.querySelectorAll('video').forEach(v => {\n              if (i !== currentIndex) v.pause()\n            })\n          })\n        }\n      }\n      document.addEventListener('visibilitychange', handleVisibilityChange)\n      return () => document.removeEventListener('visibilitychange', handleVisibilityChange)\n    }, [])\n\n    // Slide container refs for imperative video pause via querySelectorAll (DECISION-A005)\n    const slideContainerRefs = useRef<React.RefObject<HTMLDivElement>[]>(\n      items.map(() => React.createRef<HTMLDivElement>())\n    )\n\n    // Arrow visibility formula \u2014 DECISION-011\n    const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n    // Pagination dots visibility formula \u2014 DECISION-006\n    const showDots = carousel?.showDots ?? true\n\n    // Autoplay module configuration \u2014 DECISION-006\n    const autoplaySeconds = carousel?.autoplaySeconds ?? undefined\n    const swiperModules =\n      autoplaySeconds != null && autoplaySeconds > 0 ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n    const autoplayConfig =\n      autoplaySeconds != null && autoplaySeconds > 0\n        ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n        : false\n\n    const handleSlideChange = useCallback((swiper: SwiperType) => {\n      const newIndex = swiper.realIndex\n      slideContainerRefs.current.forEach((cRef, i) => {\n        if (i !== newIndex && cRef.current) {\n          cRef.current.querySelectorAll('video').forEach(v => {\n            v.pause()\n            v.currentTime = 0\n          })\n        }\n      })\n      const activeContainer = slideContainerRefs.current[newIndex]\n      if (activeContainer?.current) {\n        activeContainer.current.querySelectorAll('video').forEach(v => {\n          if (v.paused) {\n            const p = v.play()\n            p?.catch(() => {})\n          }\n        })\n      }\n      setActiveIndex(newIndex)\n    }, [])\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          'secondary-banner-carousel relative w-full overflow-hidden',\n          secondaryBannerVariants({ size: containerSize }),\n          { 'aiui-dark': isDark },\n          className\n        )}\n        {...rest}\n      >\n        <Swiper\n          onSwiper={s => (swiperRef.current = s)}\n          onSlideChange={handleSlideChange}\n          modules={swiperModules}\n          slidesPerView={1}\n          loop={true}\n          initialSlide={0}\n          allowTouchMove={true}\n          autoplay={autoplayConfig}\n          pagination={\n            showDots\n              ? {\n                  clickable: true,\n                  el: '.secondary-banner-pagination',\n                  renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n                }\n              : false\n          }\n        >\n          {items.map((slideData, index) => (\n            <SwiperSlide key={index}>\n              {({ isActive }) => (\n                <div ref={slideContainerRefs.current[index]}>\n                  <SecondaryBanner\n                    data={slideData}\n                    isActive={isActive}\n                    classNames={classNames}\n                    jumpOptions={jumpOptions}\n                  />\n                </div>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n\n        {/* Arrow navigation \u2014 z-[20] for consistency with HeroBannerCarousel \u2014 DECISION-A006 */}\n        {showArrowControls && (\n          <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n            <button\n              type=\"button\"\n              className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n              onClick={() => swiperRef.current?.slidePrev()}\n              aria-label=\"Previous banner\"\n            >\n              <ChevronLeft />\n            </button>\n            <button\n              type=\"button\"\n              className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n              onClick={() => swiperRef.current?.slideNext()}\n              aria-label=\"Next banner\"\n            >\n              <ChevronRight />\n            </button>\n          </div>\n        )}\n\n        {/* Pagination dots \u2014 visible on all devices */}\n        {showDots && (\n          <div className=\"secondary-banner-pagination swiper-pagination tablet:bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n        )}\n      </section>\n    )\n  }\n)\n\nSecondaryBannerCarousel.displayName = 'SecondaryBannerCarousel'\n\nexport default SecondaryBannerCarousel\n"],
+  "mappings": "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",
+  "names": ["SecondaryBannerCarousel_exports", "__export", "SecondaryBannerCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_helpers", "import_index", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "SecondaryBannerCarousel", "React", "data", "className", "classNames", "jumpOptions", "theme", "rest", "ref", "items", "carousel", "containerSize", "swiperRef", "activeIndex", "setActiveIndex", "isDark", "handleVisibilityChange", "swiper", "currentIndex", "slideContainerRefs", "cRef", "i", "v", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "handleSlideChange", "newIndex", "activeContainer", "s", "_index", "slideData", "index", "isActive", "SecondaryBanner"]
 }

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

@@ -64,6 +64,9 @@ export interface JumpOptions {
     /** 是否考虑 a11y @default false */
     a11y?: boolean;
 }
+export declare const secondaryBannerVariants: (props?: ({
+    size?: "base" | "lg" | "sm" | "xlg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * SecondaryBanner 业务组件数据接口
  */
@@ -128,6 +131,12 @@ export interface SecondaryBannerData {
      * Single-banner mode is used when absent or empty (DECISION-002).
      */
     items?: SecondaryBannerSlideData[];
+    /**
+     * Display mode: 'single' renders the first frame only; 'carousel' activates Swiper.
+     * Mirrors the CMS `mode` field (single | carousel). Defaults to single-banner path
+     * when absent (backward-compatible with legacy data that has no mode field).
+     */
+    mode?: 'single' | 'carousel';
     /**
      * Carousel navigation configuration.
      * Only meaningful when data.items is present and has 2+ items.