npm - @anker-in/headless-ui - Versions diffs - 1.1.78 → 1.1.79 - Mend

@anker-in/headless-ui 1.1.78 → 1.1.79

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

package/dist/cjs/helpers/utils.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},p=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of c(e))!x.call(t,n)&&n!==r&&o(t,n,{get:()=>e[n],enumerable:!(i=g(e,n))||i.enumerable});return t};var f=t=>p(o({},"__esModule",{value:!0}),t);var S={};l(S,{atobID:()=>y,cn:()=>h,getLocalizedPath:()=>w,highlightSearchWord:()=>b,noop:()=>d,spaceToHyphen:()=>m});module.exports=f(S);var s=require("clsx"),a=require("tailwind-merge");const u=(0,a.extendTailwindMerge)({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function h(...t){return u((0,s.clsx)(t))}function d(){}function y(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const m=t=>t?.replace(/\s+/g,"-"),$=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),b=(t,e)=>{try{if(!t||!e)return t;const r=$(e),i=new RegExp(r,"gi");return t.replace(i,n=>`<span class='text-brand-0 font-bold'>${n}</span>`)}catch(r){return console.error("highlightSearchWord error:",r),t}},w=(t,e)=>{if(!t||t.startsWith("http://")||t.startsWith("https://"))return t;const r=t.split("/").filter(Boolean);return r.length===0?e==="us"?"/":`/${e}`:r[0]===e?`/${r.join("/")}`:`${e==="us"?"":`/${e}`}/${r.join("/")}`};
+"use strict";var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},p=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of c(e))!x.call(t,n)&&n!==r&&s(t,n,{get:()=>e[n],enumerable:!(i=g(e,n))||i.enumerable});return t};var f=t=>p(s({},"__esModule",{value:!0}),t);var w={};l(w,{atobID:()=>y,cn:()=>h,getLocalizedPath:()=>W,highlightSearchWord:()=>b,noop:()=>d,spaceToHyphen:()=>m});module.exports=f(w);var o=require("clsx"),a=require("tailwind-merge");const u=(0,a.extendTailwindMerge)({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function h(...t){return u((0,o.clsx)(t))}function d(){}function y(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const m=t=>t?.replace(/\s+/g,"-"),$=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),b=(t,e)=>{try{if(!t||!e)return t;const r=$(e),i=new RegExp(r,"gi");return t.replace(i,n=>`<span class='text-brand-0 font-bold'>${n}</span>`)}catch(r){return console.error("highlightSearchWord error:",r),t}},W=(t,e)=>{if(!t||t.startsWith("http://")||t.startsWith("https://")||t.startsWith("#"))return t;const r=t.split("/").filter(Boolean);return r.length===0?e==="us"?"/":`/${e}`:r[0]===e?`/${r.join("/")}`:`${e==="us"?"":`/${e}`}/${r.join("/")}`};
 //# sourceMappingURL=utils.js.map

package/dist/cjs/helpers/utils.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/utils.ts"],
-  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\n/**\n * \u8F6C\u4E49\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n * @param str \u9700\u8981\u8F6C\u4E49\u7684\u5B57\u7B26\u4E32\n * @returns \u8F6C\u4E49\u540E\u7684\u5B57\u7B26\u4E32\n */\nconst escapeRegExp = (str: string): string => {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u9AD8\u4EAE\u641C\u7D22\u5173\u952E\u8BCD\n * @param text \u539F\u59CB\u6587\u672C\n * @param searchText \u641C\u7D22\u5173\u952E\u8BCD\n * @returns \u9AD8\u4EAE\u540E\u7684 HTML \u5B57\u7B26\u4E32\n */\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    if (!text || !searchText) {\n      return text\n    }\n\n    // \u8F6C\u4E49\u641C\u7D22\u6587\u672C\u4E2D\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n    const escapedSearchText = escapeRegExp(searchText)\n    const regex = new RegExp(escapedSearchText, 'gi')\n\n    // \u4F7F\u7528\u6B63\u5219\u8868\u8FBE\u5F0F\u7684\u5339\u914D\u7ED3\u679C\u6765\u4FDD\u6301\u539F\u59CB\u5927\u5C0F\u5199\n    return text.replace(regex, match => `<span class='text-brand-0 font-bold'>${match}</span>`)\n  } catch (e) {\n    console.error('highlightSearchWord error:', e)\n    return text\n  }\n}\n\n/**\n * \u83B7\u53D6\u672C\u5730\u5316\u8DEF\u5F84\n *\n * \u6839\u636E\u8BED\u8A00\u6807\u8BC6\u4E3A\u8DEF\u5F84\u6DFB\u52A0\u5BF9\u5E94\u7684 locale \u524D\u7F00\u3002\n * - 'us' \u4E3A\u9ED8\u8BA4\u8BED\u8A00\uFF0C\u4E0D\u6DFB\u52A0\u524D\u7F00\n * - \u5176\u4ED6\u8BED\u8A00\u4F1A\u6DFB\u52A0 `/{locale}` \u524D\u7F00\n * - \u5B8C\u6574 URL\uFF08http/https\uFF09\u4E0D\u505A\u5904\u7406\n * - \u81EA\u52A8\u5904\u7406\u8DEF\u5F84\u683C\u5F0F\uFF08\u8865\u5145\u524D\u5BFC\u659C\u6760\u3001\u79FB\u9664\u5C3E\u90E8\u659C\u6760\uFF09\n *\n * @param path - \u539F\u59CB\u8DEF\u5F84\n * @param locale - \u8BED\u8A00\u6807\u8BC6\uFF08\u5982 'us', 'uk', 'de', 'jp' \u7B49\uFF09\n * @returns \u672C\u5730\u5316\u540E\u7684\u8DEF\u5F84\n *\n * @example\n * // \u57FA\u672C\u7528\u6CD5 - \u9ED8\u8BA4\u8BED\u8A00 'us' \u4E0D\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'us')          // => '/products'\n * getLocalizedPath('/about', 'us')             // => '/about'\n *\n * @example\n * // \u5176\u4ED6\u8BED\u8A00\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'uk')          // => '/uk/products'\n * getLocalizedPath('/about/team', 'de')        // => '/de/about/team'\n * getLocalizedPath('/contact', 'jp')           // => '/jp/contact'\n *\n * @example\n * // \u6839\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('/', 'us')                  // => '/'\n * getLocalizedPath('/', 'uk')                  // => '/uk'\n *\n * @example\n * // \u81EA\u52A8\u683C\u5F0F\u5316\u8DEF\u5F84\n * getLocalizedPath('products', 'uk')           // => '/uk/products' (\u8865\u5145\u524D\u5BFC\u659C\u6760)\n * getLocalizedPath('/products/', 'uk')         // => '/uk/products' (\u79FB\u9664\u5C3E\u90E8\u659C\u6760)\n * getLocalizedPath('//products//detail/', 'uk') // => '/uk/products/detail' (\u79FB\u9664\u591A\u4F59\u659C\u6760)\n *\n * @example\n * // \u5DF2\u5305\u542B locale \u7684\u8DEF\u5F84\u4E0D\u91CD\u590D\u6DFB\u52A0\n * getLocalizedPath('/uk/products', 'uk')       // => '/uk/products'\n *\n * @example\n * // \u5B8C\u6574 URL \u4E0D\u5904\u7406\n * getLocalizedPath('https://example.com/page', 'uk')  // => 'https://example.com/page'\n * getLocalizedPath('http://example.com', 'de')        // => 'http://example.com'\n *\n * @example\n * // \u7A7A\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('', 'uk')                   // => ''\n */\nexport const getLocalizedPath = (path: string, locale: string): string => {\n  if (!path) return path\n\n  // \u5982\u679C\u662F\u5B8C\u6574 URL\uFF08http:// \u6216 https://\uFF09\uFF0C\u4E0D\u5904\u7406\n  if (path.startsWith('http://') || path.startsWith('https://')) {\n    return path\n  }\n\n  // \u5206\u5272\u8DEF\u5F84\u5E76\u8FC7\u6EE4\u7A7A\u6BB5\uFF08\u5904\u7406\u591A\u4E2A\u8FDE\u7EED\u659C\u6760\u7684\u60C5\u51B5\uFF09\n  const pathSegments = path.split('/').filter(Boolean)\n\n  // \u5982\u679C\u6CA1\u6709\u6709\u6548\u8DEF\u5F84\u6BB5\uFF0C\u8FD4\u56DE locale \u524D\u7F00\u6216 '/'\n  if (pathSegments.length === 0) {\n    return locale === 'us' ? '/' : `/${locale}`\n  }\n\n  // \u68C0\u67E5\u8DEF\u5F84\u662F\u5426\u5DF2\u7ECF\u5305\u542B locale\n  if (pathSegments[0] === locale) {\n    return `/${pathSegments.join('/')}`\n  }\n\n  // \u83B7\u53D6 locale \u524D\u7F00\u5E76\u62FC\u63A5\n  const localePrefix = locale === 'us' ? '' : `/${locale}`\n  return `${localePrefix}/${pathSegments.join('/')}`\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,OAAAC,EAAA,qBAAAC,EAAA,wBAAAC,EAAA,SAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAR,GAAA,IAAAS,EAAsC,gBACtCC,EAAoC,0BAEpC,MAAMC,KAAU,uBAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASR,KAAMS,EAAsB,CAC1C,OAAOD,KAAQ,QAAKC,CAAM,CAAC,CAC7B,CAEO,SAASN,GAAY,CAAC,CAEtB,SAASJ,EAAOW,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMN,EAAiBO,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAOhEC,EAAgBD,GACbA,EAAI,QAAQ,sBAAuB,MAAM,EASrCT,EAAsB,CAACW,EAAcC,IAAuB,CACvE,GAAI,CACF,GAAI,CAACD,GAAQ,CAACC,EACZ,OAAOD,EAIT,MAAME,EAAoBH,EAAaE,CAAU,EAC3CE,EAAQ,IAAI,OAAOD,EAAmB,IAAI,EAGhD,OAAOF,EAAK,QAAQG,EAAOC,GAAS,wCAAwCA,CAAK,SAAS,CAC5F,OAASC,EAAG,CACV,eAAQ,MAAM,6BAA8BA,CAAC,EACtCL,CACT,CACF,EAkDaZ,EAAmB,CAACkB,EAAcC,IAA2B,CAIxE,GAHI,CAACD,GAGDA,EAAK,WAAW,SAAS,GAAKA,EAAK,WAAW,UAAU,EAC1D,OAAOA,EAIT,MAAME,EAAeF,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,EAGnD,OAAIE,EAAa,SAAW,EACnBD,IAAW,KAAO,IAAM,IAAIA,CAAM,GAIvCC,EAAa,CAAC,IAAMD,EACf,IAAIC,EAAa,KAAK,GAAG,CAAC,GAK5B,GADcD,IAAW,KAAO,GAAK,IAAIA,CAAM,EAChC,IAAIC,EAAa,KAAK,GAAG,CAAC,EAClD",
+  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\n/**\n * \u8F6C\u4E49\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n * @param str \u9700\u8981\u8F6C\u4E49\u7684\u5B57\u7B26\u4E32\n * @returns \u8F6C\u4E49\u540E\u7684\u5B57\u7B26\u4E32\n */\nconst escapeRegExp = (str: string): string => {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u9AD8\u4EAE\u641C\u7D22\u5173\u952E\u8BCD\n * @param text \u539F\u59CB\u6587\u672C\n * @param searchText \u641C\u7D22\u5173\u952E\u8BCD\n * @returns \u9AD8\u4EAE\u540E\u7684 HTML \u5B57\u7B26\u4E32\n */\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    if (!text || !searchText) {\n      return text\n    }\n\n    // \u8F6C\u4E49\u641C\u7D22\u6587\u672C\u4E2D\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n    const escapedSearchText = escapeRegExp(searchText)\n    const regex = new RegExp(escapedSearchText, 'gi')\n\n    // \u4F7F\u7528\u6B63\u5219\u8868\u8FBE\u5F0F\u7684\u5339\u914D\u7ED3\u679C\u6765\u4FDD\u6301\u539F\u59CB\u5927\u5C0F\u5199\n    return text.replace(regex, match => `<span class='text-brand-0 font-bold'>${match}</span>`)\n  } catch (e) {\n    console.error('highlightSearchWord error:', e)\n    return text\n  }\n}\n\n/**\n * \u83B7\u53D6\u672C\u5730\u5316\u8DEF\u5F84\n *\n * \u6839\u636E\u8BED\u8A00\u6807\u8BC6\u4E3A\u8DEF\u5F84\u6DFB\u52A0\u5BF9\u5E94\u7684 locale \u524D\u7F00\u3002\n * - 'us' \u4E3A\u9ED8\u8BA4\u8BED\u8A00\uFF0C\u4E0D\u6DFB\u52A0\u524D\u7F00\n * - \u5176\u4ED6\u8BED\u8A00\u4F1A\u6DFB\u52A0 `/{locale}` \u524D\u7F00\n * - \u5B8C\u6574 URL\uFF08http/https\uFF09\u4E0D\u505A\u5904\u7406\n * - \u81EA\u52A8\u5904\u7406\u8DEF\u5F84\u683C\u5F0F\uFF08\u8865\u5145\u524D\u5BFC\u659C\u6760\u3001\u79FB\u9664\u5C3E\u90E8\u659C\u6760\uFF09\n *\n * @param path - \u539F\u59CB\u8DEF\u5F84\n * @param locale - \u8BED\u8A00\u6807\u8BC6\uFF08\u5982 'us', 'uk', 'de', 'jp' \u7B49\uFF09\n * @returns \u672C\u5730\u5316\u540E\u7684\u8DEF\u5F84\n *\n * @example\n * // \u57FA\u672C\u7528\u6CD5 - \u9ED8\u8BA4\u8BED\u8A00 'us' \u4E0D\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'us')          // => '/products'\n * getLocalizedPath('/about', 'us')             // => '/about'\n *\n * @example\n * // \u5176\u4ED6\u8BED\u8A00\u6DFB\u52A0\u524D\u7F00\n * getLocalizedPath('/products', 'uk')          // => '/uk/products'\n * getLocalizedPath('/about/team', 'de')        // => '/de/about/team'\n * getLocalizedPath('/contact', 'jp')           // => '/jp/contact'\n *\n * @example\n * // \u6839\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('/', 'us')                  // => '/'\n * getLocalizedPath('/', 'uk')                  // => '/uk'\n *\n * @example\n * // \u81EA\u52A8\u683C\u5F0F\u5316\u8DEF\u5F84\n * getLocalizedPath('products', 'uk')           // => '/uk/products' (\u8865\u5145\u524D\u5BFC\u659C\u6760)\n * getLocalizedPath('/products/', 'uk')         // => '/uk/products' (\u79FB\u9664\u5C3E\u90E8\u659C\u6760)\n * getLocalizedPath('//products//detail/', 'uk') // => '/uk/products/detail' (\u79FB\u9664\u591A\u4F59\u659C\u6760)\n *\n * @example\n * // \u5DF2\u5305\u542B locale \u7684\u8DEF\u5F84\u4E0D\u91CD\u590D\u6DFB\u52A0\n * getLocalizedPath('/uk/products', 'uk')       // => '/uk/products'\n *\n * @example\n * // \u5B8C\u6574 URL \u4E0D\u5904\u7406\n * getLocalizedPath('https://example.com/page', 'uk')  // => 'https://example.com/page'\n * getLocalizedPath('http://example.com', 'de')        // => 'http://example.com'\n *\n * @example\n * // \u7A7A\u8DEF\u5F84\u5904\u7406\n * getLocalizedPath('', 'uk')                   // => ''\n */\nexport const getLocalizedPath = (path: string, locale: string): string => {\n  if (!path) return path\n\n  // \u5982\u679C\u662F\u5B8C\u6574 URL\uFF08http:// \u6216 https://\uFF09\u6216\u951A\u70B9\u94FE\u63A5\uFF08#\uFF09\uFF0C\u4E0D\u5904\u7406\n  if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('#')) {\n    return path\n  }\n\n  // \u5206\u5272\u8DEF\u5F84\u5E76\u8FC7\u6EE4\u7A7A\u6BB5\uFF08\u5904\u7406\u591A\u4E2A\u8FDE\u7EED\u659C\u6760\u7684\u60C5\u51B5\uFF09\n  const pathSegments = path.split('/').filter(Boolean)\n\n  // \u5982\u679C\u6CA1\u6709\u6709\u6548\u8DEF\u5F84\u6BB5\uFF0C\u8FD4\u56DE locale \u524D\u7F00\u6216 '/'\n  if (pathSegments.length === 0) {\n    return locale === 'us' ? '/' : `/${locale}`\n  }\n\n  // \u68C0\u67E5\u8DEF\u5F84\u662F\u5426\u5DF2\u7ECF\u5305\u542B locale\n  if (pathSegments[0] === locale) {\n    return `/${pathSegments.join('/')}`\n  }\n\n  // \u83B7\u53D6 locale \u524D\u7F00\u5E76\u62FC\u63A5\n  const localePrefix = locale === 'us' ? '' : `/${locale}`\n  return `${localePrefix}/${pathSegments.join('/')}`\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,OAAAC,EAAA,qBAAAC,EAAA,wBAAAC,EAAA,SAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAR,GAAA,IAAAS,EAAsC,gBACtCC,EAAoC,0BAEpC,MAAMC,KAAU,uBAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASR,KAAMS,EAAsB,CAC1C,OAAOD,KAAQ,QAAKC,CAAM,CAAC,CAC7B,CAEO,SAASN,GAAY,CAAC,CAEtB,SAASJ,EAAOW,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMN,EAAiBO,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAOhEC,EAAgBD,GACbA,EAAI,QAAQ,sBAAuB,MAAM,EASrCT,EAAsB,CAACW,EAAcC,IAAuB,CACvE,GAAI,CACF,GAAI,CAACD,GAAQ,CAACC,EACZ,OAAOD,EAIT,MAAME,EAAoBH,EAAaE,CAAU,EAC3CE,EAAQ,IAAI,OAAOD,EAAmB,IAAI,EAGhD,OAAOF,EAAK,QAAQG,EAAOC,GAAS,wCAAwCA,CAAK,SAAS,CAC5F,OAASC,EAAG,CACV,eAAQ,MAAM,6BAA8BA,CAAC,EACtCL,CACT,CACF,EAkDaZ,EAAmB,CAACkB,EAAcC,IAA2B,CAIxE,GAHI,CAACD,GAGDA,EAAK,WAAW,SAAS,GAAKA,EAAK,WAAW,UAAU,GAAKA,EAAK,WAAW,GAAG,EAClF,OAAOA,EAIT,MAAME,EAAeF,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,EAGnD,OAAIE,EAAa,SAAW,EACnBD,IAAW,KAAO,IAAM,IAAIA,CAAM,GAIvCC,EAAa,CAAC,IAAMD,EACf,IAAIC,EAAa,KAAK,GAAG,CAAC,GAK5B,GADcD,IAAW,KAAO,GAAK,IAAIA,CAAM,EAChC,IAAIC,EAAa,KAAK,GAAG,CAAC,EAClD",
   "names": ["utils_exports", "__export", "atobID", "cn", "getLocalizedPath", "highlightSearchWord", "noop", "spaceToHyphen", "__toCommonJS", "import_clsx", "import_tailwind_merge", "twMerge", "inputs", "id", "str", "escapeRegExp", "text", "searchText", "escapedSearchText", "regex", "match", "e", "path", "locale", "pathSegments"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-position={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-position={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us' } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n          'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        <Link\n          href={getLocalizedPath(button.link || '', locale)}\n          className=\"image-with-text__button whitespace-nowrap no-underline\"\n          suffixIcon={ArrowRight}\n        >\n          {button.text}\n        </Link>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (title || desc || datalist.length > 0) && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (title || subtitle || desc || descIcon || hasItems || hasButton) && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <div\n              className={cn('image-with-text__header', {\n                'laptop:flex laptop:items-end laptop:justify-between laptop:gap-16':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'w-full': hasItems,\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  })}\n                />\n                {subtitle && (\n                  <Text\n                    as={'p'}\n                    size={hasItems ? 4 : 3}\n                    html={subtitle}\n                    className={cn(\n                      'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                      {\n                        'laptop:mt-[16px]': !hasItems,\n                        'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                        'text-left': hasItems && textAlign === 'left',\n                        'text-center': hasItems && textAlign === 'center',\n                      }\n                    )}\n                  />\n                )}\n              </div>\n              {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n                <Link\n                  href={getLocalizedPath(button.link || '', locale)}\n                  className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n                  suffixIcon={ArrowRight}\n                >\n                  {button.text}\n                </Link>\n              )}\n            </div>\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F top \u6216 bottom \u65F6\uFF1A\u9ED8\u8BA4 cols \u662F 2\uFF0Ctablet \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 4\n                  'grid-cols-2 tablet:grid-cols-4': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F left \u6216 right \u65F6\uFF1Acols \u9ED8\u8BA4\u662F 2\uFF0Ctablet \u662F 4\uFF0Claptop \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 2\n                  'grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2':\n                    effectiveLayout === 'left' || effectiveLayout === 'right',\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'w-[60%] shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ArrowRight = (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n    <path\n      d=\"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    layout = 'left',\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    button,\n    textAlign = 'left',\n  } = data\n\n  const effectiveLayout = layout\n\n  const { locale = 'us' } = useAiuiContext()\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n  const mediaWrapperRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u903B\u8F91\uFF08\u4F7F\u7528 useEffect \u907F\u514D\u95ED\u5305\u95EE\u9898\uFF09\n  const [videoIntersected, setVideoIntersected] = useState(false)\n\n  // \u4F7F\u7528 IntersectionObserver \u68C0\u6D4B\u5A92\u4F53\u533A\u57DF\u662F\u5426\u53EF\u89C1\uFF08\u76D1\u542C\u7236\u5BB9\u5668\u907F\u514D\u54CD\u5E94\u5F0F\u9690\u85CF\u95EE\u9898\uFF09\n  useIntersectionObserverDelay(mediaWrapperRef, {\n    once: true,\n    threshold: 0.01,\n    callback: () => {\n      setVideoIntersected(true)\n    },\n  })\n\n  // \u5F53\u89C6\u9891\u533A\u57DF\u53EF\u89C1\u65F6\uFF0C\u52A0\u8F7D\u5BF9\u5E94\u7684\u89C6\u9891\u6E90\n  useEffect(() => {\n    if (!videoIntersected || !isVideo) return\n\n    // \u786E\u5B9A\u89C6\u9891\u6E90\n    let desktopSrc = ''\n    let tabletSrc = ''\n    let mobileSrc = ''\n\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      desktopSrc = activeTab.video?.url || ''\n      tabletSrc = activeTab.padVideo?.url || desktopSrc\n      mobileSrc = activeTab.mobVideo?.url || desktopSrc\n    } else {\n      desktopSrc = video?.url || ''\n      tabletSrc = padVideo?.url || desktopSrc\n      mobileSrc = mobVideo?.url || desktopSrc\n    }\n\n    // \u8BBE\u7F6E\u89C6\u9891\u6E90\n    if (desktopSrc) setLoadedDesktopVideoSrc(desktopSrc)\n    if (tabletSrc) setLoadedTabletVideoSrc(tabletSrc)\n    if (mobileSrc) setLoadedMobileVideoSrc(mobileSrc)\n\n    // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\n    setTimeout(() => {\n      const videos = [\n        desktopVideoRef.current?.querySelector('video'),\n        tabletVideoRef.current?.querySelector('video'),\n        mobileVideoRef.current?.querySelector('video'),\n      ]\n\n      videos.forEach(videoElement => {\n        if (videoElement) {\n          videoElement.load()\n          videoElement.play().catch(() => {\n            // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n          })\n        }\n      })\n    }, 200)\n  }, [videoIntersected, isVideo, isTabMode, activeIndex, datalist, video?.url, padVideo?.url, mobVideo?.url])\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n\n    // \u5982\u679C\u662F\u89C6\u9891\u6A21\u5F0F\u5E76\u4E14\u5207\u6362\u4E86Tab\uFF0C\u9700\u8981\u91CD\u65B0\u52A0\u8F7D\u548C\u64AD\u653E\u89C6\u9891\n    if (isVideo && isTabMode && datalist[index]) {\n      const activeTab = datalist[index]\n\n      // \u66F4\u65B0\u89C6\u9891\u6E90\n      if (activeTab.video?.url) {\n        setLoadedDesktopVideoSrc(activeTab.video.url)\n      }\n      if (activeTab.padVideo?.url) {\n        setLoadedTabletVideoSrc(activeTab.padVideo.url)\n      }\n      if (activeTab.mobVideo?.url) {\n        setLoadedMobileVideoSrc(activeTab.mobVideo.url)\n      }\n\n      // \u5EF6\u8FDF\u89E6\u53D1\u64AD\u653E\uFF0C\u786E\u4FDDDOM\u66F4\u65B0\u5B8C\u6210\n      setTimeout(() => {\n        const videos = [\n          desktopVideoRef.current?.querySelector('video'),\n          tabletVideoRef.current?.querySelector('video'),\n          mobileVideoRef.current?.querySelector('video'),\n        ]\n\n        videos.forEach(video => {\n          if (video) {\n            video.load()\n            video.play().catch(() => {\n              // \u9759\u9ED8\u5904\u7406\u81EA\u52A8\u64AD\u653E\u5931\u8D25\u7684\u60C5\u51B5\n            })\n          }\n        })\n      }, 300) // \u7A0D\u5FAE\u5EF6\u957F\u65F6\u95F4\u4EE5\u786E\u4FDDframer-motion\u52A8\u753B\u5B8C\u6210\n    }\n  }\n\n  // \u6E32\u67D3\u6309\u94AE\n  const renderButton = () => {\n    if (!hasButton || !button?.text) return null\n    return (\n      <div\n        className={cn('image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]', {\n          'flex justify-center': textAlign === 'center',\n          'flex justify-start': textAlign === 'left',\n          'laptop:hidden': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        <Link\n          href={getLocalizedPath(button.link || '', locale)}\n          className=\"image-with-text__button whitespace-nowrap no-underline\"\n          suffixIcon={ArrowRight}\n        >\n          {button.text}\n        </Link>\n      </div>\n    )\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u5224\u65AD\u662F\u5426\u6709\u6309\u94AE\uFF08\u5F71\u54CD\u6587\u672C\u533A\u57DF\u7684\u5BF9\u9F50\u65B9\u5F0F\uFF09\n  const hasButton = Boolean(button)\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\n      const desktopPoster = activeTab.image?.url\n      const tabletPoster = activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper rounded-box overflow-hidden\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\n    const desktopPoster = image?.url\n    const tabletPoster = padImage?.url || desktopPoster\n    const mobilePoster = mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile tablet:hidden block\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text text-info-primary',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'items-center': effectiveLayout === 'left' || effectiveLayout === 'right',\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (title || desc || datalist.length > 0) && (\n        <div\n          className={cn(\n            'image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center',\n            {\n              'text-left': textAlign === 'left',\n              'text-center': textAlign === 'center',\n            }\n          )}\n        >\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n            />\n          </div>\n\n          <div\n            className={cn(\n              'image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll',\n              {\n                'flex justify-center': textAlign === 'center',\n              }\n            )}\n          >\n            <div className=\"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out\"\n                style={{\n                  left: sliderStyle.left,\n                  width: sliderStyle.width,\n                }}\n              />\n\n              {/* Tab Items */}\n              {datalist.map((item: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]',\n                    activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (title || subtitle || desc) && (\n        <div\n          className={cn('image-with-text__content flex flex-col', {\n            // \u5782\u76F4\u5BF9\u9F50\uFF1A\u5982\u679C\u6709\u6309\u94AE\u5219\u4F7F\u7528 justify-between\uFF0C\u5426\u5219\u5C45\u4E2D\u5BF9\u9F50\n            'justify-center': !hasButton,\n            'justify-between': hasButton,\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full laptop:w-fit': hasItems,\n            // \u6C34\u5E73\u5BF9\u9F50\u63A7\u5236\uFF1A\u5F53\u6709\u529F\u80FD\u5217\u8868\u65F6\uFF0C\u6839\u636EtextAlign\u51B3\u5B9A\u5BF9\u9F50\u65B9\u5F0F\n            'items-start': textAlign === 'left',\n            'items-center': textAlign === 'center',\n            // \u6587\u672C\u5BF9\u9F50\u63A7\u5236\n            'text-left': textAlign === 'left',\n            'text-center': textAlign === 'center',\n            // order\u63A7\u5236\n            'laptop:order-1': effectiveLayout === 'left',\n          })}\n        >\n          {/* \u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF08\u5F53\u6709\u6309\u94AE\u65F6\uFF0C\u8FD9\u4E2Adiv\u5305\u542B\u9664\u6309\u94AE\u5916\u7684\u6240\u6709\u5185\u5BB9\uFF09 */}\n          <div className={cn('image-with-text__main-content', { 'flex flex-col': hasButton })}>\n            <div\n              className={cn('image-with-text__header', {\n                'laptop:flex laptop:items-end laptop:justify-between laptop:gap-16':\n                  (effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text,\n              })}\n            >\n              <div className=\"image-with-text__title-wrapper flex flex-col\">\n                <Heading\n                  as={'h2'}\n                  size={4}\n                  html={title}\n                  className={cn('image-with-text__title', {\n                    'w-full': hasItems,\n                    'text-left': hasItems && textAlign === 'left',\n                    'text-center': hasItems && textAlign === 'center',\n                  })}\n                />\n                {subtitle && (\n                  <Text\n                    as={'p'}\n                    size={hasItems ? 4 : 3}\n                    html={subtitle}\n                    className={cn(\n                      'image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n                      {\n                        'laptop:mt-[16px]': !hasItems,\n                        'min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                        'text-left': hasItems && textAlign === 'left',\n                        'text-center': hasItems && textAlign === 'center',\n                      }\n                    )}\n                  />\n                )}\n              </div>\n              {(effectiveLayout === 'top' || effectiveLayout === 'bottom') && button?.text && (\n                <Link\n                  href={getLocalizedPath(button.link || '', locale)}\n                  className=\"laptop:flex hidden whitespace-nowrap no-underline\"\n                  suffixIcon={ArrowRight}\n                >\n                  {button.text}\n                </Link>\n              )}\n            </div>\n\n            {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n            {!hasItems && (desc || descIcon) && (\n              <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n                {descIcon && (\n                  <img\n                    src={descIcon}\n                    alt=\"icon\"\n                    className=\"image-with-text__description-icon desktop:size-[48px] size-[36px]\"\n                  />\n                )}\n                {desc && (\n                  <Heading\n                    as={'h4'}\n                    size={5}\n                    html={desc}\n                    className=\"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]\"\n                  />\n                )}\n              </div>\n            )}\n\n            {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n            {hasItems && (\n              <div\n                className={cn('image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6', {\n                  '!mt-6': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F top \u6216 bottom \u65F6\uFF1A\u9ED8\u8BA4 cols \u662F 2\uFF0Ctablet \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 4\n                  'grid-cols-2 tablet:grid-cols-4': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n                  // \u5F53 effectiveLayout \u662F left \u6216 right \u65F6\uFF1Acols \u9ED8\u8BA4\u662F 2\uFF0Ctablet \u662F 4\uFF0Claptop \u6216\u4EE5\u4E0A\u5C3A\u5BF8\u662F 2\n                  'grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2':\n                    effectiveLayout === 'left' || effectiveLayout === 'right',\n                })}\n              >\n                {items.map((item: ImageWithTextItem, index: number) => (\n                  <div\n                    key={index}\n                    className={cn('image-with-text__item', {\n                      'text-center': textAlign === 'center',\n                    })}\n                  >\n                    <div\n                      className={cn('image-with-text__item-header flex flex-row items-center gap-[8px]', {\n                        'justify-center': textAlign === 'center',\n                        'justify-start': textAlign === 'left',\n                      })}\n                    >\n                      <Picture\n                        source={item.icon?.url}\n                        alt={item.icon?.alt}\n                        className=\"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]\"\n                        imgClassName=\"h-full !w-full\"\n                      />\n                      <Heading\n                        size={4}\n                        as=\"h6\"\n                        className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                      >\n                        {item.text}\n                      </Heading>\n                    </div>\n                    <Text\n                      size={4}\n                      as=\"p\"\n                      html={item.desc}\n                      className=\"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]\"\n                    />\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* \u6309\u94AE\uFF08\u653E\u5728\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\u5916\uFF09 */}\n          {renderButton()}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        ref={mediaWrapperRef}\n        className={cn('image-with-text__media-wrapper', {\n          'laptop:w-[60%] w-full shrink-0': effectiveLayout === 'left' || effectiveLayout === 'right',\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          // TabWithImage\u6A21\u5F0F\n          'relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n            isTabMode,\n          '!max-w-none !max-h-none aspect-auto': effectiveLayout === 'top' || effectiveLayout === 'bottom',\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\n            <AnimatePresence mode=\"wait\">\n              <motion.div\n                key={datalist[activeIndex].image?.url}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3 }}\n                className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]\"\n                />\n              </motion.div>\n            </AnimatePresence>\n          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture source={getImageSource()} className={cn('image-with-text__image rounded-box laptop:rounded-box')} />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "Link", "cn", "getLocalizedPath", "withLayout", "useExposure", "useIntersectionObserverDelay", "useAiuiContext", "motion", "AnimatePresence", "componentType", "componentName", "ArrowRight", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "button", "textAlign", "effectiveLayout", "locale", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "mediaWrapperRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "isTabMode", "isVideo", "current", "offsetLeft", "offsetWidth", "videoIntersected", "setVideoIntersected", "desktopSrc", "tabletSrc", "mobileSrc", "activeTab", "videoElement", "handleTabClick", "index", "e", "renderButton", "hasButton", "hasItems", "getImageSource", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Ne,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as v,useRef as r,useMemo as ye,useEffect as _,forwardRef as xe,useImperativeHandle as he}from"react";import{debounce as be}from"lodash";import{cn as i}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import X from"../../components/button.js";import{VideoModal as He}from"../VideoModal/index.js";import{convertLexicalToHTML as Z}from"@payloadcms/richtext-lexical/html";import{useInView as Te}from"react-intersection-observer";import{useExposure as ke}from"../../hooks/useExposure.js";import A from"../../helpers/ScrollLoadVideo.js";import{gsap as d}from"gsap";import{SplitText as ee}from"gsap/dist/SplitText";import{ScrollTrigger as S}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Le="video";d.registerPlugin(S,ee);const te=({defaultConverters:y})=>({...y,text:L=>{const{node:t}=L;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),re=xe(({className:y="",id:L,onBtnClick:t,data:{title:x,videoTitle:h,btnText:b,youtubeId:V,video:$,mobileVideo:ne,theme:B,img:C,shape:D,titleAnimation:w="fade-in",...oe},...F},se)=>{const{sticky:n}=oe,[j,q]=v(!1),[U,le]=v(0),[ie,ae]=v(0),[H,ce]=v(0),[Y,N]=v(!1),T=r(null),O=r(null),o=r(null),k=r(null),G=r(null),M=r(null),u=r(null),R=r(null),z=r(null),{ref:de,inView:l}=Te();he(se,()=>o.current);const m=typeof x=="string"?x:x&&Z({data:x,converters:te}),J=typeof h=="string"?h:h&&Z({data:h,converters:te});_(()=>{l?(T.current?.play(),q(!0)):(T.current?.pause(),q(!1))},[l]);const I=be(()=>{if(o.current){const f=o.current.getBoundingClientRect(),a=window.innerHeight,g=window.scrollY||window.pageYOffset,s=f.bottom+g,c=document.documentElement.scrollHeight-s;le(c>a?a:c)}if(o.current){const f=o.current.clientHeight,a=window.innerHeight;ae(f+a)}},600);_(()=>(I(),window.addEventListener("resize",I),()=>{window.removeEventListener("resize",I)}),[]),_(()=>{function f(){if(!k.current||w!=="fade-in")return;const g=k.current?.clientHeight||80;M.current=new ee(k.current,{type:"words",wordsClass:"word"});const s=M.current.words;d.set(s,{opacity:0}),u.current&&d.set(u.current,{opacity:0}),R.current=S.create({trigger:o.current,start:"top center-=10%",end:`top+=${g*1.5+80}px center-=10%`,scrub:!0,onUpdate:K=>{const c=K.progress,Q=s.length,ue=1/Q,W=.5;s.forEach((me,fe)=>{const ge=fe/Q*(1-W),ve=ue*(1+W);let P=(c-ge)/ve;P=Math.max(0,Math.min(P,1)),d.set(me,{opacity:P})}),d.set(O.current,{opacity:c}),u.current&&d.set(u.current,{opacity:c>=.6?1:0})}})}function a(){z.current=S.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const s=g.progress;console.log("progress__",s),ce(s)}})}return l&&(f(),a()),()=>{M.current&&M.current.revert(),R.current&&R.current.kill(),z.current&&z.current.kill()}},[w,l]),ke(G,{componentType:Le,componentName:Me,componentTitle:m});const pe=ye(()=>l&&H>0&&H<.9?3:l?2:1,[H,l]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(Ne,{children:[n&&e("div",{...F,ref:o,className:i("pointer-events-none relative z-10",E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},y),children:e("div",{ref:de,children:!w&&p("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[m&&!j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),J&&j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:J}}),b&&e(X,{variant:"link",className:i("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]})})}),p("div",{...n?{}:F,style:n?{marginBottom:`-${U}px`,marginTop:`-${ie}px`,zIndex:pe}:{zIndex:5},className:i("relative",y),children:[e("div",{className:"sticky top-0 ",children:p("div",{id:L,className:i("relative overflow-hidden",n?"h-screen w-full":E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[w==="fade-in"&&p("div",{className:i("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",n?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[m&&e("div",{ref:k,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),b&&e(X,{ref:u,variant:"link",className:i("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]}),p("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-H*100}vh`},children:[e(A,{videoRef:T,poster:C?.url||"",src:$?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(A,{videoRef:T,poster:C?.url||"",src:ne?.url||$?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:O,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),n&&e("div",{className:i(n&&"pointer-events-none relative box-content block",E),style:n?{height:`${U}px`}:{},ref:G})]}),Y&&V&&e(He,{visible:Y,youTubeId:V,onCloseModal:()=>N(!1)})]})});re.displayName="MediaPlayerBase";var je=we(re);export{je as default};
+"use client";import{Fragment as Ne,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as v,useRef as r,useMemo as ye,useEffect as S,forwardRef as xe,useImperativeHandle as he}from"react";import{debounce as be}from"lodash";import{cn as i}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import X from"../../components/button.js";import{VideoModal as He}from"../VideoModal/index.js";import{convertLexicalToHTML as Z}from"@payloadcms/richtext-lexical/html";import{useInView as Te}from"react-intersection-observer";import{useExposure as ke}from"../../hooks/useExposure.js";import A from"../../helpers/ScrollLoadVideo.js";import{gsap as d}from"gsap";import{SplitText as ee}from"gsap/dist/SplitText";import{ScrollTrigger as V}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Le="video";d.registerPlugin(V,ee);const te=({defaultConverters:y})=>({...y,text:L=>{const{node:t}=L;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),re=xe(({className:y="",id:L,onBtnClick:t,data:{title:x,videoTitle:h,btnText:b,youtubeId:_,video:$,mobileVideo:ne,theme:B,img:C,shape:D,titleAnimation:w="fade-in",...oe},...F},se)=>{const{sticky:n}=oe,[j,q]=v(!1),[U,le]=v(0),[ie,ae]=v(0),[H,ce]=v(0),[Y,N]=v(!1),T=r(null),O=r(null),o=r(null),k=r(null),G=r(null),M=r(null),u=r(null),R=r(null),I=r(null),{ref:de,inView:s}=Te();he(se,()=>o.current);const m=typeof x=="string"?x:x&&Z({data:x,converters:te}),J=typeof h=="string"?h:h&&Z({data:h,converters:te});S(()=>{s?(T.current?.play(),q(!0)):(T.current?.pause(),q(!1))},[s]);const z=be(()=>{if(o.current){const f=o.current.getBoundingClientRect(),a=window.innerHeight,g=window.scrollY||window.pageYOffset,l=f.bottom+g,c=document.documentElement.scrollHeight-l;le(c>a?a:c)}if(o.current){const f=o.current.clientHeight,a=window.innerHeight;ae(f+a)}},600);S(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),S(()=>{function f(){if(!k.current||w!=="fade-in")return;const g=k.current?.clientHeight||80;M.current=new ee(k.current,{type:"words",wordsClass:"word"});const l=M.current.words;d.set(l,{opacity:0}),u.current&&d.set(u.current,{opacity:0}),R.current=V.create({trigger:o.current,start:"top center-=10%",end:`top+=${g*1.5+80}px center-=10%`,scrub:!0,onUpdate:K=>{const c=K.progress,Q=l.length,ue=1/Q,W=.5;l.forEach((me,fe)=>{const ge=fe/Q*(1-W),ve=ue*(1+W);let P=(c-ge)/ve;P=Math.max(0,Math.min(P,1)),d.set(me,{opacity:P})}),d.set(O.current,{opacity:c}),u.current&&d.set(u.current,{opacity:c>=.6?1:0})}})}function a(){I.current=V.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const l=g.progress;ce(l)}})}return s&&(f(),a()),()=>{M.current&&M.current.revert(),R.current&&R.current.kill(),I.current&&I.current.kill()}},[w,s]),ke(G,{componentType:Le,componentName:Me,componentTitle:m});const pe=ye(()=>s&&H>0&&H<.9?3:s?2:1,[H,s]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(Ne,{children:[n&&e("div",{...F,ref:o,className:i("pointer-events-none relative z-10",E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},y),children:e("div",{ref:de,children:!w&&p("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[m&&!j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),J&&j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:J}}),b&&e(X,{variant:"link",className:i("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]})})}),p("div",{...n?{}:F,style:n?{marginBottom:`-${U}px`,marginTop:`-${ie}px`,zIndex:pe}:{zIndex:5},className:i("relative",y),children:[e("div",{className:"sticky top-0 ",children:p("div",{id:L,className:i("relative overflow-hidden",n?"h-screen w-full":E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[w==="fade-in"&&p("div",{className:i("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",n?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[m&&e("div",{ref:k,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),b&&e(X,{ref:u,variant:"link",className:i("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]}),p("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-H*100}vh`},children:[e(A,{videoRef:T,poster:C?.url||"",src:$?.url,className:"tablet:block hidden size-full !h-auto",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(A,{videoRef:T,poster:C?.url||"",src:ne?.url||$?.url,className:"tablet:hidden block min-h-screen w-full",videoClassName:"object-cover w-full h-auto",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:O,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),n&&e("div",{className:i(n&&"pointer-events-none relative box-content block",E),style:n?{height:`${U}px`}:{},ref:G})]}),Y&&_&&e(He,{visible:Y,youTubeId:_,onCloseModal:()=>N(!1)})]})});re.displayName="MediaPlayerBase";var je=we(re);export{je as default};
 //# sourceMappingURL=index.js.map