npm - @anker-in/headless-ui - Versions diffs - 1.1.4 → 1.1.6 - Mend

@anker-in/headless-ui 1.1.4 → 1.1.6

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

package/dist/esm/biz-components/Listing/utils/textFormat.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/biz-components/Listing/utils/textFormat.ts"],
-  "sourcesContent": ["/**\n * \u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u5DE5\u5177\u51FD\u6570\n * \u4F7F\u7528\u5355\u6B21\u904D\u5386\u548C\u6B63\u5219\u8868\u8FBE\u5F0F\u7F13\u5B58\u6765\u63D0\u9AD8\u6027\u80FD\n */\n\ntype ReplacementMap = Record<string, string>\n\n// \u7F13\u5B58\u6B63\u5219\u8868\u8FBE\u5F0F\u4EE5\u63D0\u9AD8\u6027\u80FD\nconst regexCache = new Map<string, RegExp>()\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 */\nfunction escapeRegExp(str: string): string {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u83B7\u53D6\u6216\u521B\u5EFA\u6B63\u5219\u8868\u8FBE\u5F0F\uFF08\u5E26\u7F13\u5B58\uFF09\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u5982 \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u5982 \"}\"\n * @returns \u7F16\u8BD1\u540E\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\n */\nfunction getRegex(beginSeg: string, endSeg: string): RegExp {\n  const cacheKey = `${beginSeg}|${endSeg}`\n\n  if (regexCache.has(cacheKey)) {\n    return regexCache.get(cacheKey)!\n  }\n\n  // \u8F6C\u4E49\u7279\u6B8A\u5B57\u7B26\uFF0C\u6784\u5EFA\u6B63\u5219\u8868\u8FBE\u5F0F\n  // \u5339\u914D beginSeg + key + endSeg\uFF0Ckey \u53EF\u4EE5\u662F\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF\u3001\u8FDE\u5B57\u7B26\n  const escapedBegin = escapeRegExp(beginSeg)\n  const escapedEnd = escapeRegExp(endSeg)\n  const regex = new RegExp(`${escapedBegin}([a-zA-Z0-9_-]+)${escapedEnd}`, 'g')\n\n  regexCache.set(cacheKey, regex)\n  return regex\n}\n\n/**\n * \u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u51FD\u6570\n * @param template \u6A21\u677F\u5B57\u7B26\u4E32\uFF0C\u5982 \"Hello {name}, you have {count} messages\"\n * @param replacements \u66FF\u6362\u5BF9\u8C61\uFF0C\u5982 { name: \"John\", count: \"5\" }\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u66FF\u6362\u540E\u7684\u5B57\u7B26\u4E32\n *\n * @example\n * ```ts\n * replaceTemplate(\"Hello {name}!\", { name: \"World\" })\n * // => \"Hello World!\"\n *\n * replaceTemplate(\"Price: {{amount}}\", { amount: \"$100\" }, \"{{\", \"}}\")\n * // => \"Price: $100\"\n *\n * replaceTemplate(\"You have {count} items\", { count: \"5\", unused: \"test\" })\n * // => \"You have 5 items\" (unused \u952E\u4F1A\u88AB\u5FFD\u7565)\n *\n * replaceTemplate(\"Hello ${name}!\", { name: \"World\" }, \"${\", \"}\")\n * // => \"Hello World!\"\n * ```\n */\nexport function replaceTemplate(\n  template: string,\n  replacements: ReplacementMap,\n  beginSeg: string = '{',\n  endSeg: string = '}',\n): string {\n  if (!template) return template\n  if (!replacements || Object.keys(replacements).length === 0) return template\n\n  const regex = getRegex(beginSeg, endSeg)\n\n  // \u4F7F\u7528 replace \u65B9\u6CD5\u8FDB\u884C\u66FF\u6362\uFF0C\u6027\u80FD\u4F18\u4E8E\u624B\u52A8\u904D\u5386\n  return template.replace(regex, (match, key) => {\n    // \u5982\u679C key \u5B58\u5728\u4E8E replacements \u4E2D\uFF0C\u5219\u8FD4\u56DE\u5BF9\u5E94\u7684\u503C\n    // \u5426\u5219\u4FDD\u6301\u539F\u6837\uFF08\u8FD4\u56DE\u6574\u4E2A\u5339\u914D\u5185\u5BB9\uFF09\n    return replacements[key] !== undefined ? replacements[key] : match\n  })\n}\n\n/**\n * \u6279\u91CF\u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u51FD\u6570\uFF08\u7528\u4E8E\u4E00\u6B21\u6027\u66FF\u6362\u591A\u4E2A\u6A21\u677F\uFF09\n * @param templates \u6A21\u677F\u5B57\u7B26\u4E32\u6570\u7EC4\n * @param replacements \u66FF\u6362\u5BF9\u8C61\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u66FF\u6362\u540E\u7684\u5B57\u7B26\u4E32\u6570\u7EC4\n *\n * @example\n * ```ts\n * replaceTemplates(\n *   [\"Hello {name}!\", \"You have {count} items\"],\n *   { name: \"John\", count: \"5\" }\n * )\n * // => [\"Hello John!\", \"You have 5 items\"]\n *\n * replaceTemplates(\n *   [\"Hello {{name}}!\", \"Price: {{amount}}\"],\n *   { name: \"John\", amount: \"$100\" },\n *   \"{{\",\n *   \"}}\"\n * )\n * // => [\"Hello John!\", \"Price: $100\"]\n * ```\n */\nexport function replaceTemplates(\n  templates: string[],\n  replacements: ReplacementMap,\n  beginSeg: string = '{',\n  endSeg: string = '}',\n): string[] {\n  return templates.map((template) => replaceTemplate(template, replacements, beginSeg, endSeg))\n}\n\n/**\n * \u4ECE\u6A21\u677F\u5B57\u7B26\u4E32\u4E2D\u63D0\u53D6\u6240\u6709\u5360\u4F4D\u7B26\u952E\u540D\n * @param template \u6A21\u677F\u5B57\u7B26\u4E32\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u5360\u4F4D\u7B26\u952E\u540D\u6570\u7EC4\uFF08\u53BB\u91CD\uFF09\n *\n * @example\n * ```ts\n * extractPlaceholders(\"Hello {name}, you have {count} new {count} messages\")\n * // => [\"name\", \"count\"]\n *\n * extractPlaceholders(\"Hello {{name}}, price is {{amount}}\", \"{{\", \"}}\")\n * // => [\"name\", \"amount\"]\n * ```\n */\nexport function extractPlaceholders(template: string, beginSeg: string = '{', endSeg: string = '}'): string[] {\n  if (!template) return []\n\n  const regex = getRegex(beginSeg, endSeg)\n  const keys = new Set<string>()\n  let match: RegExpExecArray | null\n\n  // \u4F7F\u7528 exec \u5FAA\u73AF\u66FF\u4EE3 matchAll \u4EE5\u4FDD\u8BC1\u517C\u5BB9\u6027\n  while ((match = regex.exec(template)) !== null) {\n    keys.add(match[1])\n  }\n\n  return Array.from(keys)\n}\n"],
-  "mappings": "AAQA,MAAMA,EAAa,IAAI,IAOvB,SAASC,EAAaC,EAAqB,CACzC,OAAOA,EAAI,QAAQ,sBAAuB,MAAM,CAClD,CAQA,SAASC,EAASC,EAAkBC,EAAwB,CAC1D,MAAMC,EAAW,GAAGF,CAAQ,IAAIC,CAAM,GAEtC,GAAIL,EAAW,IAAIM,CAAQ,EACzB,OAAON,EAAW,IAAIM,CAAQ,EAKhC,MAAMC,EAAeN,EAAaG,CAAQ,EACpCI,EAAaP,EAAaI,CAAM,EAChCI,EAAQ,IAAI,OAAO,GAAGF,CAAY,mBAAmBC,CAAU,GAAI,GAAG,EAE5E,OAAAR,EAAW,IAAIM,EAAUG,CAAK,EACvBA,CACT,CAyBO,SAASC,EACdC,EACAC,EACAR,EAAmB,IACnBC,EAAiB,IACT,CAER,GADI,CAACM,GACD,CAACC,GAAgB,OAAO,KAAKA,CAAY,EAAE,SAAW,EAAG,OAAOD,EAEpE,MAAMF,EAAQN,EAASC,EAAUC,CAAM,EAGvC,OAAOM,EAAS,QAAQF,EAAO,CAACI,EAAOC,IAG9BF,EAAaE,CAAG,IAAM,OAAYF,EAAaE,CAAG,EAAID,CAC9D,CACH,CA2BO,SAASE,EACdC,EACAJ,EACAR,EAAmB,IACnBC,EAAiB,IACP,CACV,OAAOW,EAAU,IAAKL,GAAaD,EAAgBC,EAAUC,EAAcR,EAAUC,CAAM,CAAC,CAC9F,CAkBO,SAASY,EAAoBN,EAAkBP,EAAmB,IAAKC,EAAiB,IAAe,CAC5G,GAAI,CAACM,EAAU,MAAO,CAAC,EAEvB,MAAMF,EAAQN,EAASC,EAAUC,CAAM,EACjCa,EAAO,IAAI,IACjB,IAAIL,EAGJ,MAAQA,EAAQJ,EAAM,KAAKE,CAAQ,KAAO,MACxCO,EAAK,IAAIL,EAAM,CAAC,CAAC,EAGnB,OAAO,MAAM,KAAKK,CAAI,CACxB",
+  "sourcesContent": ["/**\n * \u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u5DE5\u5177\u51FD\u6570\n * \u4F7F\u7528\u5355\u6B21\u904D\u5386\u548C\u6B63\u5219\u8868\u8FBE\u5F0F\u7F13\u5B58\u6765\u63D0\u9AD8\u6027\u80FD\n */\n\ntype ReplacementMap = Record<string, string>\n\n// \u7F13\u5B58\u6B63\u5219\u8868\u8FBE\u5F0F\u4EE5\u63D0\u9AD8\u6027\u80FD\nconst regexCache = new Map<string, RegExp>()\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 */\nfunction escapeRegExp(str: string): string {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u83B7\u53D6\u6216\u521B\u5EFA\u6B63\u5219\u8868\u8FBE\u5F0F\uFF08\u5E26\u7F13\u5B58\uFF09\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u5982 \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u5982 \"}\"\n * @returns \u7F16\u8BD1\u540E\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\n */\nfunction getRegex(beginSeg: string, endSeg: string): RegExp {\n  const cacheKey = `${beginSeg}|${endSeg}`\n\n  if (regexCache.has(cacheKey)) {\n    return regexCache.get(cacheKey)!\n  }\n\n  // \u8F6C\u4E49\u7279\u6B8A\u5B57\u7B26\uFF0C\u6784\u5EFA\u6B63\u5219\u8868\u8FBE\u5F0F\n  // \u5339\u914D beginSeg + key + endSeg\uFF0Ckey \u53EF\u4EE5\u662F\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF\u3001\u8FDE\u5B57\u7B26\n  const escapedBegin = escapeRegExp(beginSeg)\n  const escapedEnd = escapeRegExp(endSeg)\n  const regex = new RegExp(`${escapedBegin}([a-zA-Z0-9_-]+)${escapedEnd}`, 'g')\n\n  regexCache.set(cacheKey, regex)\n  return regex\n}\n\n/**\n * \u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u51FD\u6570\n * @param template \u6A21\u677F\u5B57\u7B26\u4E32\uFF0C\u5982 \"Hello {name}, you have {count} messages\"\n * @param replacements \u66FF\u6362\u5BF9\u8C61\uFF0C\u5982 { name: \"John\", count: \"5\" }\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u66FF\u6362\u540E\u7684\u5B57\u7B26\u4E32\n *\n * @example\n * ```ts\n * replaceTemplate(\"Hello {name}!\", { name: \"World\" })\n * // => \"Hello World!\"\n *\n * replaceTemplate(\"Price: {{amount}}\", { amount: \"$100\" }, \"{{\", \"}}\")\n * // => \"Price: $100\"\n *\n * replaceTemplate(\"You have {count} items\", { count: \"5\", unused: \"test\" })\n * // => \"You have 5 items\" (unused \u952E\u4F1A\u88AB\u5FFD\u7565)\n *\n * replaceTemplate(\"Hello ${name}!\", { name: \"World\" }, \"${\", \"}\")\n * // => \"Hello World!\"\n * ```\n */\nexport function replaceTemplate(\n  template: string,\n  replacements: ReplacementMap,\n  beginSeg: string = '{',\n  endSeg: string = '}'\n): string {\n  if (!template) return template\n  if (!replacements || Object.keys(replacements).length === 0) return template\n\n  const regex = getRegex(beginSeg, endSeg)\n\n  // \u4F7F\u7528 replace \u65B9\u6CD5\u8FDB\u884C\u66FF\u6362\uFF0C\u6027\u80FD\u4F18\u4E8E\u624B\u52A8\u904D\u5386\n  return template.replace(regex, (match, key) => {\n    // \u5982\u679C key \u5B58\u5728\u4E8E replacements \u4E2D\uFF0C\u5219\u8FD4\u56DE\u5BF9\u5E94\u7684\u503C\n    // \u5426\u5219\u4FDD\u6301\u539F\u6837\uFF08\u8FD4\u56DE\u6574\u4E2A\u5339\u914D\u5185\u5BB9\uFF09\n    return replacements[key] !== undefined ? replacements[key] : match\n  })\n}\n\n/**\n * \u6279\u91CF\u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u51FD\u6570\uFF08\u7528\u4E8E\u4E00\u6B21\u6027\u66FF\u6362\u591A\u4E2A\u6A21\u677F\uFF09\n * @param templates \u6A21\u677F\u5B57\u7B26\u4E32\u6570\u7EC4\n * @param replacements \u66FF\u6362\u5BF9\u8C61\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u66FF\u6362\u540E\u7684\u5B57\u7B26\u4E32\u6570\u7EC4\n *\n * @example\n * ```ts\n * replaceTemplates(\n *   [\"Hello {name}!\", \"You have {count} items\"],\n *   { name: \"John\", count: \"5\" }\n * )\n * // => [\"Hello John!\", \"You have 5 items\"]\n *\n * replaceTemplates(\n *   [\"Hello {{name}}!\", \"Price: {{amount}}\"],\n *   { name: \"John\", amount: \"$100\" },\n *   \"{{\",\n *   \"}}\"\n * )\n * // => [\"Hello John!\", \"Price: $100\"]\n * ```\n */\nexport function replaceTemplates(\n  templates: string[],\n  replacements: ReplacementMap,\n  beginSeg: string = '{',\n  endSeg: string = '}'\n): string[] {\n  return templates.map(template => replaceTemplate(template, replacements, beginSeg, endSeg))\n}\n\n/**\n * \u4ECE\u6A21\u677F\u5B57\u7B26\u4E32\u4E2D\u63D0\u53D6\u6240\u6709\u5360\u4F4D\u7B26\u952E\u540D\n * @param template \u6A21\u677F\u5B57\u7B26\u4E32\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u5360\u4F4D\u7B26\u952E\u540D\u6570\u7EC4\uFF08\u53BB\u91CD\uFF09\n *\n * @example\n * ```ts\n * extractPlaceholders(\"Hello {name}, you have {count} new {count} messages\")\n * // => [\"name\", \"count\"]\n *\n * extractPlaceholders(\"Hello {{name}}, price is {{amount}}\", \"{{\", \"}}\")\n * // => [\"name\", \"amount\"]\n * ```\n */\nexport function extractPlaceholders(template: string, beginSeg: string = '{', endSeg: string = '}'): string[] {\n  if (!template) return []\n\n  const regex = getRegex(beginSeg, endSeg)\n  const keys = new Set<string>()\n  let match: RegExpExecArray | null\n\n  // \u4F7F\u7528 exec \u5FAA\u73AF\u66FF\u4EE3 matchAll \u4EE5\u4FDD\u8BC1\u517C\u5BB9\u6027\n  while ((match = regex.exec(template)) !== null) {\n    keys.add(match[1])\n  }\n\n  return Array.from(keys)\n}\n"],
+  "mappings": "AAQA,MAAMA,EAAa,IAAI,IAOvB,SAASC,EAAaC,EAAqB,CACzC,OAAOA,EAAI,QAAQ,sBAAuB,MAAM,CAClD,CAQA,SAASC,EAASC,EAAkBC,EAAwB,CAC1D,MAAMC,EAAW,GAAGF,CAAQ,IAAIC,CAAM,GAEtC,GAAIL,EAAW,IAAIM,CAAQ,EACzB,OAAON,EAAW,IAAIM,CAAQ,EAKhC,MAAMC,EAAeN,EAAaG,CAAQ,EACpCI,EAAaP,EAAaI,CAAM,EAChCI,EAAQ,IAAI,OAAO,GAAGF,CAAY,mBAAmBC,CAAU,GAAI,GAAG,EAE5E,OAAAR,EAAW,IAAIM,EAAUG,CAAK,EACvBA,CACT,CAyBO,SAASC,EACdC,EACAC,EACAR,EAAmB,IACnBC,EAAiB,IACT,CAER,GADI,CAACM,GACD,CAACC,GAAgB,OAAO,KAAKA,CAAY,EAAE,SAAW,EAAG,OAAOD,EAEpE,MAAMF,EAAQN,EAASC,EAAUC,CAAM,EAGvC,OAAOM,EAAS,QAAQF,EAAO,CAACI,EAAOC,IAG9BF,EAAaE,CAAG,IAAM,OAAYF,EAAaE,CAAG,EAAID,CAC9D,CACH,CA2BO,SAASE,EACdC,EACAJ,EACAR,EAAmB,IACnBC,EAAiB,IACP,CACV,OAAOW,EAAU,IAAIL,GAAYD,EAAgBC,EAAUC,EAAcR,EAAUC,CAAM,CAAC,CAC5F,CAkBO,SAASY,EAAoBN,EAAkBP,EAAmB,IAAKC,EAAiB,IAAe,CAC5G,GAAI,CAACM,EAAU,MAAO,CAAC,EAEvB,MAAMF,EAAQN,EAASC,EAAUC,CAAM,EACjCa,EAAO,IAAI,IACjB,IAAIL,EAGJ,MAAQA,EAAQJ,EAAM,KAAKE,CAAQ,KAAO,MACxCO,EAAK,IAAIL,EAAM,CAAC,CAAC,EAGnB,OAAO,MAAM,KAAKK,CAAI,CACxB",
   "names": ["regexCache", "escapeRegExp", "str", "getRegex", "beginSeg", "endSeg", "cacheKey", "escapedBegin", "escapedEnd", "regex", "replaceTemplate", "template", "replacements", "match", "key", "replaceTemplates", "templates", "extractPlaceholders", "keys"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as N,jsx as e,jsxs as d}from"react/jsx-runtime";import K,{useState as c,useRef as u,useEffect as f,forwardRef as U}from"react";import{debounce as X}from"es-toolkit";import{useInView as Z}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as h}from"../../components/gird.js";import{Container as ae}from"../../components/container.js";import se from"../BrandEquity/index.js";import oe from"../MemberEquity/index.js";import ne from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as S}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as T}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:s})=>({...s,text:o=>{const{node:t}=o;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:s,spaceY:o,className:t})=>{const a=T({query:"(max-width: 768px)"});return e(ae,{spaceY:o,className:y("!bg-transparent",t),children:d(re,{children:[!a&&e(h,{span:1}),e(h,{span:a?12:10,children:s}),!a&&e(h,{span:1})]})})},ce=K.forwardRef(({children:s,id:o,components:t})=>{const a=u(null);return d("div",{ref:a,className:"relative z-10",children:[e(N,{children:s}),e(N,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(se,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(oe,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ne,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=U(({className:s="",wrapperClassName:o="",id:t,data:{title:a,videoTitle:r,mobVideo:k,mobImg:p,img:m,isYouTube:P,youtubePcId:M,youtubeMobileId:$,video:v,theme:R,shape:B,components:Y}})=>{const H=u(null),b=u(null),{ref:q,inView:i}=Z(),[pe,F]=c(0),[z,I]=c(!1),[j,G]=c(!1),V=u(null),Q=typeof a=="string"?a:a&&S({data:a,converters:L});typeof r=="string"||r&&S({data:r,converters:L});const[O,W]=c(0),[n,_]=c(!1),C=T({query:"(max-width: 768px)"});f(()=>{_(C)},[C]);const w=X(()=>{if(b.current){const g=b.current.getBoundingClientRect(),l=n?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,J=g.bottom+A,E=document.documentElement.scrollHeight-J;W(E>l?l:E),F(l)}},2e3);return f(()=>{i&&!z&&(H.current?.play(),I(!0))},[i,z]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function g(){const l=n?window.screen.height:window.innerHeight;ie.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${l*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}i&&g()},[i]),d(N,{children:[e("div",{id:t,className:y("relative z-20 h-screen w-full",s,{"aiui-dark":R==="dark","rounded-box":B==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:Q||"",theme:R}})})})}),d("div",{ref:b,style:{marginBottom:`-${O}px`,zIndex:i?2:1},className:y(t,"relative mt-[-200vh]",o),children:[e("div",{className:"sticky top-0 ",children:d("div",{className:y("media-cover","relative h-screen w-full"),children:[P?e(te,{youTubeId:n&&$||M}):v?.url&&e(le,{videoRef:H,poster:n&&p?.url?p?.url:m?.url,src:n&&k?.url?k?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),m?.url&&(!v?.url||j)&&e("img",{src:n&&p?.url?p?.url:m?.url,alt:m?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Ee=D(de);export{Ee as default};
+"use client";import{Fragment as k,jsx as e,jsxs as p}from"react/jsx-runtime";import K,{useState as d,useRef as f,useEffect as y,forwardRef as U}from"react";import{debounce as X}from"es-toolkit";import{useInView as Z}from"react-intersection-observer";import{cn as v}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as x}from"../../components/gird.js";import{Container as ae}from"../../components/container.js";import se from"../BrandEquity/index.js";import oe from"../MemberEquity/index.js";import ne from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as S}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as T}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:s})=>({...s,text:o=>{const{node:t}=o;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),N=({children:s,spaceY:o,className:t})=>{const a=T({query:"(max-width: 768px)"});return e(ae,{spaceY:o,className:v("!bg-transparent",t),children:p(re,{children:[!a&&e(x,{span:1}),e(x,{span:a?12:10,children:s}),!a&&e(x,{span:1})]})})},ce=K.forwardRef(({children:s,id:o,components:t},a)=>{const n=f(null);return p("div",{ref:n,className:"relative z-10",children:[e(k,{children:s}),e(k,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(N,{spaceY:"none",children:e(se,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(N,{spaceY:"none",children:e(oe,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ne,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=U(({className:s="",wrapperClassName:o="",id:t,data:{title:a,videoTitle:n,mobVideo:r,mobImg:m,img:u,isYouTube:P,youtubePcId:M,youtubeMobileId:$,video:b,theme:R,shape:B,components:Y}},pe)=>{const H=f(null),w=f(null),{ref:q,inView:l}=Z(),[me,F]=d(0),[z,I]=d(!1),[j,G]=d(!1),V=f(null),Q=typeof a=="string"?a:a&&S({data:a,converters:L});typeof n=="string"||n&&S({data:n,converters:L});const[O,W]=d(0),[i,_]=d(!1),C=T({query:"(max-width: 768px)"});y(()=>{_(C)},[C]);const g=X(()=>{if(w.current){const h=w.current.getBoundingClientRect(),c=i?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,J=h.bottom+A,E=document.documentElement.scrollHeight-J;W(E>c?c:E),F(c)}},2e3);return y(()=>{l&&!z&&(H.current?.play(),I(!0))},[l,z]),y(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),y(()=>{function h(){const c=i?window.screen.height:window.innerHeight;ie.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}l&&h()},[l]),p(k,{children:[e("div",{id:t,className:v("relative z-20 h-screen w-full",s,{"aiui-dark":R==="dark","rounded-box":B==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(N,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:Q||"",theme:R}})})})}),p("div",{ref:w,style:{marginBottom:`-${O}px`,zIndex:l?2:1},className:v(t,"relative mt-[-200vh]",o),children:[e("div",{className:"sticky top-0 ",children:p("div",{className:v("media-cover","relative h-screen w-full"),children:[P?e(te,{youTubeId:i&&$||M}):b?.url&&e(le,{videoRef:H,poster:i&&m?.url?m?.url:u?.url,src:i&&r?.url?r?.url:b?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),u?.url&&(!b?.url||j)&&e("img",{src:i&&m?.url?m?.url:u?.url,alt:u?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Se=D(de);export{Se as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  ({\n    className = '',\n    wrapperClassName = '',\n    id,\n    data: {\n      title,\n      videoTitle,\n      mobVideo,\n      mobImg,\n      img,\n      isYouTube,\n      youtubePcId,\n      youtubeMobileId,\n      video,\n      theme,\n      shape,\n      components,\n    },\n  }) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }, ref) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  (\n    {\n      className = '',\n      wrapperClassName = '',\n      id,\n      data: {\n        title,\n        videoTitle,\n        mobVideo,\n        mobImg,\n        img,\n        isYouTube,\n        youtubePcId,\n        youtubeMobileId,\n        video,\n        theme,\n        shape,\n        components,\n      },\n    },\n    ref\n  ) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n            },\n          })\n          .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n          .to(`.${id} .sticky-cover`, {\n            backdropFilter: 'blur(8px)',\n            duration: 0.4,\n          })\n          .to(\n            `#${id} .media-content`,\n            {\n              top: '100%',\n              transform: 'translate(-50%, -100%)',\n              duration: 1,\n            },\n            '<'\n          )\n      }\n      if (inView) {\n        gsapResize()\n      }\n    }, [inView])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{\n                  backdropFilter: 'blur(0px)',\n                  WebkitBackdropFilter: 'blur(0px)',\n                  willChange: 'backdrop-filter',\n                }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "ref", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as H,jsx as t,jsxs as o}from"react/jsx-runtime";import j,{useState as P,useEffect as D,useRef as Q}from"react";import{useMediaQuery as Y}from"react-responsive";import{withLayout as q}from"../../shared/Styles.js";import _ from"../../components/picture.js";import S from"../../components/button.js";import{Heading as z}from"../../components/heading.js";import{VideoModal as A}from"../VideoModal/index.js";import{Grid as O,GridItem as R}from"../../components/gird.js";import Z from"../Title/index.js";import{cn as T,spaceToHyphen as C}from"../../helpers/utils.js";import L from"../SwiperBox/index.js";import{isVideo as U}from"../../shared/mimeType.js";import{Tabs as F,TabsList as J,TabsTrigger as K,TabsContent as W}from"../../components/tabs.js";import{useExposure as X}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{gaTrack as ee}from"../../shared/track.js";const h="image",f="p1_banner",M=({data:i,configuration:r,jIndex:c,spanType:k,title:w,onSecondaryButtonClick:p,onPrimaryButtonClick:v})=>{const[y,m]=P(!1),B=Y({query:"(max-width: 768px)"}),x=Q(null),$=()=>{if(k)switch(k){case"full":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"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(r?.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-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};X(x,{componentType:h,componentName:f,position:c,componentTitle:i.title,componentDescription:i.description,navigation:r?.activeTab}),D(()=>{m(B)},[B]);const{theme:N="light",title:d,description:u,imageUrl:l,primaryButton:n,secondaryButton:s,imageMobileUrl:b,blockLink:g,video:e,youtubeId:a,isYouTube:V}=i,G="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:T("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",$(),{"rounded-2xl":r?.shape==="rounded","aiui-dark":N==="dark","h-[400px]":y},"text-info-primary"),ref:x,children:[(g||s.link)&&t("a",{className:"absolute inset-0 z-10",href:I(g||s.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,"aria-hidden":"true",tabIndex:-1}),o("div",{className:"absolute inset-0",children:[U(l?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden overflow-hidden w-full h-full object-cover",children:t("source",{src:l?.url,type:"video/mp4"})}):t(_,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),U(b?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block overflow-hidden w-full h-full object-cover",children:t("source",{src:b?.url,type:"video/mp4"})}):t(_,{source:b?.url||l?.url,alt:b?.alt||l?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:T("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[o("div",{className:"flex flex-col gap-1",children:[t(z,{size:3,as:"h3",className:"item-title",html:d}),t(z,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:u})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&o(S,{"aria-label":d??u,className:T(G,"link-left"),variant:"secondary",as:"a",onClick:()=>{p?.(i)},href:I(s.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}#${s.text}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,children:[s.text,t("span",{className:"sr-only",children:d??u})]}),n&&n.text&&t(S,{"aria-label":d??u,className:T(G,"link-right"),variant:"primary",as:"a",onClick:()=>{v?.(i)},href:I(n.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}#${n.text}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,children:n.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{r?.onVideoPlayBtnClick?.(e?.url||a,V)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-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=j.forwardRef((i,r)=>{const{onSecondaryButtonClick:c,onPrimaryButtonClick:k}=i,{shape:w,sectionTitle:p,groupByTab:v=!1,items:y=[],carousel:m}=i.data,[B,x]=P(!1),[$,N]=P(""),[d,u]=P(""),l=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=y.map(e=>e.tabName).filter(Boolean).filter((e,a,V)=>V.indexOf(e)===a),s=(e,a)=>{x(!0),a?u?.(e||""):N?.(e||"")},b=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},g=n.map(e=>({tabName:e,items:y.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:r,className:T("multiLayoutGraphicBlock","text-info-primary",i.className),children:[p&&t(Z,{data:{title:p},className:"section-title"}),v?o(F,{shape:w,align:"left",defaultValue:C(n[0]),children:[t(J,{children:n.map((e,a)=>t(K,{value:C(e),onClick:()=>{ee({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:f,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),n.map((e,a)=>t(W,{value:C(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:o(H,{children:[t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:g?.[e]||[],configuration:{shape:w,isTab:v,activeTab:e,title:p,num:g?.[e]?.length||0,onVideoPlayBtnClick:s,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(g?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(g?.[e]?.length||0)}}}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{shape:w,isTab:v,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):o(H,{children:[o(O,{className:"w-full",children:[y.map((e,a)=>t(R,{span:l(e.width??"full"),className:"laptop:block hidden",children:t(M,{data:e,configuration:{shape:w,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:e.width,onSecondaryButtonClick:c,onPrimaryButtonClick:k})},`${e?.title||""}${a}`)),y.map((e,a)=>t(R,{span:l("full"),className:"laptop:hidden block",children:t(M,{data:e,configuration:{shape:w,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{shape:w,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),B&&t(A,{visible:B,youTubeId:d,videoUrl:$,onCloseModal:()=>x(!1)})]})});E.displayName="MultiLayoutGraphicBlock";var we=q(E);export{we as default};
+import{Fragment as H,jsx as t,jsxs as o}from"react/jsx-runtime";import j,{useState as P,useEffect as D,useRef as Q}from"react";import{useMediaQuery as Y}from"react-responsive";import{withLayout as q}from"../../shared/Styles.js";import _ from"../../components/picture.js";import S from"../../components/button.js";import{Heading as z}from"../../components/heading.js";import{VideoModal as A}from"../VideoModal/index.js";import{Grid as O,GridItem as R}from"../../components/gird.js";import Z from"../Title/index.js";import{cn as T,spaceToHyphen as C}from"../../helpers/utils.js";import L from"../SwiperBox/index.js";import{isVideo as U}from"../../shared/mimeType.js";import{Tabs as F,TabsList as J,TabsTrigger as K,TabsContent as W}from"../../components/tabs.js";import{useExposure as X}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{gaTrack as ee}from"../../shared/track.js";const h="image",f="p1_banner",M=({data:i,configuration:r,jIndex:c,spanType:k,title:b,onSecondaryButtonClick:p,onPrimaryButtonClick:v})=>{const[y,m]=P(!1),B=Y({query:"(max-width: 768px)"}),x=Q(null),$=()=>{if(k)switch(k){case"full":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"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(r?.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-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};X(x,{componentType:h,componentName:f,position:c,componentTitle:i.title,componentDescription:i.description,navigation:r?.activeTab}),D(()=>{m(B)},[B]);const{theme:N="light",title:d,description:u,imageUrl:l,primaryButton:n,secondaryButton:s,imageMobileUrl:w,blockLink:g,video:e,youtubeId:a,isYouTube:V}=i,G="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:T("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",$(),{"rounded-2xl":r?.shape==="rounded","aiui-dark":N==="dark","h-[400px]":y},"text-info-primary"),ref:x,children:[(g||s.link)&&t("a",{className:"absolute inset-0 z-10",href:I(g||s.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,"aria-hidden":"true",tabIndex:-1}),o("div",{className:"absolute inset-0",children:[U(l?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:l?.url,type:"video/mp4"})}):t(_,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),U(w?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:w?.url,type:"video/mp4"})}):t(_,{source:w?.url||l?.url,alt:w?.alt||l?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:T("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[o("div",{className:"flex flex-col gap-1",children:[t(z,{size:3,as:"h3",className:"item-title",html:d}),t(z,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:u})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&o(S,{"aria-label":d??u,className:T(G,"link-left"),variant:"secondary",as:"a",onClick:()=>{p?.(i)},href:I(s.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}#${s.text}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,children:[s.text,t("span",{className:"sr-only",children:d??u})]}),n&&n.text&&t(S,{"aria-label":d??u,className:T(G,"link-right"),variant:"primary",as:"a",onClick:()=>{v?.(i)},href:I(n.link,`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${d}#${u}#${n.text}`,"data-headless-nav-postion":`${r?.activeTab}#${c}`,children:n.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{r?.onVideoPlayBtnClick?.(e?.url||a,V)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-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=j.forwardRef((i,r)=>{const{onSecondaryButtonClick:c,onPrimaryButtonClick:k}=i,{shape:b,sectionTitle:p,groupByTab:v=!1,items:y=[],carousel:m}=i.data,[B,x]=P(!1),[$,N]=P(""),[d,u]=P(""),l=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=y.map(e=>e.tabName).filter(Boolean).filter((e,a,V)=>V.indexOf(e)===a),s=(e,a)=>{x(!0),a?u?.(e||""):N?.(e||"")},w=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},g=n.map(e=>({tabName:e,items:y.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:r,className:T("multiLayoutGraphicBlock","text-info-primary",i.className),children:[p&&t(Z,{data:{title:p},className:"section-title"}),v?o(F,{shape:b,align:"left",defaultValue:C(n[0]),children:[t(J,{children:n.map((e,a)=>t(K,{value:C(e),onClick:()=>{ee({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:f,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),n.map((e,a)=>t(W,{value:C(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:o(H,{children:[t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:g?.[e]||[],configuration:{shape:b,isTab:v,activeTab:e,title:p,num:g?.[e]?.length||0,onVideoPlayBtnClick:s,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(g?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(g?.[e]?.length||0)}}}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{shape:b,isTab:v,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):o(H,{children:[o(O,{className:"w-full",children:[y.map((e,a)=>t(R,{span:l(e.width??"full"),className:"laptop:block hidden",children:t(M,{data:e,configuration:{shape:b,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:e.width,onSecondaryButtonClick:c,onPrimaryButtonClick:k})},`${e?.title||""}${a}`)),y.map((e,a)=>t(R,{span:l("full"),className:"laptop:hidden block",children:t(M,{data:e,configuration:{shape:b,onVideoPlayBtnClick:s,title:p},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),m&&m?.items.length>0?t(L,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{shape:b,onVideoPlayBtnClick:s,title:p,onSecondaryButtonClick:c,onPrimaryButtonClick:k}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),B&&t(A,{visible:B,youTubeId:d,videoUrl:$,onCloseModal:()=>x(!1)})]})});E.displayName="MultiLayoutGraphicBlock";var be=q(E);export{be as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\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 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\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-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"tablet:block hidden overflow-hidden w-full h-full object-cover\"\n          >\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"tablet:hidden block overflow-hidden w-full h-full object-cover\"\n          >\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { onSecondaryButtonClick, onPrimaryButtonClick } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "AAiHQ,OAuNM,YAAAA,EAvNN,OAAAC,EAwDE,QAAAC,MAxDF,oBAjHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,MAAqB,yBAClC,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,MAAmB,2BACzD,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIlC,EAAkB,EAAK,EACjDmC,EAAahC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DiC,EAAMlC,EAAuB,IAAI,EAEjCmC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAP,EAAYgB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED1B,EAAU,IAAM,CACdiC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAItB,EACEuB,EAAe,mFAErB,OACEnD,EAAC,OACC,UAAWc,EACT,8BACA,qEACAyB,EAAa,EACb,CACE,cAAeV,GAAe,QAAU,UACxC,YAAaW,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7B9C,EAAC,KACC,UAAU,wBACV,KAAMwB,EAAYwB,GAAaF,EAAgB,KAAM,GAAGpB,CAAa,IAAIC,CAAa,EAAE,EACxF,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,4BAA2B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GAChE,cAAY,OACZ,SAAU,GACZ,EAEF9B,EAAC,OAAI,UAAU,mBACZ,UAAAiB,EAAQ0B,GAAU,QAAQ,EACzB5C,EAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,iEAEV,SAAAA,EAAC,UAAO,IAAK4C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA5C,EAACQ,EAAA,CACC,OAAQoC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED1B,EAAQ6B,GAAgB,QAAQ,EAC/B/C,EAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,iEAEV,SAAAA,EAAC,UAAO,IAAK+C,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEA/C,EAACQ,EAAA,CACC,OAAQuC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,EAEF3C,EAAC,OACC,UAAWc,EACT,sIACA,CACE,sEAAuEc,GAAM,QAAU,MACzF,CACF,EAEA,UAAA5B,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMgC,EAAO,EAC9D1C,EAACU,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMiC,EACR,GACF,EACA1C,EAAC,OAAI,UAAU,8BACZ,UAAA6C,GAAmBA,EAAgB,MAClC7C,EAACQ,EAAA,CACC,aAAYiC,GAASC,EACrB,UAAW5B,EAAGqC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAML,EAAYsB,EAAgB,KAAM,GAAGpB,CAAa,IAAIC,CAAa,EAAE,EAC3E,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,4BAA2B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAE/D,UAAAe,EAAgB,KACjB9C,EAAC,QAAK,UAAU,UAAW,SAAA0C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9B7C,EAACS,EAAA,CACC,aAAYiC,GAASC,EACrB,UAAW5B,EAAGqC,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAML,EAAYqB,EAAc,KAAM,GAAGnB,CAAa,IAAIC,CAAa,EAAE,EACzE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,4BAA2B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAE/D,SAAAc,EAAc,KACjB,GAEJ,GACF,GACF,EACA7C,EAAC,OACC,SAAAA,EAAC,OAAI,UAAU,gEACX,UAAAiD,GAAO,KAAOC,IACdlD,EAAC,UACC,QAAS,IAAM,CACb8B,GAAe,sBAAsBmB,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,SAAAnD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEMqD,EAA0BnD,EAAM,WAAyD,CAACoD,EAAOf,IAAQ,CAC7G,KAAM,CAAE,uBAAAL,EAAwB,qBAAAC,CAAqB,EAAImB,EACnD,CAAE,MAAAC,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIL,EAAM,KAC1E,CAACM,EAASC,CAAU,EAAI1D,EAAkB,EAAK,EAC/C,CAAC2D,EAAUC,CAAW,EAAI5D,EAAiB,EAAE,EAC7C,CAAC6D,EAAWC,CAAY,EAAI9D,EAAiB,EAAE,EAE/C+D,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWV,EACd,IAAI7B,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAMwC,EAAOC,IAAQA,EAAI,QAAQzC,CAAI,IAAMwC,CAAK,EAErDE,EAA0B,CAACC,EAAarB,IAAuB,CACnEU,EAAW,EAAI,EACXV,EACFc,IAAeO,GAAO,EAAE,EAExBT,IAAcS,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOnB,EAAM,OAAO7B,GAAQA,EAAK,UAAYgD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,OACE7E,EAAC,WACC,uBAAqB,0BACrB,IAAKsC,EACL,UAAWxB,EAAG,0BAA2B,oBAAqBuC,EAAM,SAAS,EAE5E,UAAAE,GAAgBxD,EAACc,EAAA,CAAM,KAAM,CAAE,MAAO0C,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACCxD,EAACkB,EAAA,CAAK,MAAOoC,EAAO,MAAM,OAAO,aAAcvC,EAAcoD,EAAS,CAAC,CAAE,EACvE,UAAApE,EAACoB,EAAA,CACE,SAAAgD,EAAS,IAAI,CAACS,EAASR,IACtBrE,EAACqB,EAAA,CAEC,MAAOL,EAAc6D,CAAQ,EAC7B,QAAS,IAAM,CACbpD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiB6B,EACjB,mBAAoB,EACpB,WAAYqB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtBrE,EAACsB,EAAA,CAAwB,MAAON,EAAc6D,CAAQ,EAAG,UAAU,qCACjE,SAAA5E,EAAAF,EAAA,CACE,UAAAC,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM2D,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOtB,EACP,MAAOE,EACP,UAAWoB,EACX,MAAOrB,EACP,IAAKoB,IAAeC,CAAO,GAAG,QAAU,EACxC,oBAAqBN,EACrB,uBAAArC,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe6C,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACClB,GAAYA,GAAU,MAAM,OAAS,EACpC3D,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM0C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,MAAOE,EACP,oBAAqBc,EACrB,MAAOf,EACP,uBAAAtB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAvFgByC,CAwFlB,CACD,GACH,EAEApE,EAAAF,EAAA,CACE,UAAAE,EAACW,EAAA,CAAK,UAAU,SACb,UAAA8C,EAAM,IAAI,CAAC7B,EAAMwC,IAEdrE,EAACa,EAAA,CAEC,KAAMqD,EAAQrC,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAA7B,EAAC4B,EAAA,CACC,KAAMC,EACN,cAAe,CAAE,MAAO0B,EAAO,oBAAqBgB,EAAyB,MAAOf,CAAa,EACjG,OAAQa,EACR,SAAUxC,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAXK,GAAGN,GAAM,OAAS,EAAE,GAAGwC,CAAK,EAYnC,CAEH,EACAX,EAAM,IAAI,CAAC7B,EAAMwC,IAChBrE,EAACa,EAAA,CAA8C,KAAMqD,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAAlE,EAAC4B,EAAA,CACC,KAAMC,EACN,cAAe,CAAE,MAAO0B,EAAO,oBAAqBgB,EAAyB,MAAOf,CAAa,EACjG,OAAQa,EACR,SAAU,OACZ,GANa,GAAGxC,GAAM,OAAS,EAAE,GAAGwC,CAAK,EAO3C,CACD,GACH,EACCV,GAAYA,GAAU,MAAM,OAAS,EACpC3D,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM0C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,oBAAqBgB,EACrB,MAAOf,EACP,uBAAAtB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,EAEDgC,GACC5D,EAACW,EAAA,CACC,QAASiD,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDR,EAAwB,YAAc,0BAEtC,IAAO2B,GAAQzE,EAAW8C,CAAuB",
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\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 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\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-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { onSecondaryButtonClick, onPrimaryButtonClick } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "AAiHQ,OA2MM,YAAAA,EA3MN,OAAAC,EA4CE,QAAAC,MA5CF,oBAjHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,MAAqB,yBAClC,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,MAAmB,2BACzD,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIlC,EAAkB,EAAK,EACjDmC,EAAahC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DiC,EAAMlC,EAAuB,IAAI,EAEjCmC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAP,EAAYgB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED1B,EAAU,IAAM,CACdiC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAItB,EACEuB,EAAe,mFAErB,OACEnD,EAAC,OACC,UAAWc,EACT,8BACA,qEACAyB,EAAa,EACb,CACE,cAAeV,GAAe,QAAU,UACxC,YAAaW,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7B9C,EAAC,KACC,UAAU,wBACV,KAAMwB,EAAYwB,GAAaF,EAAgB,KAAM,GAAGpB,CAAa,IAAIC,CAAa,EAAE,EACxF,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,4BAA2B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GAChE,cAAY,OACZ,SAAU,GACZ,EAEF9B,EAAC,OAAI,UAAU,mBACZ,UAAAiB,EAAQ0B,GAAU,QAAQ,EACzB5C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK4C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA5C,EAACQ,EAAA,CACC,OAAQoC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED1B,EAAQ6B,GAAgB,QAAQ,EAC/B/C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK+C,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEA/C,EAACQ,EAAA,CACC,OAAQuC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,EAEF3C,EAAC,OACC,UAAWc,EACT,sIACA,CACE,sEAAuEc,GAAM,QAAU,MACzF,CACF,EAEA,UAAA5B,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMgC,EAAO,EAC9D1C,EAACU,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMiC,EACR,GACF,EACA1C,EAAC,OAAI,UAAU,8BACZ,UAAA6C,GAAmBA,EAAgB,MAClC7C,EAACQ,EAAA,CACC,aAAYiC,GAASC,EACrB,UAAW5B,EAAGqC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAML,EAAYsB,EAAgB,KAAM,GAAGpB,CAAa,IAAIC,CAAa,EAAE,EAC3E,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,4BAA2B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAE/D,UAAAe,EAAgB,KACjB9C,EAAC,QAAK,UAAU,UAAW,SAAA0C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9B7C,EAACS,EAAA,CACC,aAAYiC,GAASC,EACrB,UAAW5B,EAAGqC,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAML,EAAYqB,EAAc,KAAM,GAAGnB,CAAa,IAAIC,CAAa,EAAE,EACzE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,4BAA2B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAE/D,SAAAc,EAAc,KACjB,GAEJ,GACF,GACF,EACA7C,EAAC,OACC,SAAAA,EAAC,OAAI,UAAU,gEACX,UAAAiD,GAAO,KAAOC,IACdlD,EAAC,UACC,QAAS,IAAM,CACb8B,GAAe,sBAAsBmB,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,SAAAnD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEMqD,EAA0BnD,EAAM,WAAyD,CAACoD,EAAOf,IAAQ,CAC7G,KAAM,CAAE,uBAAAL,EAAwB,qBAAAC,CAAqB,EAAImB,EACnD,CAAE,MAAAC,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIL,EAAM,KAC1E,CAACM,EAASC,CAAU,EAAI1D,EAAkB,EAAK,EAC/C,CAAC2D,EAAUC,CAAW,EAAI5D,EAAiB,EAAE,EAC7C,CAAC6D,EAAWC,CAAY,EAAI9D,EAAiB,EAAE,EAE/C+D,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWV,EACd,IAAI7B,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAMwC,EAAOC,IAAQA,EAAI,QAAQzC,CAAI,IAAMwC,CAAK,EAErDE,EAA0B,CAACC,EAAarB,IAAuB,CACnEU,EAAW,EAAI,EACXV,EACFc,IAAeO,GAAO,EAAE,EAExBT,IAAcS,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOnB,EAAM,OAAO7B,GAAQA,EAAK,UAAYgD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,OACE7E,EAAC,WACC,uBAAqB,0BACrB,IAAKsC,EACL,UAAWxB,EAAG,0BAA2B,oBAAqBuC,EAAM,SAAS,EAE5E,UAAAE,GAAgBxD,EAACc,EAAA,CAAM,KAAM,CAAE,MAAO0C,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACCxD,EAACkB,EAAA,CAAK,MAAOoC,EAAO,MAAM,OAAO,aAAcvC,EAAcoD,EAAS,CAAC,CAAE,EACvE,UAAApE,EAACoB,EAAA,CACE,SAAAgD,EAAS,IAAI,CAACS,EAASR,IACtBrE,EAACqB,EAAA,CAEC,MAAOL,EAAc6D,CAAQ,EAC7B,QAAS,IAAM,CACbpD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiB6B,EACjB,mBAAoB,EACpB,WAAYqB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtBrE,EAACsB,EAAA,CAAwB,MAAON,EAAc6D,CAAQ,EAAG,UAAU,qCACjE,SAAA5E,EAAAF,EAAA,CACE,UAAAC,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM2D,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOtB,EACP,MAAOE,EACP,UAAWoB,EACX,MAAOrB,EACP,IAAKoB,IAAeC,CAAO,GAAG,QAAU,EACxC,oBAAqBN,EACrB,uBAAArC,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe6C,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACClB,GAAYA,GAAU,MAAM,OAAS,EACpC3D,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM0C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,MAAOE,EACP,oBAAqBc,EACrB,MAAOf,EACP,uBAAAtB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAvFgByC,CAwFlB,CACD,GACH,EAEApE,EAAAF,EAAA,CACE,UAAAE,EAACW,EAAA,CAAK,UAAU,SACb,UAAA8C,EAAM,IAAI,CAAC7B,EAAMwC,IAEdrE,EAACa,EAAA,CAEC,KAAMqD,EAAQrC,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAA7B,EAAC4B,EAAA,CACC,KAAMC,EACN,cAAe,CAAE,MAAO0B,EAAO,oBAAqBgB,EAAyB,MAAOf,CAAa,EACjG,OAAQa,EACR,SAAUxC,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAXK,GAAGN,GAAM,OAAS,EAAE,GAAGwC,CAAK,EAYnC,CAEH,EACAX,EAAM,IAAI,CAAC7B,EAAMwC,IAChBrE,EAACa,EAAA,CAA8C,KAAMqD,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAAlE,EAAC4B,EAAA,CACC,KAAMC,EACN,cAAe,CAAE,MAAO0B,EAAO,oBAAqBgB,EAAyB,MAAOf,CAAa,EACjG,OAAQa,EACR,SAAU,OACZ,GANa,GAAGxC,GAAM,OAAS,EAAE,GAAGwC,CAAK,EAO3C,CACD,GACH,EACCV,GAAYA,GAAU,MAAM,OAAS,EACpC3D,EAACiB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM0C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,oBAAqBgB,EACrB,MAAOf,EACP,uBAAAtB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,EAEDgC,GACC5D,EAACW,EAAA,CACC,QAASiD,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDR,EAAwB,YAAc,0BAEtC,IAAO2B,GAAQzE,EAAW8C,CAAuB",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

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

@@ -1,4 +1,4 @@
-import{Fragment as $,jsx as a,jsxs as s}from"react/jsx-runtime";import{Picture as b,Text as r,Button as G,Container as j,Link as u,Heading as y,Grid as q,GridItem as z}from"../../components/index.js";import{Search as K,Close as H}from"../HeaderNavigation/icons/index.js";import{forwardRef as M,useCallback as w,useMemo as C,useState as L}from"react";import{useAiuiContext as V}from"../AiuiProvider/index.js";import{SearchStatus as m}from"./types.js";import{debounce as J}from"es-toolkit";import{cn as x,atobID as D,highlightSearchWord as O}from"../../helpers/utils.js";const Q=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),U=M(({data:t,onSearch:l,onClose:n,searchResult:o,isSearching:c,keywords:p},P)=>{const{locale:d="us",copyWriting:Y}=V(),[i,S]=L(""),[f,N]=L(!1),E=J(e=>{l(e)},300),I=w(e=>{e.key==="Enter"&&!f&&l(i)},[f,i,l]),T=C(()=>Array.isArray(p)&&p?.length?p.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[p,t?.popularWords]),A=w(e=>{switch(e.type){case"Product":return`/products${e.path}?q=${i.toLowerCase()}`;case"Article":return`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${i.toLowerCase()}`;default:break}},[i]),k=C(()=>{if(i){if(o?.totalCount)return m.Predict;if(!c)return m.Empty}else return m.Default},[o?.totalCount,i]);return s(j,{childClassName:"!bg-white",className:"relative",ref:P,children:[a("style",{jsx:!0,global:!0,children:`
+import{Fragment as $,jsx as s,jsxs as a}from"react/jsx-runtime";import{Picture as x,Text as r,Button as G,Container as j,Link as u,Heading as y,Grid as q,GridItem as z}from"../../components/index.js";import{Search as K,Close as H}from"../HeaderNavigation/icons/index.js";import{forwardRef as M,useCallback as w,useMemo as C,useState as L}from"react";import{useAiuiContext as V}from"../AiuiProvider/index.js";import{SearchStatus as m}from"./types.js";import{debounce as J}from"es-toolkit";import{cn as b,atobID as D,highlightSearchWord as O}from"../../helpers/utils.js";const Q=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),U=M(({data:t,onSearch:l,onClose:n,searchResult:o,isSearching:c,keywords:p},P)=>{const{locale:d="us",copyWriting:Y}=V(),[i,S]=L(""),[f,N]=L(!1),E=J(e=>{l(e)},300),I=w(e=>{e.key==="Enter"&&!f&&l(i)},[f,i,l]),T=C(()=>Array.isArray(p)&&p?.length?p.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[p,t?.popularWords]),A=w(e=>{switch(e.type){case"Product":return`/products${e.path}?q=${i.toLowerCase()}`;case"Article":return`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${i.toLowerCase()}`;default:break}},[i]),k=C(()=>{if(i){if(o?.totalCount)return m.Predict;if(!c)return m.Empty}else return m.Default},[o?.totalCount,i]);return a(j,{childClassName:"!bg-white",className:"relative",ref:P,children:[s("style",{jsx:!0,global:!0,children:`
             .navigation-search-component input:-webkit-autofill,
             .navigation-search-component input:-webkit-autofill:hover,
             .navigation-search-component input:-webkit-autofill:focus {
@@ -7,5 +7,5 @@ import{Fragment as $,jsx as a,jsxs as s}from"react/jsx-runtime";import{Picture a
               transition: background-color 9999s ease-in-out 0s !important;
               caret-color: #000;
             }
-          `}),s("div",{className:"navigation-search-component laptop:h-[52px] text-black desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200",children:[a("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:I,onChange:e=>{S(e.target.value),e.target.value&&E(e.target.value)},type:"text",className:"text-sm bg-white basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[a(K,{className:"size-5 cursor-pointer",onClick:()=>l(i)}),a("div",{className:"w-[1px] h-[20px] bg-[#E4E5E6]"}),a(H,{className:"size-5 cursor-pointer",onClick:n})]})]}),a("div",{className:"flex flex-col gap-6 desktop:gap-12 text-black desktop:py-6 py-4",children:k===m.Predict?s($,{children:[s("div",{children:[s("div",{className:"flex items-center gap-2",children:[a(r,{html:t?.suggestText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),o?.items?.length>6&&a(G,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!text-sm leading-[1.2] font-bold !p-0",variant:"link",children:t?.moreText})]}),a("div",{className:"flex flex-col mt-2",children:o?.items?.filter(e=>Q(e)).slice(0,6)?.map(e=>a(u,{className:"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4",href:A(e),children:a(r,{html:O(e.title,i),className:"text-sm cursor-pointer leading-[1.4] font-bold"})},e.id))})]}),s("div",{children:[a(r,{html:t?.hotProductsText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),s("div",{className:"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4",children:[a(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:s("div",{className:"relative",children:[a(b,{source:t?.advertisingBgImg?.url,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[a(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:x("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),a(r,{html:t?.advertisingSubtitle||"20.000mAh",className:x("text-sm text-white font-bold",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),o?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const g=e?.variants?.[0],h=`${g?.image?.url||e?.images?.[0]?.url}`,v=e?.title||e?.name,B=e?.description,W=e?.badge||"",_=`/products/${e?.handle}?variant=${D(g?.id)}`;return a(F,{productImage:h,productName:v,productDesc:B,productBadge:W,listingLink:_},e.id)})]})]})]}):s($,{children:[k===m.Empty&&a(r,{html:t?.noResultText,as:"p",className:"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold"}),s("div",{children:[a(r,{html:t?.popularText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),s("div",{className:"mt-2",children:[a(X,{data:t,keywords:T,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&a(q,{className:"gap-3 laptop:gap-4 mt-3 laptop:mt-4",children:t?.popularPages?.map(e=>a(z,{className:"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3",children:a("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[a(r,{html:t?.hotProductsText,className:"text-sm text-[#6D6D6F] leading-[1.4] font-bold"}),s("div",{className:"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4",children:[a(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:s("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[a(b,{source:t?.advertisingBgImg?.url,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[a(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),a(r,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const g=e?.custom_description,h=e?.badge||"",v=`/products/${e?.handle}?variant=${D(e?.shopify_id)}`;return a(F,{productImage:e?.image,productName:e?.name,productDesc:g,productBadge:h,listingLink:v},e.id)})]})]})]})})]})}),F=({productImage:t,productName:l,productDesc:n,productBadge:o,className:c,listingLink:p})=>s("div",{className:x("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",c),children:[a("div",{className:"shrink-0",children:a(b,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),s("div",{className:"relative",children:[a("div",{className:" h-[24px] ",children:o&&a(r,{as:"p",html:o,className:"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]"})}),s("div",{children:[a(u,{href:p,className:"no-underline hover:text-current",children:a(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l})}),n&&a(r,{as:"p",html:n,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),X=({data:t,keywords:l,locale:n})=>a("div",{className:"flex flex-wrap gap-3 laptop:gap-4",children:l?.map((o,c)=>a("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${o?.toLowerCase()}`,className:"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold",children:o},c))});var ie=U;export{Q as canSearch,ie as default};
+          `}),a("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black",children:[s("input",{value:i,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:I,onChange:e=>{S(e.target.value),e.target.value&&E(e.target.value)},type:"text",className:"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none",placeholder:t?.placeholder}),a("div",{className:"flex items-center gap-3",children:[s(K,{className:"size-5 cursor-pointer",onClick:()=>l(i)}),s("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),s(H,{className:"size-5 cursor-pointer",onClick:n})]})]}),s("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:k===m.Predict?a($,{children:[a("div",{children:[a("div",{className:"flex items-center gap-2",children:[s(r,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),o?.items?.length>6&&s(G,{as:"a",href:`${d==="us"?"":d}${t?.moreLink}?q=${i.toLowerCase()}`,className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),s("div",{className:"mt-2 flex flex-col",children:o?.items?.filter(e=>Q(e)).slice(0,6)?.map(e=>s(u,{className:"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:A(e),children:s(r,{html:O(e.title,i),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),a("div",{children:[s(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[s(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"relative",children:[s(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[s(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:b("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),s(r,{html:t?.advertisingSubtitle||"20.000mAh",className:b("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),o?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,7)?.map(e=>{const g=e?.variants?.[0],h=`${g?.image?.url||e?.images?.[0]?.url}`,v=e?.title||e?.name,B=e?.description,W=e?.badge||"",_=`/products/${e?.handle}?variant=${D(g?.id)}`;return s(F,{productImage:h,productName:v,productDesc:B,productBadge:W,listingLink:_},e.id)})]})]})]}):a($,{children:[k===m.Empty&&s(r,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{children:[s(r,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"mt-2",children:[s(X,{data:t,keywords:T,locale:d}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&s(q,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>s(z,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:s("a",{href:`${d==="us"?"":d}${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),a("div",{children:[s(r,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),a("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[s(u,{asChild:!t?.advertisingLink,href:t?.advertisingLink,children:a("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[s(x,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),a("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[s(y,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:"font-bold text-white"}),s(r,{html:t?.advertisingSubtitle||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),t?.hotProducts?.slice(0,7)?.map(e=>{const g=e?.custom_description,h=e?.badge||"",v=`/products/${e?.handle}?variant=${D(e?.shopify_id)}`;return s(F,{productImage:e?.image,productName:e?.name,productDesc:g,productBadge:h,listingLink:v},e.id)})]})]})]})})]})}),F=({productImage:t,productName:l,productDesc:n,productBadge:o,className:c,listingLink:p})=>a("div",{className:b("flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",c),children:[s("div",{className:"shrink-0",children:s(x,{source:t,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),a("div",{className:"relative",children:[s("div",{className:" h-[24px] ",children:o&&s(r,{as:"p",html:o,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"})}),a("div",{children:[s(u,{href:p,className:"no-underline hover:text-current",children:s(r,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l})}),n&&s(r,{as:"p",html:n,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]}),X=({data:t,keywords:l,locale:n})=>s("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:l?.map((o,c)=>s("a",{href:`${n==="us"?"":n}${t?.moreLink}?q=${o?.toLowerCase()}`,className:"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:o},c))});var ie=U;export{Q as canSearch,ie as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
-  "sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          onSearch(searchValue)\n        }\n      },\n      [isComposing, searchValue, onSearch]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        switch (item.type) {\n          case 'Product':\n            return `/products${item.path}?q=${searchValue.toLowerCase()}`\n          case 'Article':\n            return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n          default:\n            break\n        }\n      },\n      [searchValue]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue])\n\n    return (\n      <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n        <style jsx global>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] text-black desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200\">\n          <input\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"text-sm bg-white basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"w-[1px] h-[20px] bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n\n        <div className=\"flex flex-col gap-6 desktop:gap-12 text-black desktop:py-6 py-4\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-2\">\n                  <Text html={data?.suggestText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n                      className=\"!text-sm leading-[1.2] font-bold !p-0\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"flex flex-col mt-2\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"text-sm cursor-pointer leading-[1.4] font-bold\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n                <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"relative\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"h-[114px] laptop:h-[120px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className={cn('font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className={cn('text-sm text-white font-bold', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, 7)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"gap-3 laptop:gap-4 mt-3 laptop:mt-4\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3\"\n                        >\n                          <a\n                            href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n                            className=\"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n                <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"h-[114px] laptop:h-[120px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className=\"font-bold text-white\"\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className=\"text-sm text-white font-bold\"\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110', className)}>\n      <div className=\"shrink-0\">\n        <Picture\n          source={productImage}\n          width={90}\n          height={90}\n          className=\"size-[96px]\"\n          imgClassName=\"object-contain h-full\"\n        />\n      </div>\n      <div className=\"relative\">\n        <div className=\" h-[24px] \">\n          {productBadge && (\n            <Text\n              as=\"p\"\n              html={productBadge}\n              className=\"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]\"\n            />\n          )}\n        </div>\n        <div>\n          <Link href={listingLink} className=\"no-underline hover:text-current\">\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n          </Link>\n          {productDesc && (\n            <Text\n              as=\"p\"\n              html={productDesc}\n              className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"flex flex-wrap gap-3 laptop:gap-4\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n          key={index}\n          className=\"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default NavigationSearch\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          onSearch(searchValue)\n        }\n      },\n      [isComposing, searchValue, onSearch]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        switch (item.type) {\n          case 'Product':\n            return `/products${item.path}?q=${searchValue.toLowerCase()}`\n          case 'Article':\n            return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n          default:\n            break\n        }\n      },\n      [searchValue]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue])\n\n    return (\n      <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n        <style jsx global>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between border-b border-b-gray-200 py-4 text-black\">\n          <input\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"basis-[200px] bg-white text-sm font-bold leading-[1.4] outline-none focus-visible:!outline-none\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-2\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"relative\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"laptop:h-[120px] h-[114px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className={cn('font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className={cn('text-sm font-bold text-white', {\n                            'text-black': data?.advertisingTheme === 'dark',\n                          })}\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, 7)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div>\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n                    <div className=\"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all\">\n                      <Picture\n                        source={data?.advertisingBgImg?.url}\n                        className=\"laptop:h-[120px] h-[114px]\"\n                        imgClassName=\"object-cover h-full\"\n                      />\n                      <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                        <Heading\n                          size={2}\n                          html={data?.advertisingTitle || 'Buy in Guide'}\n                          className=\"font-bold text-white\"\n                        />\n                        <Text\n                          html={data?.advertisingSubtitle || '20.000mAh'}\n                          className=\"text-sm font-bold text-white\"\n                        />\n                      </div>\n                    </div>\n                  </Link>\n                  {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110', className)}>\n      <div className=\"shrink-0\">\n        <Picture\n          source={productImage}\n          width={90}\n          height={90}\n          className=\"size-[96px]\"\n          imgClassName=\"object-contain h-full\"\n        />\n      </div>\n      <div className=\"relative\">\n        <div className=\" h-[24px] \">\n          {productBadge && (\n            <Text\n              as=\"p\"\n              html={productBadge}\n              className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n            />\n          )}\n        </div>\n        <div>\n          <Link href={listingLink} className=\"no-underline hover:text-current\">\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n          </Link>\n          {productDesc && (\n            <Text\n              as=\"p\"\n              html={productDesc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n          key={index}\n          className=\"laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default NavigationSearch\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Button", "Container", "Link", "Heading", "Grid", "GridItem", "SearchIcon", "CloseIcon", "forwardRef", "useCallback", "useMemo", "useState", "useAiuiContext", "SearchStatus", "debounce", "cn", "atobID", "highlightSearchWord", "canSearch", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "debouncedFunction", "value", "handleKeyDown", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "className", "index", "NavigationSearch_default"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/NavigationSearch/types.ts"],
-  "sourcesContent": ["export interface NavigationSearchProps {\n  data: any\n  onSearch: (value: string) => void\n  onClose: () => void\n  keywords?: {\n    search_term: string\n    search_date: string\n    shopify_domain: string\n    counts: number\n  }[]\n  searchResult: any\n  isSearching?: boolean\n}\n\nexport enum SearchStatus {\n  Default = 'default',\n  Predict = 'predict',\n  Empty = 'empty',\n}"],
+  "sourcesContent": ["export interface NavigationSearchProps {\n  data: any\n  onSearch: (value: string) => void\n  onClose: () => void\n  keywords?: {\n    search_term: string\n    search_date: string\n    shopify_domain: string\n    counts: number\n  }[]\n  searchResult: any\n  isSearching?: boolean\n}\n\nexport enum SearchStatus {\n  Default = 'default',\n  Predict = 'predict',\n  Empty = 'empty',\n}\n"],
   "mappings": "AAcO,IAAKA,OACVA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,MAAQ,QAHEA,OAAA",
   "names": ["SearchStatus"]
 }