@anker-in/headless-ui 1.1.32 → 1.1.34-alpha.1768461697532

package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import $,{useCallback as C,useEffect as P,useMemo as k,useRef as A,useState as F}from"react";import{Button as S,Container as z,Text as u,Link as w,Heading as _,Picture as j}from"../../components/index.js";import{cn as y,atobID as B}from"../../helpers/utils.js";import{DownArrow as E}from"./icons/index.js";import{useNavContext as D}from"./NavProvider.js";const O=$.memo(({sidebarCategoriesMetadata:l,seriesMetadata:p})=>{const{buildProps:b,onSidebarNavClick:h}=D(),[g,f]=F([]),[c,d]=F(-1),v=A(null),x=C(()=>{const a=l?.subcategories;if(!a?.length)return;const r=a.findIndex(o=>!!o?.subSubCategories),n=a.findIndex(o=>!o?.subSubCategories),s=a.map((o,m)=>({index:m,open:r===m||n===m}));f(s)},[l]);P(()=>{x()},[x]);const e=k(()=>{const a=l?.subcategories?.[g?.find(n=>n.open)?.index||0],r=p?.find(n=>n?.label?.toLowerCase()===a?.label?.toLowerCase())||{};if(a?.collections){const n=b?.categories?.[a?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,guide:r?.guide,series:[{products:n?.products}]}}else if(a?.subSubCategories){const n=a?.subSubCategories?.[c],s=p?.find(o=>o?.label?.toLowerCase()===n?.label?.toLowerCase())||{};if(n?.collections){const o=b?.categories?.[n?.collections]||{};return{label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,guide:s?.guide,series:[{products:o?.products}]}}else return s}else return r},[l,g,c,p,b]),N=C((a,r)=>{r?.subSubCategories?.length>0?d(0):d(-1),f(n=>n.map((s,o)=>({...s,open:o===a?!s.open:!1})))},[]),L=(a,r)=>{f(n=>n.map(s=>s.index===a?{...s,open:!0}:{...s,open:!1})),d(r)};return i(z,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[t("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:l?.subcategories?.map((a,r)=>{const n=Array.isArray(a?.subSubCategories)&&a?.subSubCategories?.length>0,s=g?.find(o=>o.index===r)?.open;return i("div",{children:[i("button",{className:y("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&s}),onClick:()=>{N(r,a),h?.(a,r)},"aria-expanded":n?s:void 0,"aria-haspopup":n?"true":void 0,children:[t(u,{html:a.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&t(E,{"aria-hidden":"true",className:y("size-4",{"rotate-180":s})})]}),s&&t("div",{className:"flex flex-col",role:"menu",children:a.subSubCategories?.map((o,m)=>t("button",{onClick:()=>{L(r,m),h?.(o,m)},className:y("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":c===m}),role:"menuitem","aria-label":o.label,children:t(u,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${r}-${m}`))})]},`subcategoryItem-${r}`)})}),l&&t("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[l?.primary&&t(S,{as:"a",href:`${l?.primary?.url}?ref=${l?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:l?.primary?.label}),l?.secondary&&t(S,{as:"a",href:l?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:l?.secondary?.label})]})})]}),i("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(e).length>0&&i("div",{className:"mb-4 flex items-center justify-between",children:[i("div",{className:"flex items-center gap-2",children:[t(u,{html:e?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),e?.primary&&!e?.primary?.hide&&t(S,{as:"a",href:`${e?.primary?.url}?ref=${e?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:e?.primary?.label})]}),t(w,{href:e?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:e?.guide?.label})]}),t("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e?.series?.map((a,r)=>i("div",{children:[a.label&&t(u,{html:a.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"grid grid-cols-3 gap-4",children:[!!e?.banner&&t(w,{asChild:!e?.banner?.href,href:e?.banner?.href,children:i("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[t(j,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),i("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[t(_,{size:2,html:e?.banner?.title||"Buy in Guide",className:y("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),t(u,{html:e?.banner?.desc||"20.000mAh",className:y("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),a.products?.map((n,s)=>t(R,{seriesLabel:e?.label,product:n,isCollection:e?.isCollection},`seriesProductItem-${s}`))]})]},`seriesItem-${r}`))})]})]})});O.displayName="SidebarDropdown";const R=({product:l,isCollection:p,position:b,seriesLabel:h})=>{const{buildProps:g,onSeriesProductClick:f}=D();let c=p?l:g?.products?.find(e=>e.handle===l.handle);const d=c?.variants?.find(e=>e.sku===l.sku)||c?.variants?.[0],v=k(()=>`/products/${c?.handle}?variant=${B(d?.id)}`,[c?.handle,d?.id]),x=k(()=>c?.tags?.filter?.(e=>e?.startsWith?.("CLtag"))?.map?.(e=>e?.replace?.("CLtag:",""))?.slice?.(0,2),[c?.tags]);return d?.availableForSale?t(w,{href:v,onClick:e=>{e.preventDefault(),window.open(v,"_self"),f?.(c,b||0,h)},className:"no-underline hover:text-current",children:i("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[t("div",{className:"shrink-0",children:t("img",{src:`${d?.image?.url||l?.images?.[0]?.url}`,loading:"lazy",alt:c?.title||l?.name,width:90,height:90,className:"size-[96px] object-contain"})}),i("div",{className:"relative",children:[t("div",{className:"flex gap-1",children:Array.isArray(x)&&x?.map((e,N)=>t(u,{as:"p",html:e,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},N))}),t(u,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c?.title||l?.name}),l?.desc&&t(u,{as:"p",html:l?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};export{R as SeriesProductItem,O as SidebarDropdown};
+import{jsx as t,jsxs as i}from"react/jsx-runtime";import $,{useCallback as C,useEffect as P,useMemo as k,useRef as A,useState as F}from"react";import{Button as S,Container as z,Text as u,Link as w,Heading as _,Picture as j}from"../../components/index.js";import{cn as y,atobID as B}from"../../helpers/utils.js";import{DownArrow as E}from"./icons/index.js";import{useNavContext as D}from"./NavProvider.js";const O=$.memo(({sidebarCategoriesMetadata:a,seriesMetadata:p})=>{const{buildProps:b,onSidebarNavClick:h}=D(),[f,g]=F([]),[c,m]=F(-1),v=A(null),x=C(()=>{const l=a?.subcategories;if(!l?.length)return;const r=l.findIndex(o=>!!o?.subSubCategories),n=l.findIndex(o=>!o?.subSubCategories),s=l.map((o,d)=>({index:d,open:r===d||n===d}));g(s)},[a]);P(()=>{x()},[x]);const e=k(()=>{const l=a?.subcategories?.[f?.find(n=>n.open)?.index||0],r=p?.find(n=>n?.label?.toLowerCase()===l?.label?.toLowerCase())||{};if(l?.collections){const n=b?.categories?.[l?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:n?.products}]}}else if(l?.subSubCategories){const n=l?.subSubCategories?.[c],s=p?.find(o=>o?.label?.toLowerCase()===n?.label?.toLowerCase())||{};if(n?.collections){const o=b?.categories?.[n?.collections]||{};return{label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:o?.products}]}}else return s}else return r},[a,f,c,p,b]),N=C((l,r)=>{r?.subSubCategories?.length>0?m(0):m(-1),g(n=>n.map((s,o)=>({...s,open:o===l?!s.open:!1})))},[]),L=(l,r)=>{g(n=>n.map(s=>s.index===l?{...s,open:!0}:{...s,open:!1})),m(r)};return i(z,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[t("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:a?.subcategories?.map((l,r)=>{const n=Array.isArray(l?.subSubCategories)&&l?.subSubCategories?.length>0,s=f?.find(o=>o.index===r)?.open;return i("div",{children:[i("button",{className:y("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&s}),onClick:()=>{N(r,l),h?.(l,r)},"aria-expanded":n?s:void 0,"aria-haspopup":n?"true":void 0,children:[t(u,{html:l.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&t(E,{"aria-hidden":"true",className:y("size-4",{"rotate-180":s})})]}),s&&t("div",{className:"flex flex-col",role:"menu",children:l.subSubCategories?.map((o,d)=>t("button",{onClick:()=>{L(r,d),h?.(o,d)},className:y("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":c===d}),role:"menuitem","aria-label":o.label,children:t(u,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${r}-${d}`))})]},`subcategoryItem-${r}`)})}),a&&t("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[a?.primary&&t(S,{as:"a",href:`${a?.primary?.url}?ref=${a?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:a?.primary?.label}),a?.secondary&&t(S,{as:"a",href:a?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:a?.secondary?.label})]})})]}),i("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(e).length>0&&i("div",{className:"mb-4 flex items-center justify-between",children:[i("div",{className:"flex items-center gap-2",children:[t(u,{html:e?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),e?.primary&&!e?.primary?.hide&&t(S,{as:"a",href:`${e?.primary?.url}?ref=${e?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:e?.primary?.label})]}),a?.guide?.label&&t(w,{href:a?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:a?.guide?.label})]}),t("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e?.series?.map((l,r)=>i("div",{children:[l.label&&t(u,{html:l.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"grid grid-cols-3 gap-4",children:[!!e?.banner&&t(w,{asChild:!e?.banner?.href,href:e?.banner?.href,children:i("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[t(j,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),i("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[t(_,{size:2,html:e?.banner?.title||"Buy in Guide",className:y("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),t(u,{html:e?.banner?.desc||"20.000mAh",className:y("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),l.products?.map((n,s)=>t(R,{seriesLabel:e?.label,product:n,isCollection:e?.isCollection},`seriesProductItem-${s}`))]})]},`seriesItem-${r}`))})]})]})});O.displayName="SidebarDropdown";const R=({product:a,isCollection:p,position:b,seriesLabel:h})=>{const{buildProps:f,onSeriesProductClick:g}=D();let c=p?a:f?.products?.find(e=>e.handle===a.handle);const m=c?.variants?.find(e=>e.sku===a.sku)||c?.variants?.[0],v=k(()=>`/products/${c?.handle}?variant=${B(m?.id)}`,[c?.handle,m?.id]),x=k(()=>c?.tags?.filter?.(e=>e?.startsWith?.("CLtag"))?.map?.(e=>e?.replace?.("CLtag:",""))?.slice?.(0,2),[c?.tags]);return m?.availableForSale?t(w,{href:v,onClick:e=>{e.preventDefault(),window.open(v,"_self"),g?.(c,b||0,h)},className:"no-underline hover:text-current",children:i("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[t("div",{className:"shrink-0",children:t("img",{src:`${m?.image?.url||a?.images?.[0]?.url}`,loading:"lazy",alt:c?.title||a?.name,width:90,height:90,className:"size-[96px] object-contain"})}),i("div",{className:"relative",children:[t("div",{className:"flex gap-1",children:Array.isArray(x)&&x?.map((e,N)=>t(u,{as:"p",html:e,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},N))}),t(u,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c?.title||a?.name}),a?.desc&&t(u,{as:"p",html:a?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};export{R as SeriesProductItem,O as SidebarDropdown};
 //# sourceMappingURL=SidebarDropdown.js.map

package/dist/esm/biz-components/HeaderNavigation/SidebarDropdown.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/SidebarDropdown.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n  ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n    const { buildProps, onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = sidebarCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [sidebarCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n    const matchSeriesMetadata = useMemo(() => {\n      const subCategory =\n        sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentSeriesMetadata =\n        seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n      if (subCategory?.collections) {\n        const category = buildProps?.categories?.[subCategory?.collections] || {}\n        return {\n          label: currentSeriesMetadata?.label,\n          isCollection: true,\n          banner: currentSeriesMetadata?.banner,\n          primary: currentSeriesMetadata?.primary,\n          guide: currentSeriesMetadata?.guide,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        }\n      } else {\n        if (subCategory?.subSubCategories) {\n          const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n          const currentActiveSeriesMetadata =\n            seriesMetadata?.find(\n              (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n            ) || {}\n          if (activeSubSubcategory?.collections) {\n            const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n            return {\n              label: currentActiveSeriesMetadata?.label,\n              isCollection: true,\n              banner: currentActiveSeriesMetadata?.banner,\n              primary: currentActiveSeriesMetadata?.primary,\n              guide: currentActiveSeriesMetadata?.guide,\n              series: [\n                {\n                  products: category?.products,\n                },\n              ],\n            }\n          } else {\n            return currentActiveSeriesMetadata\n          }\n        } else {\n          return currentSeriesMetadata\n        }\n      }\n    }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={sidebarDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {sidebarCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {sidebarCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {sidebarCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={sidebarCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 py-4\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text\n                  html={matchSeriesMetadata?.label}\n                  className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n                />\n                {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n                  <Button\n                    as=\"a\"\n                    href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Button>\n                )}\n              </div>\n              <Link\n                href={matchSeriesMetadata?.guide?.url}\n                className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n              >\n                {matchSeriesMetadata?.guide?.label}\n              </Link>\n            </div>\n          )}\n          <div\n            className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesIndex}`}>\n                {seriesItem.label && (\n                  <Text\n                    html={seriesItem.label}\n                    as=\"p\"\n                    className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                  />\n                )}\n                <div className=\"grid grid-cols-3 gap-4\">\n                  {!!matchSeriesMetadata?.banner && (\n                    <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n                      <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={matchSeriesMetadata?.banner?.imageUrl}\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={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem\n                      seriesLabel={matchSeriesMetadata?.label}\n                      key={`seriesProductItem-${index}`}\n                      product={product}\n                      isCollection={matchSeriesMetadata?.isCollection}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n  product,\n  isCollection,\n  position,\n  seriesLabel,\n}: {\n  product: any\n  isCollection?: boolean\n  position?: number\n  seriesLabel?: string\n}) => {\n  const { buildProps, onSeriesProductClick } = useNavContext()\n  let productData = isCollection\n    ? product\n    : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant =\n    productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n  const listingLink = useMemo(() => {\n    return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id])\n\n  const tags = useMemo(() => {\n    return productData?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [productData?.tags])\n\n  if (!variant?.availableForSale) return null\n\n  return (\n    <Link\n      href={listingLink}\n      onClick={e => {\n        e.preventDefault()\n        window.open(listingLink, '_self')\n        onSeriesProductClick?.(productData, position || 0, seriesLabel)\n      }}\n      className=\"no-underline hover:text-current\"\n    >\n      <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n        <div className=\"shrink-0\">\n          <img\n            src={`${variant?.image?.url || product?.images?.[0]?.url}`}\n            loading=\"lazy\"\n            alt={productData?.title || product?.name}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\"flex gap-1\">\n            {Array.isArray(tags) &&\n              tags?.map((tag: string, index: number) => (\n                <Text\n                  key={index}\n                  as=\"p\"\n                  html={tag}\n                  className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n                />\n              ))}\n          </div>\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={productData?.title || product?.name}\n          />\n          {product?.desc && (\n            <Text\n              as=\"p\"\n              html={product?.desc}\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    </Link>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n  ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n    const { buildProps, onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = sidebarCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [sidebarCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n    const matchSeriesMetadata = useMemo(() => {\n      const subCategory =\n        sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentSeriesMetadata =\n        seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n      if (subCategory?.collections) {\n        const category = buildProps?.categories?.[subCategory?.collections] || {}\n        return {\n          label: currentSeriesMetadata?.label,\n          isCollection: true,\n          banner: currentSeriesMetadata?.banner,\n          primary: currentSeriesMetadata?.primary,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        }\n      } else {\n        if (subCategory?.subSubCategories) {\n          const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n          const currentActiveSeriesMetadata =\n            seriesMetadata?.find(\n              (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n            ) || {}\n          if (activeSubSubcategory?.collections) {\n            const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n            return {\n              label: currentActiveSeriesMetadata?.label,\n              isCollection: true,\n              banner: currentActiveSeriesMetadata?.banner,\n              primary: currentActiveSeriesMetadata?.primary,\n              series: [\n                {\n                  products: category?.products,\n                },\n              ],\n            }\n          } else {\n            return currentActiveSeriesMetadata\n          }\n        } else {\n          return currentSeriesMetadata\n        }\n      }\n    }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={sidebarDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {sidebarCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {sidebarCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {sidebarCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={sidebarCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 py-4\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text\n                  html={matchSeriesMetadata?.label}\n                  className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n                />\n                {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n                  <Button\n                    as=\"a\"\n                    href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Button>\n                )}\n              </div>\n              {sidebarCategoriesMetadata?.guide?.label && (\n                <Link\n                  href={sidebarCategoriesMetadata?.guide?.url}\n                  className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n                >\n                  {sidebarCategoriesMetadata?.guide?.label}\n                </Link>\n              )}\n            </div>\n          )}\n          <div\n            className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesIndex}`}>\n                {seriesItem.label && (\n                  <Text\n                    html={seriesItem.label}\n                    as=\"p\"\n                    className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                  />\n                )}\n                <div className=\"grid grid-cols-3 gap-4\">\n                  {!!matchSeriesMetadata?.banner && (\n                    <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n                      <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={matchSeriesMetadata?.banner?.imageUrl}\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={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem\n                      seriesLabel={matchSeriesMetadata?.label}\n                      key={`seriesProductItem-${index}`}\n                      product={product}\n                      isCollection={matchSeriesMetadata?.isCollection}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n  product,\n  isCollection,\n  position,\n  seriesLabel,\n}: {\n  product: any\n  isCollection?: boolean\n  position?: number\n  seriesLabel?: string\n}) => {\n  const { buildProps, onSeriesProductClick } = useNavContext()\n  let productData = isCollection\n    ? product\n    : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant =\n    productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n  const listingLink = useMemo(() => {\n    return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id])\n\n  const tags = useMemo(() => {\n    return productData?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [productData?.tags])\n\n  if (!variant?.availableForSale) return null\n\n  return (\n    <Link\n      href={listingLink}\n      onClick={e => {\n        e.preventDefault()\n        window.open(listingLink, '_self')\n        onSeriesProductClick?.(productData, position || 0, seriesLabel)\n      }}\n      className=\"no-underline hover:text-current\"\n    >\n      <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n        <div className=\"shrink-0\">\n          <img\n            src={`${variant?.image?.url || product?.images?.[0]?.url}`}\n            loading=\"lazy\"\n            alt={productData?.title || product?.name}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\"flex gap-1\">\n            {Array.isArray(tags) &&\n              tags?.map((tag: string, index: number) => (\n                <Text\n                  key={index}\n                  as=\"p\"\n                  html={tag}\n                  className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n                />\n              ))}\n          </div>\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={productData?.title || product?.name}\n          />\n          {product?.desc && (\n            <Text\n              as=\"p\"\n              html={product?.desc}\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    </Link>\n  )\n}\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "Link", "Heading", "Picture", "cn", "atobID", "DownArrow", "useNavContext", "SidebarDropdown", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "tag"]
 }

package/dist/esm/biz-components/HeaderNavigation/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { HeaderNavigationProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<HeaderNavigationProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: React.ForwardRefExoticComponent<Omit<HeaderNavigationProps & React.RefAttributes<HTMLDivElement> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/HeroBanner/Countdown.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{cn as i}from"../../helpers/index.js";import{useEffect as M,useRef as P,useState as S,useMemo as W}from"react";const c=(a,u=2)=>String(Math.abs(a)).padStart(u,"0"),l="h-full flex-1 max-w-12 text-center bg-info-white text-xs text-info-primary overflow-hidden lg-desktop:p-1 p-0.5 font-semibold border-box",d="w-full lg-desktop:text-2xl lg-desktop:h-7 text-xl text-center h-6 lg-desktop:w-10 w-9 font-bold",Z=({endDate:a,endDate_tz:u,locale:k,dateFormat:m,onExpire:x})=>{const v=()=>({day:"Day",hour:"Hours",minute:"Mins",second:"Secs"});function C(t){try{let n=t?.trim?.();return!n?.startsWith?.("{")||!n?.endsWith?.("}")?{}:(n=n?.replace?.(/(\w+)\s*:/g,'"$1":'),JSON.parse(n))}catch{return v()}}const r=W(()=>m?C(m):v(),[m]),s=P(Date.parse(a)),[I,N]=S(()=>{const t=s.current;return isNaN(t)?0:Math.max(0,t-Date.now())}),[f,g]=S(()=>{const t=s.current;return!isNaN(t)&&t<=Date.now()});M(()=>{s.current=Date.parse(a),N(isNaN(s.current)?0:Math.max(0,s.current-Date.now()));const t=s.current;g(!isNaN(t)&&t<=Date.now())},[a]),M(()=>{if(f||isNaN(s.current))return;let t=!1;const n=()=>{const F=Date.now(),y=Math.max(0,s.current-F);N(y),y<=0&&!t&&(t=!0,g(!0),x?.())};n();const E=window.setInterval(n,1e3);return()=>clearInterval(E)},[x,f]);const h=Math.floor(I/1e3),R=h%60,w=Math.floor(h/60),T=w%60,b=Math.floor(w/60),H=b%24,O=Math.floor(b/24),z=u||Intl.DateTimeFormat().resolvedOptions().timeZone;let D="\u2014";const p=s.current;if(!isNaN(p))try{const t=new Date(p);D=new Intl.DateTimeFormat(k||navigator.language,{timeZone:z,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(t)}catch{D=new Date(p).toISOString()}return f?null:o("div",{className:"countdown-box flex w-full items-center gap-1","aria-live":"polite",children:[o("div",{className:i(l,"time-days-box"),children:[e("p",{className:d,children:c(O,2)}),e("div",{className:"truncate",children:r?.day||"Day"})]}),e("div",{className:"text-info-white text-2xl font-bold",children:":"}),o("div",{className:i(l,"time-hours-box"),children:[e("p",{className:d,children:c(H,2)}),e("div",{className:"truncate",children:r?.hour||"Hours"})]}),e("div",{className:"text-info-white text-2xl font-bold",children:":"}),o("div",{className:i(l,"time-minutes-box"),children:[e("p",{className:d,children:c(T,2)}),e("div",{className:"truncate",children:r?.minute||"Mins"})]}),e("div",{className:"text-info-white text-2xl font-bold",children:":"}),o("div",{className:i(l,"time-seconds-box"),children:[e("p",{className:d,children:c(R,2)}),e("div",{className:"truncate",children:r?.second||"Secs"})]})]})};var L=Z;export{Z as CountdownByEndDate,L as default};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{cn as i}from"../../helpers/index.js";import{useEffect as M,useRef as P,useState as S,useMemo as W}from"react";const c=(a,u=2)=>String(Math.abs(a)).padStart(u,"0"),l="h-full flex-1 max-w-12 text-center bg-info-white text-xs text-info-primary overflow-hidden lg-desktop:p-1 p-0.5 font-semibold border-box",d="w-full lg-desktop:text-2xl lg-desktop:h-7 text-xl text-center h-6 lg-desktop:w-10 w-9 font-bold whitespace-nowrap",Z=({endDate:a,endDate_tz:u,locale:k,dateFormat:m,onExpire:x})=>{const v=()=>({day:"Day",hour:"Hours",minute:"Mins",second:"Secs"});function C(t){try{let n=t?.trim?.();return!n?.startsWith?.("{")||!n?.endsWith?.("}")?{}:(n=n?.replace?.(/(\w+)\s*:/g,'"$1":'),JSON.parse(n))}catch{return v()}}const r=W(()=>m?C(m):v(),[m]),s=P(Date.parse(a)),[I,N]=S(()=>{const t=s.current;return isNaN(t)?0:Math.max(0,t-Date.now())}),[f,h]=S(()=>{const t=s.current;return!isNaN(t)&&t<=Date.now()});M(()=>{s.current=Date.parse(a),N(isNaN(s.current)?0:Math.max(0,s.current-Date.now()));const t=s.current;h(!isNaN(t)&&t<=Date.now())},[a]),M(()=>{if(f||isNaN(s.current))return;let t=!1;const n=()=>{const F=Date.now(),y=Math.max(0,s.current-F);N(y),y<=0&&!t&&(t=!0,h(!0),x?.())};n();const E=window.setInterval(n,1e3);return()=>clearInterval(E)},[x,f]);const g=Math.floor(I/1e3),R=g%60,w=Math.floor(g/60),T=w%60,b=Math.floor(w/60),H=b%24,O=Math.floor(b/24),z=u||Intl.DateTimeFormat().resolvedOptions().timeZone;let D="\u2014";const p=s.current;if(!isNaN(p))try{const t=new Date(p);D=new Intl.DateTimeFormat(k||navigator.language,{timeZone:z,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(t)}catch{D=new Date(p).toISOString()}return f?null:o("div",{className:"countdown-box flex w-full items-center gap-1","aria-live":"polite",children:[o("div",{className:i(l,"time-days-box"),children:[e("p",{className:d,children:c(O,2)}),e("div",{className:"truncate",children:r?.day||"Day"})]}),e("div",{className:"text-info-white text-2xl font-bold",children:":"}),o("div",{className:i(l,"time-hours-box"),children:[e("p",{className:d,children:c(H,2)}),e("div",{className:"truncate",children:r?.hour||"Hours"})]}),e("div",{className:"text-info-white text-2xl font-bold",children:":"}),o("div",{className:i(l,"time-minutes-box"),children:[e("p",{className:d,children:c(T,2)}),e("div",{className:"truncate",children:r?.minute||"Mins"})]}),e("div",{className:"text-info-white text-2xl font-bold",children:":"}),o("div",{className:i(l,"time-seconds-box"),children:[e("p",{className:d,children:c(R,2)}),e("div",{className:"truncate",children:r?.second||"Secs"})]})]})};var L=Z;export{Z as CountdownByEndDate,L as default};
 //# sourceMappingURL=Countdown.js.map

package/dist/esm/biz-components/HeroBanner/Countdown.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/Countdown.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState, useMemo } from 'react'\n\ntype Props = {\n  endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n  endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n  locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n  dateFormat?: any\n  onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n  'h-full flex-1 max-w-12 text-center bg-info-white text-xs text-info-primary overflow-hidden lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass = 'w-full lg-desktop:text-2xl lg-desktop:h-7 text-xl text-center h-6 lg-desktop:w-10 w-9 font-bold'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, dateFormat, onExpire }) => {\n  const getDefaultDateLabels = () => ({\n    day: 'Day',\n    hour: 'Hours',\n    minute: 'Mins',\n    second: 'Secs',\n  })\n\n  function safeStringToObject(str: string) {\n    try {\n      let jsonStr = str?.trim?.()\n      if (!jsonStr?.startsWith?.('{') || !jsonStr?.endsWith?.('}')) {\n        return {}\n      }\n      jsonStr = jsonStr?.replace?.(/(\\w+)\\s*:/g, '\"$1\":')\n      return JSON.parse(jsonStr)\n    } catch (err) {\n      return getDefaultDateLabels()\n    }\n  }\n\n  const bannerDate = useMemo(() => {\n    if (!dateFormat) return getDefaultDateLabels()\n    return safeStringToObject(dateFormat)\n  }, [dateFormat])\n\n  // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n  const targetMsRef = useRef<number>(Date.parse(endDate))\n  const [remainingMs, setRemainingMs] = useState<number>(() => {\n    const t = targetMsRef.current\n    return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n  })\n  // \u4EC5\u5728\u521D\u59CB\u65F6\u5224\u65AD\u662F\u5426\u5DF2\u8FC7\u671F\uFF1A\u82E5\u5DF2\u8FC7\u671F\u5219\u9690\u85CF\u7EC4\u4EF6\u5E76\u4E0D\u7EE7\u7EED\u8BA1\u65F6\n  const [hidden, setHidden] = useState<boolean>(() => {\n    const t = targetMsRef.current\n    return !isNaN(t) && t <= Date.now()\n  })\n\n  // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n  useEffect(() => {\n    targetMsRef.current = Date.parse(endDate)\n    setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n    // \u5F53 endDate \u66F4\u65B0\u65F6\uFF0C\u4EC5\u8FDB\u884C\u4E00\u6B21\u662F\u5426\u8FC7\u671F\u7684\u5224\u65AD\uFF0C\u7528\u4E8E\u51B3\u5B9A\u662F\u5426\u9690\u85CF\n    const t = targetMsRef.current\n    setHidden(!isNaN(t) && t <= Date.now())\n  }, [endDate])\n\n  // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n  useEffect(() => {\n    if (hidden) return // \u521D\u59CB\u5DF2\u8FC7\u671F\u5219\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    let expiredCalled = false\n    const tick = () => {\n      const now = Date.now()\n      const rem = Math.max(0, targetMsRef.current - now)\n      setRemainingMs(rem)\n      if (rem <= 0 && !expiredCalled) {\n        expiredCalled = true\n        setHidden(true) // \u5230\u70B9\u540E\u9690\u85CF\u7EC4\u4EF6\n        onExpire?.()\n      }\n    }\n    tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n    const id = window.setInterval(tick, 1000)\n    return () => clearInterval(id)\n  }, [onExpire, hidden])\n\n  // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n  const totalSeconds = Math.floor(remainingMs / 1000)\n  const seconds = totalSeconds % 60\n  const totalMinutes = Math.floor(totalSeconds / 60)\n  const minutes = totalMinutes % 60\n  const totalHours = Math.floor(totalMinutes / 60)\n  const hours = totalHours % 24\n  const days = Math.floor(totalHours / 24)\n\n  // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n  const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n  let formattedTarget = '\u2014'\n  const tms = targetMsRef.current\n  if (!isNaN(tms)) {\n    try {\n      const dt = new Date(tms)\n      const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n        timeZone: displayTz,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      })\n      formattedTarget = fmt.format(dt)\n    } catch (e) {\n      // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n      formattedTarget = new Date(tms).toISOString()\n    }\n  }\n\n  if (hidden) return null\n\n  return (\n    <div className=\"countdown-box flex w-full items-center gap-1\" aria-live=\"polite\">\n      {/* \u5929 */}\n      <div className={cn(baseClass, 'time-days-box')}>\n        <p className={textClass}>{pad(days, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.day || 'Day'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u65F6 */}\n      <div className={cn(baseClass, 'time-hours-box')}>\n        <p className={textClass}>{pad(hours, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.hour || 'Hours'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u5206 */}\n      <div className={cn(baseClass, 'time-minutes-box')}>\n        <p className={textClass}>{pad(minutes, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.minute || 'Mins'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u79D2 */}\n      <div className={cn(baseClass, 'time-seconds-box')}>\n        <p className={textClass}>{pad(seconds, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.second || 'Secs'}</div>\n      </div>\n    </div>\n  )\n}\n\nexport default CountdownByEndDate\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/index.js'\nimport React, { useEffect, useRef, useState, useMemo } from 'react'\n\ntype Props = {\n  endDate: string // ISO UTC \u5B57\u7B26\u4E32\uFF0C\u4F8B\u5982 \"2025-11-02T07:42:00.000Z\"\n  endDate_tz?: string // \u65F6\u533A\uFF0C\u4F8B\u5982 \"Asia/Dhaka\"\uFF08\u53EF\u9009\uFF09\n  locale?: string // \u683C\u5F0F\u5316\u7528\u7684 locale\uFF0C\u9ED8\u8BA4 navigator.language\n  dateFormat?: any\n  onExpire?: () => void // \u5230\u671F\u56DE\u8C03\uFF08\u53EF\u9009\uFF09\n}\n\nconst pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0')\n\nconst baseClass =\n  'h-full flex-1 max-w-12 text-center bg-info-white text-xs text-info-primary overflow-hidden lg-desktop:p-1 p-0.5 font-semibold border-box'\n\nconst textClass =\n  'w-full lg-desktop:text-2xl lg-desktop:h-7 text-xl text-center h-6 lg-desktop:w-10 w-9 font-bold whitespace-nowrap'\n\nexport const CountdownByEndDate: React.FC<Props> = ({ endDate, endDate_tz, locale, dateFormat, onExpire }) => {\n  const getDefaultDateLabels = () => ({\n    day: 'Day',\n    hour: 'Hours',\n    minute: 'Mins',\n    second: 'Secs',\n  })\n\n  function safeStringToObject(str: string) {\n    try {\n      let jsonStr = str?.trim?.()\n      if (!jsonStr?.startsWith?.('{') || !jsonStr?.endsWith?.('}')) {\n        return {}\n      }\n      jsonStr = jsonStr?.replace?.(/(\\w+)\\s*:/g, '\"$1\":')\n      return JSON.parse(jsonStr)\n    } catch (err) {\n      return getDefaultDateLabels()\n    }\n  }\n\n  const bannerDate = useMemo(() => {\n    if (!dateFormat) return getDefaultDateLabels()\n    return safeStringToObject(dateFormat)\n  }, [dateFormat])\n\n  // \u89E3\u6790\u76EE\u6807\u65F6\u95F4\uFF08\u4F7F\u7528 provided ISO\uFF0C\u82E5\u975E\u6CD5\u5219\u4E3A NaN\uFF09\n  const targetMsRef = useRef<number>(Date.parse(endDate))\n  const [remainingMs, setRemainingMs] = useState<number>(() => {\n    const t = targetMsRef.current\n    return isNaN(t) ? 0 : Math.max(0, t - Date.now())\n  })\n  // \u4EC5\u5728\u521D\u59CB\u65F6\u5224\u65AD\u662F\u5426\u5DF2\u8FC7\u671F\uFF1A\u82E5\u5DF2\u8FC7\u671F\u5219\u9690\u85CF\u7EC4\u4EF6\u5E76\u4E0D\u7EE7\u7EED\u8BA1\u65F6\n  const [hidden, setHidden] = useState<boolean>(() => {\n    const t = targetMsRef.current\n    return !isNaN(t) && t <= Date.now()\n  })\n\n  // \u82E5 props.endDate \u6539\u53D8\uFF0C\u66F4\u65B0 ref \u4E0E remaining\n  useEffect(() => {\n    targetMsRef.current = Date.parse(endDate)\n    setRemainingMs(isNaN(targetMsRef.current) ? 0 : Math.max(0, targetMsRef.current - Date.now()))\n    // \u5F53 endDate \u66F4\u65B0\u65F6\uFF0C\u4EC5\u8FDB\u884C\u4E00\u6B21\u662F\u5426\u8FC7\u671F\u7684\u5224\u65AD\uFF0C\u7528\u4E8E\u51B3\u5B9A\u662F\u5426\u9690\u85CF\n    const t = targetMsRef.current\n    setHidden(!isNaN(t) && t <= Date.now())\n  }, [endDate])\n\n  // Tick \u6BCF\u79D2\u66F4\u65B0\u5269\u4F59\u65F6\u95F4\n  useEffect(() => {\n    if (hidden) return // \u521D\u59CB\u5DF2\u8FC7\u671F\u5219\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    if (isNaN(targetMsRef.current)) return // \u65E0\u6548\u65E5\u671F\u4E0D\u542F\u52A8\u8BA1\u65F6\u5668\n    let expiredCalled = false\n    const tick = () => {\n      const now = Date.now()\n      const rem = Math.max(0, targetMsRef.current - now)\n      setRemainingMs(rem)\n      if (rem <= 0 && !expiredCalled) {\n        expiredCalled = true\n        setHidden(true) // \u5230\u70B9\u540E\u9690\u85CF\u7EC4\u4EF6\n        onExpire?.()\n      }\n    }\n    tick() // \u7ACB\u5373\u540C\u6B65\u4E00\u6B21\n    const id = window.setInterval(tick, 1000)\n    return () => clearInterval(id)\n  }, [onExpire, hidden])\n\n  // \u8BA1\u7B97\u5929/\u65F6/\u5206/\u79D2\n  const totalSeconds = Math.floor(remainingMs / 1000)\n  const seconds = totalSeconds % 60\n  const totalMinutes = Math.floor(totalSeconds / 60)\n  const minutes = totalMinutes % 60\n  const totalHours = Math.floor(totalMinutes / 60)\n  const hours = totalHours % 24\n  const days = Math.floor(totalHours / 24)\n\n  // \u683C\u5F0F\u5316\u76EE\u6807\u65F6\u95F4\u5E76\u663E\u793A\u5176\u65F6\u533A\uFF08\u4F7F\u7528 endDate_tz \u6216\u8005\u6D4F\u89C8\u5668\u65F6\u533A\uFF09\n  const displayTz = endDate_tz || Intl.DateTimeFormat().resolvedOptions().timeZone\n  let formattedTarget = '\u2014'\n  const tms = targetMsRef.current\n  if (!isNaN(tms)) {\n    try {\n      const dt = new Date(tms)\n      const fmt = new Intl.DateTimeFormat(locale || navigator.language, {\n        timeZone: displayTz,\n        year: 'numeric',\n        month: '2-digit',\n        day: '2-digit',\n        hour: '2-digit',\n        minute: '2-digit',\n        second: '2-digit',\n      })\n      formattedTarget = fmt.format(dt)\n    } catch (e) {\n      // \u82E5\u4F20\u5165\u4E86\u975E\u6CD5\u65F6\u533A\uFF0CIntl \u53EF\u80FD\u629B\u9519\uFF1B\u56DE\u9000\u663E\u793A UTC \u65F6\u95F4\n      formattedTarget = new Date(tms).toISOString()\n    }\n  }\n\n  if (hidden) return null\n\n  return (\n    <div className=\"countdown-box flex w-full items-center gap-1\" aria-live=\"polite\">\n      {/* \u5929 */}\n      <div className={cn(baseClass, 'time-days-box')}>\n        <p className={textClass}>{pad(days, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.day || 'Day'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u65F6 */}\n      <div className={cn(baseClass, 'time-hours-box')}>\n        <p className={textClass}>{pad(hours, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.hour || 'Hours'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u5206 */}\n      <div className={cn(baseClass, 'time-minutes-box')}>\n        <p className={textClass}>{pad(minutes, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.minute || 'Mins'}</div>\n      </div>\n      <div className=\"text-info-white text-2xl font-bold\">:</div>\n      {/* \u79D2 */}\n      <div className={cn(baseClass, 'time-seconds-box')}>\n        <p className={textClass}>{pad(seconds, 2)}</p>\n        <div className=\"truncate\">{bannerDate?.second || 'Secs'}</div>\n      </div>\n    </div>\n  )\n}\n\nexport default CountdownByEndDate\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "cn", "useEffect", "useRef", "useState", "useMemo", "pad", "n", "len", "baseClass", "textClass", "CountdownByEndDate", "endDate", "endDate_tz", "locale", "dateFormat", "onExpire", "getDefaultDateLabels", "safeStringToObject", "str", "jsonStr", "bannerDate", "targetMsRef", "remainingMs", "setRemainingMs", "hidden", "setHidden", "expiredCalled", "tick", "now", "rem", "id", "totalSeconds", "seconds", "totalMinutes", "minutes", "totalHours", "hours", "days", "displayTz", "formattedTarget", "tms", "dt", "Countdown_default"]
 }

package/dist/esm/biz-components/HeroBanner/HeroBanner.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import type { HeroBannerProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+export type HeroBannerSemanticName = 'root' | 'title' | 'subtitle' | 'buttonGroup' | 'primaryButton' | 'secondaryButton' | 'captionGroup';
+declare const _default: React.ForwardRefExoticComponent<Omit<HeroBannerProps & {
+    classNames?: Partial<Record<HeroBannerSemanticName, string>>;
+} & React.RefAttributes<HTMLDivElement> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n  ({ data, className, onSecondaryClick, onPrimaryClick }, ref) => {\n    const {\n      label,\n      title,\n      subtitle,\n      endDate,\n      endDate_tz,\n      dateFormat,\n      pcImage,\n      padImage,\n      mobileImage,\n      pcVideo,\n      padVideo,\n      mobileVideo,\n      isShowVideo,\n      primaryButton,\n      secondaryButton,\n      theme = 'light',\n      size = 'default',\n      caption = [],\n      blockLink,\n      iconArray,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n    const [visible, setVisible] = useState<boolean>(false)\n    const { ref: inViewRef, inView } = useInView()\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n    const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    const bgRef = useRef<HTMLImageElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: subtitle,\n    })\n\n    useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      gsap.registerPlugin(ScrollTrigger)\n      function gsapResize() {\n        if (!bgRef.current) return\n        const clientHeight = boxRef.current?.clientHeight || 100\n        const screenHeight = window.innerHeight\n\n        if (screenHeight <= clientHeight) {\n          scrollTriggerRef.current = ScrollTrigger.create({\n            trigger: boxRef.current,\n            start: 'top bottom',\n            end: 'bottom top',\n            scrub: true,\n            onUpdate: (self: any) => {\n              const base = 40\n              const value = self.progress * base - base / 2\n              gsap.set(bgRef.current, { yPercent: value })\n            },\n          })\n        } else {\n          boxTriggerRef.current = ScrollTrigger.create({\n            trigger: boxRef.current,\n            start: 'top bottom',\n            end: 'bottom bottom',\n            scrub: true,\n            onUpdate: (self: any) => {\n              const base = 20\n              const value = self.progress * base - base\n              gsap.set(bgRef.current, { yPercent: value })\n            },\n          })\n          bgTriggerRef.current = ScrollTrigger.create({\n            trigger: boxRef.current,\n            start: 'top top',\n            end: 'bottom top',\n            scrub: true,\n            onUpdate: (self: any) => {\n              const base = 20\n              const value = self.progress * base\n              gsap.set(bgRef.current, { yPercent: value })\n            },\n          })\n        }\n      }\n      if (inView) gsapResize()\n      return () => {\n        // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        boxTriggerRef.current && boxTriggerRef.current.kill()\n        bgTriggerRef.current && bgTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n        <div\n          ref={boxRef}\n          className={cn(\n            theme === 'dark' ? 'aiui-dark' : '',\n            ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n            {\n              'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n              'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n            },\n            className\n          )}\n        >\n          {blockLink && (\n            <a\n              className=\"absolute inset-0 z-10\"\n              href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${title}#${subtitle}`}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              aria-label={title}\n            ></a>\n          )}\n          <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n            {isShowVideo ? (\n              <ScrollLoadVideo\n                poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n                src={\n                  isMobile\n                    ? (mobileVideo?.url as string)\n                    : isPad\n                      ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                      : (pcVideo?.url as string)\n                }\n                className=\"laptop:w-full h-full\"\n                videoClassName=\"h-full object-cover\"\n                muted\n                loop\n                playsInline\n              />\n            ) : (\n              <Picture\n                className=\"laptop:w-full h-full\"\n                imgClassName=\"h-full object-cover\"\n                loading=\"eager\"\n                fetchPriority=\"high\"\n                alt={pcImage?.alt || ''}\n                source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n              />\n            )}\n          </div>\n\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n            <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n              {label && (\n                <Heading\n                  as=\"h3\"\n                  className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                  html={label}\n                />\n              )}\n              {title && (\n                <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />\n              )}\n              {subtitle && (\n                <Heading\n                  as=\"h3\"\n                  className={cn(\n                    'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                  )}\n                  html={subtitle}\n                />\n              )}\n              {endDate && (\n                <div className=\"mt-3\">\n                  <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n                </div>\n              )}\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n                <Button\n                  onClick={() => setVisible(true)}\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  className=\"hero-banner-play-video-button\"\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n                >\n                  {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n                </Button>\n              ) : secondaryButton?.text ? (\n                <Button\n                  aria-label={title ?? subtitle}\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  className=\"hero-banner-secondary-button\"\n                  as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                  href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                  onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n                >\n                  {secondaryButton?.text}\n                  <span className=\"sr-only\">{title ?? subtitle}</span>\n                </Button>\n              ) : null}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  aria-label={title ?? subtitle}\n                  size=\"lg\"\n                  variant=\"primary\"\n                  className=\"hero-banner-primary-button\"\n                  as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                  href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                  onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n            <div className=\"hero-banner-icon-group flex items-center gap-2\">\n              {iconArray?.map((icon, index) => (\n                <div key={index} className=\"h-12\">\n                  <Picture\n                    className=\"laptop:w-full h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    loading=\"eager\"\n                    alt={icon?.pcImage?.alt || ''}\n                    source={icon?.pcImage?.url}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n          {caption.length > 0 && (\n            <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n              {caption.map((c, index) => (\n                <React.Fragment key={index}>\n                  <Text\n                    size={2}\n                    className={cn(\n                      'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                    )}\n                    html={c.title}\n                  />\n                  {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n\n          {/* \u89C6\u9891\u5F39\u7A97 */}\n          {visible && (\n            <VideoModal\n              visible={visible}\n              videoUrl={secondaryButton?.videoUrl?.url}\n              youTubeId={secondaryButton?.youtubeId}\n              onCloseModal={() => setVisible(false)}\n            />\n          )}\n        </div>\n      </div>\n    )\n  }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "index", "c", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className,\n          classNames?.root\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n            {label && (\n              <Heading\n                as=\"h3\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as=\"h2\"\n                size={size === 'sm' ? 4 : 5}\n                className={cn('hero-banner-title', classNames.title)}\n                html={title}\n              />\n            )}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm',\n                  classNames.subtitle\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2',\n              classNames.buttonGroup\n            )}\n          >\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className={cn('hero-banner-primary-button', classNames.primaryButton)}\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map((icon, index) => (\n              <div key={index} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "aAiCM,cAAAA,EAuKI,QAAAC,MAvKJ,oBAhCN,OAAOC,GAAS,uBAAAC,GAAqB,UAAAC,EAAQ,YAAAC,GAAU,aAAAC,OAAiB,QACxE,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,0BAE9B,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,aAAAC,OAAiB,8BAC1B,OAAOC,OAAqB,mCAC5B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,OAAY,4BAC/C,OAAOC,OAAe,iBACtB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,OAAe,6BACxB,OAAS,cAAAC,OAAkB,yBAE3B,MAAMC,EAAgB,QAChBC,EAAgB,cAWhBC,GAAuB,CAAC,CAAE,KAAAC,EAAO,MAAO,IAAsC,CAClF,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIP,GAAQK,CAAI,EACtC,OACE1B,EAAC,OAAI,MAAO2B,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,eAAe,MAAM,6BAC/E,SAAA5B,EAAC,QACC,EAAE,0LACF,KAAK,eACP,EACF,CAEJ,EAEM6B,EAAa3B,EAAM,WAKvB,CAAC,CAAE,KAAA4B,EAAM,UAAAC,EAAW,WAAAC,EAAa,CAAC,EAAG,iBAAAC,EAAkB,eAAAC,CAAe,EAAGC,IAAQ,CACjF,KAAM,CACJ,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,WAAAC,EACA,WAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,GAAQ,QACR,KAAAzB,EAAO,UACP,QAAA0B,EAAU,CAAC,EACX,UAAAC,EACA,UAAAC,EACF,EAAIxB,EAEEyB,EAAW9C,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD+C,EAAQ/C,EAAc,CAAE,MAAO,qBAAsB,CAAC,EACtD,CAACgD,EAASC,CAAU,EAAIrD,GAAkB,EAAK,EAC/C,CAAE,IAAKsD,GAAW,OAAAC,CAAO,EAAIlD,GAAU,EACvCmD,EAAmBzD,EAA6B,IAAI,EACpD0D,EAAe1D,EAA6B,IAAI,EAChD2D,EAAgB3D,EAA6B,IAAI,EAEjD4D,EAAQ5D,EAAyB,IAAI,EACrC6D,EAAS7D,EAAuB,IAAI,EAE1C,OAAAe,GAAY8C,EAAQ,CAClB,cAAA1C,EACA,cAAAC,EACA,eAAgBa,EAChB,qBAAsBC,CACxB,CAAC,EAEDnC,GAAoBgC,EAAK,IAAM8B,EAAO,OAAyB,EAE/D3D,GAAU,IAAM,CACdC,EAAK,eAAeC,CAAa,EACjC,SAAS0D,GAAa,CACpB,GAAI,CAACF,EAAM,QAAS,OACpB,MAAMG,EAAeF,EAAO,SAAS,cAAgB,IAChC,OAAO,aAERE,EAClBN,EAAiB,QAAUrD,EAAc,OAAO,CAC9C,QAASyD,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC7D,EAAK,IAAIyD,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAEDN,EAAc,QAAUvD,EAAc,OAAO,CAC3C,QAASyD,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC7D,EAAK,IAAIyD,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,EACDP,EAAa,QAAUtD,EAAc,OAAO,CAC1C,QAASyD,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B7D,EAAK,IAAIyD,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,EAEL,CACA,OAAIT,GAAQM,EAAW,EAChB,IAAM,CAEXL,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DE,EAAc,SAAWA,EAAc,QAAQ,KAAK,EACpDD,EAAa,SAAWA,EAAa,QAAQ,KAAK,CACpD,CACF,EAAG,CAACF,CAAM,CAAC,EAGT5D,EAAC,OAAI,IAAK2D,GAAW,uBAAqB,aACxC,SAAA1D,EAAC,OACC,IAAKgE,EACL,UAAWhD,EACTkC,KAAU,OAAS,YAAc,GACjC,8FACA,CACE,kFAAmFzB,IAAS,UAC5F,kFAAmFA,IAAS,IAC9F,EACAK,EACAC,GAAY,IACd,EAEC,UAAAqB,GACCrD,EAAC,KACC,UAAU,wBACV,KAAMoB,EAAYiC,EAAW,GAAG9B,CAAa,IAAIC,CAAa,EAAE,EAChE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGa,CAAK,IAAIC,CAAQ,GACrD,SAAU,GACV,cAAY,OACZ,aAAYD,EACb,EAEHrC,EAAC,OAAI,IAAKgE,EAAO,UAAW/C,EAAG,iCAAiC,EAC7D,SAAA+B,EACChD,EAACW,GAAA,CACC,OAAQ4C,EAAWX,GAAa,IAAMY,EAAQb,GAAU,KAAOC,GAAa,IAAMF,GAAS,IAC3F,IACEa,EACKR,GAAa,IACdS,EACGV,GAAU,KAAmBC,GAAa,IAC1CF,GAAS,IAElB,UAAU,uBACV,eAAe,sBACf,MAAK,GACL,KAAI,GACJ,YAAW,GACb,EAEA7C,EAACc,EAAA,CACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,cAAc,OACd,IAAK4B,GAAS,KAAO,GACrB,OAAQ,GAAGA,GAAS,KAAO,EAAE,MAAMC,GAAU,MAAQC,GAAa,KAAO,GAAG,UAAUA,GAAa,KAAO,EAAE,OAC9G,EAEJ,EAGA3C,EAAC,OAAI,UAAU,6MACb,UAAAA,EAAC,OAAI,UAAU,gJACZ,UAAAmC,GACCpC,EAACa,EAAA,CACC,GAAG,KACH,UAAWI,EAAG,iFAAiF,EAC/F,KAAMmB,EACR,EAEDC,GACCrC,EAACa,EAAA,CACC,GAAG,KACH,KAAMa,IAAS,KAAO,EAAI,EAC1B,UAAWT,EAAG,oBAAqBe,EAAW,KAAK,EACnD,KAAMK,EACR,EAEDC,GACCtC,EAACa,EAAA,CACC,GAAG,KACH,UAAWI,EACT,sHACAe,EAAW,QACb,EACA,KAAMM,EACR,EAEDC,GACCvC,EAAC,OAAI,UAAU,OACb,SAAAA,EAACgB,GAAA,CAAU,QAASuB,EAAS,WAAYC,EAAY,WAAYC,EAAY,EAC/E,GAEJ,EAEAxC,EAAC,OACC,UAAWgB,EACT,yFACAe,EAAW,WACb,EAEC,UAAAkB,GAAiB,uBAAyBA,GAAiB,oBAC1DjD,EAACW,EAAA,CACC,QAAS,IAAM8C,EAAW,EAAI,EAC9B,KAAK,KACL,QAAQ,YACR,UAAU,gCACV,0BAAyB,GAAGnC,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGa,CAAK,IAAIC,CAAQ,IAAIY,GAAiB,mBAAmB,GAE5F,UAAAA,GAAiB,oBAAoB,IAAClD,EAACyB,GAAA,CAAqB,KAAK,KAAK,GACzE,EACEyB,GAAiB,KACnBjD,EAACW,EAAA,CACC,aAAYyB,GAASC,EACrB,KAAK,KACL,QAAQ,YACR,UAAWrB,EAAG,+BAAgCe,EAAW,eAAe,EACxE,GAAIkB,GAAiB,wBAA0B,SAAW,IAC1D,KAAM9B,EAAY8B,GAAiB,KAAM,GAAG3B,CAAa,IAAIC,CAAa,EAAE,EAC5E,QAAS8C,GAAKpB,GAAiB,yBAA2BjB,IAAmBH,EAAMwC,CAAC,EACpF,0BAAyB,GAAG/C,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGa,CAAK,IAAIC,CAAQ,IAAIY,GAAiB,IAAI,GAE7E,UAAAA,GAAiB,KAClBlD,EAAC,QAAK,UAAU,UAAW,SAAAqC,GAASC,EAAS,GAC/C,EACE,KACHW,GAAiBA,EAAc,MAC9BjD,EAACY,EAAA,CACC,aAAYyB,GAASC,EACrB,KAAK,KACL,QAAQ,UACR,UAAWrB,EAAG,6BAA8Be,EAAW,aAAa,EACpE,GAAIiB,GAAe,sBAAwB,SAAW,IACtD,KAAM7B,EAAY6B,EAAc,KAAM,GAAG1B,CAAa,IAAIC,CAAa,EAAE,EACzE,QAAS8C,GAAKrB,GAAe,uBAAyBf,IAAiBJ,EAAMwC,CAAC,EAC9E,0BAAyB,GAAG/C,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGa,CAAK,IAAIC,CAAQ,IAAIW,GAAe,IAAI,GAE3E,SAAAA,EAAc,KACjB,GAEJ,EACAjD,EAAC,OAAI,UAAU,iDACZ,SAAAsD,IAAW,IAAI,CAACiB,EAAMC,IACrBxE,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAACc,EAAA,CACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,IAAKyD,GAAM,SAAS,KAAO,GAC3B,OAAQA,GAAM,SAAS,IACzB,GAPQC,CAQV,CACD,EACH,GACF,EAGCpB,EAAQ,OAAS,GAChBpD,EAAC,OACC,UAAWiB,EACT,iMACAe,EAAW,YACb,EAEC,SAAAoB,EAAQ,IAAI,CAACqB,EAAGD,IACfvE,EAACC,EAAM,SAAN,CACC,UAAAF,EAACe,GAAA,CACC,KAAM,EACN,UAAWE,EACT,yIACF,EACA,KAAMwD,EAAE,MACV,EACCD,EAAQpB,EAAQ,OAAS,GAAKpD,EAAC,OAAI,UAAWiB,EAAG,sBAAsB,EAAG,IARxDuD,CASrB,CACD,EACH,EAIDf,GACCzD,EAACsB,GAAA,CACC,QAASmC,EACT,SAAUP,GAAiB,UAAU,IACrC,UAAWA,GAAiB,UAC5B,aAAc,IAAMQ,EAAW,EAAK,EACtC,GAEJ,EACF,CAEJ,CAAC,EAED7B,EAAW,YAAc,aAEzB,IAAO6C,GAAQxD,GAAWW,CAAU",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "index", "c", "HeroBanner_default"]
 }

package/dist/esm/biz-components/IPRedirect/RegionBanner.d.ts

@@ -0,0 +1,37 @@
+import type { RegionConfig, IPRedirectBannerCopy } from './type.js';
+/** 横幅样式配置 */
+export type RegionBannerStyles = {
+    /** 背景色，默认 #fff */
+    backgroundColor?: string;
+    /** 按钮圆角，默认 9999px */
+    buttonBorderRadius?: string;
+    /** 文案字号，默认 14px */
+    fontSize?: string;
+    /** Stay Here 按钮背景色，默认 #000 */
+    stayButtonBgColor?: string;
+    /** Stay Here 按钮文字颜色，默认 #fff */
+    stayButtonTextColor?: string;
+    /** Switch Site 按钮边框颜色，默认 #000 */
+    switchButtonBorderColor?: string;
+    /** Switch Site 按钮文字颜色，默认 #000 */
+    switchButtonTextColor?: string;
+};
+export type RegionBannerProps = {
+    /** 控制横幅显示/隐藏 */
+    visible: boolean;
+    /** 横幅状态变化回调 */
+    onVisibleChange: (visible: boolean) => void;
+    /** 文案配置 */
+    copy: IPRedirectBannerCopy;
+    /** 点击 Stay Here 按钮的回调 */
+    onStayHere: () => void;
+    /** 点击 Switch Site 按钮的回调 */
+    onSwitchSite: () => void;
+    /** 样式配置 */
+    styles?: RegionBannerStyles;
+    /** 当前站点地区配置（用于显示国旗图标） */
+    currentRegion?: RegionConfig;
+    /** 自定义类名 */
+    className?: string;
+};
+export declare function RegionBanner({ visible, onVisibleChange, copy, onStayHere, onSwitchSite, styles: customStyles, currentRegion, className, }: RegionBannerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/biz-components/IPRedirect/RegionBanner.js

@@ -0,0 +1,60 @@
+"use client";import{Fragment as u,jsx as t,jsxs as o}from"react/jsx-runtime";const x={backgroundColor:"#fff",buttonBorderRadius:"9999px",fontSize:"14px",stayButtonBgColor:"#000",stayButtonTextColor:"#fff",switchButtonBorderColor:"#000",switchButtonTextColor:"#000"};function C({visible:s,onVisibleChange:r,copy:n,onStayHere:i,onSwitchSite:l,styles:d,currentRegion:a,className:g}){const e={...x,...d};if(!s)return null;const p=()=>{i(),r(!1)},c=()=>{i(),r(!1)};return o(u,{children:[t("style",{children:`
+        .region-banner-wrapper {
+          height: auto;
+          min-height: 74px;
+        }
+        @media (min-width: 1024px) {
+          .region-banner-wrapper {
+            height: 54px;
+          }
+        }
+        .region-banner-content {
+          padding: 0 12px;
+          flex-direction: column;
+          gap: 8px;
+          align-items: flex-start;
+        }
+        .region-banner-title-row {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          gap: 8px;
+          height: 20px;
+          margin-top: 8px;
+        }
+        .region-banner-content h1 {
+          flex: 1;
+          min-width: 0;
+        }
+        .region-banner-close-btn {
+          position: static;
+          flex-shrink: 0;
+        }
+        @media (min-width: 1024px) {
+          .region-banner-content {
+            padding: 0 64px;
+            flex-direction: row;
+            align-items: center;
+          }
+          .region-banner-title-row {
+            flex: 1;
+          }
+          .region-banner-close-btn {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+        @media (min-width: 1920px) {
+          .region-banner-content {
+            padding: 0 128px;
+          }
+        }
+        @media (min-width: 1025px) and (max-width: 1440px) {
+          .region-banner-title {
+            max-width: 623px;
+          }
+        }
+      `}),t("div",{className:`region-banner-wrapper relative left-0 top-0 w-full ${g||""}`,style:{backgroundColor:e.backgroundColor,boxShadow:"0 2px 8px rgba(0,0,0,0.1)",zIndex:1e3},children:o("div",{className:"region-banner-content flex h-full justify-between text-black",children:[o("div",{className:"region-banner-title-row",children:[t("h1",{className:"region-banner-title truncate font-bold",style:{fontSize:e.fontSize,color:"#1F2021"},children:n.message}),t("button",{onClick:c,className:"region-banner-close-btn inline-flex size-[28px] items-center justify-center rounded-full hover:bg-[#f5f5f5] focus:outline-none",style:{color:"#767880"},"aria-label":"Close",children:t("svg",{width:"20",height:"20",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),o("div",{className:"ml-4 flex gap-3",children:[o("button",{onClick:p,className:"box-border flex h-[38px] items-center gap-1 whitespace-nowrap px-4 py-2 hover:opacity-80",style:{backgroundColor:e.stayButtonBgColor,color:e.stayButtonTextColor,fontWeight:"700",fontSize:e.fontSize,borderRadius:e.buttonBorderRadius,border:"none"},children:[a?.icon&&t("img",{src:a.icon,alt:"",style:{width:"16px",height:"16px",borderRadius:"100%"}}),n.stayButtonText]}),o("button",{onClick:l,className:"box-border flex h-[38px] items-center gap-1 whitespace-nowrap px-4 py-2 hover:opacity-80",style:{backgroundColor:"transparent",color:e.switchButtonTextColor,border:`1.6px solid ${e.switchButtonBorderColor}`,fontWeight:"700",fontSize:e.fontSize,borderRadius:e.buttonBorderRadius},children:[t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M8.29883 1.2041C12.216 1.20425 15.3923 4.37181 15.3926 8.28027C15.3926 12.189 12.2162 15.3563 8.29883 15.3564C4.38145 15.3563 1.2041 12.189 1.2041 8.28027C1.20439 4.37183 4.38163 1.20428 8.29883 1.2041ZM3.58105 11.4795C4.31053 12.5471 5.39411 13.3542 6.66406 13.7324C6.21155 13.0301 5.86128 12.2699 5.60938 11.4795H3.58105ZM11.0166 11.4795C10.7696 12.2779 10.4256 13.0347 9.98438 13.7178C11.2325 13.3333 12.2971 12.5331 13.0166 11.4795H11.0166ZM7.0791 11.4795C7.3755 12.2654 7.78717 12.9997 8.31445 13.6455C8.83791 13.0305 9.25428 12.2929 9.55273 11.4795H7.0791ZM2.85645 6.56738C2.6854 7.10801 2.59283 7.68338 2.59277 8.28027C2.59277 8.91383 2.69891 9.52251 2.89063 10.0918H5.27148C5.15636 9.42693 5.10277 8.75388 5.11133 8.08789C5.11789 7.57837 5.1619 7.06931 5.23926 6.56738L2.85645 6.56738ZM11.3447 6.56738C11.4483 7.20036 11.4944 7.84036 11.4863 8.47363C11.4793 9.01629 11.4291 9.55828 11.3418 10.0918H13.707C13.8986 9.52259 14.0039 8.91374 14.0039 8.28027C14.0039 7.68337 13.9112 7.10802 13.7402 6.56738H11.3447ZM6.64648 6.56738C6.55761 7.06802 6.50673 7.58339 6.5 8.10547C6.49143 8.7725 6.55341 9.44067 6.68359 10.0918L9.93457 10.0918C10.0348 9.56074 10.0905 9.01207 10.0977 8.45605C10.1058 7.82231 10.0497 7.18763 9.93262 6.56738L6.64648 6.56738ZM6.6123 2.84277C5.32602 3.23909 4.23535 4.07819 3.51563 5.17969L5.5498 5.17969C5.79857 4.34514 6.15294 3.55384 6.6123 2.84277ZM9.93262 2.8291C10.4039 3.56047 10.7656 4.35407 11.0195 5.17969H13.0811C12.3519 4.06343 11.2413 3.21866 9.93262 2.8291ZM8.28223 2.91504C7.73775 3.55467 7.30932 4.32752 7.00879 5.17969L9.55566 5.17969C9.25672 4.35642 8.83179 3.58782 8.28223 2.91504Z",fill:"currentColor"})}),n.switchButtonText]})]})]})})]})}export{C as RegionBanner};
+//# sourceMappingURL=RegionBanner.js.map

package/dist/esm/biz-components/IPRedirect/RegionBanner.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/IPRedirect/RegionBanner.tsx"],
+  "sourcesContent": ["'use client'\n\nimport type { RegionConfig, IPRedirectBannerCopy } from './type.js'\n\n/** \u6A2A\u5E45\u6837\u5F0F\u914D\u7F6E */\nexport type RegionBannerStyles = {\n  /** \u80CC\u666F\u8272\uFF0C\u9ED8\u8BA4 #fff */\n  backgroundColor?: string\n  /** \u6309\u94AE\u5706\u89D2\uFF0C\u9ED8\u8BA4 9999px */\n  buttonBorderRadius?: string\n  /** \u6587\u6848\u5B57\u53F7\uFF0C\u9ED8\u8BA4 14px */\n  fontSize?: string\n  /** Stay Here \u6309\u94AE\u80CC\u666F\u8272\uFF0C\u9ED8\u8BA4 #000 */\n  stayButtonBgColor?: string\n  /** Stay Here \u6309\u94AE\u6587\u5B57\u989C\u8272\uFF0C\u9ED8\u8BA4 #fff */\n  stayButtonTextColor?: string\n  /** Switch Site \u6309\u94AE\u8FB9\u6846\u989C\u8272\uFF0C\u9ED8\u8BA4 #000 */\n  switchButtonBorderColor?: string\n  /** Switch Site \u6309\u94AE\u6587\u5B57\u989C\u8272\uFF0C\u9ED8\u8BA4 #000 */\n  switchButtonTextColor?: string\n}\n\nexport type RegionBannerProps = {\n  /** \u63A7\u5236\u6A2A\u5E45\u663E\u793A/\u9690\u85CF */\n  visible: boolean\n  /** \u6A2A\u5E45\u72B6\u6001\u53D8\u5316\u56DE\u8C03 */\n  onVisibleChange: (visible: boolean) => void\n  /** \u6587\u6848\u914D\u7F6E */\n  copy: IPRedirectBannerCopy\n  /** \u70B9\u51FB Stay Here \u6309\u94AE\u7684\u56DE\u8C03 */\n  onStayHere: () => void\n  /** \u70B9\u51FB Switch Site \u6309\u94AE\u7684\u56DE\u8C03 */\n  onSwitchSite: () => void\n  /** \u6837\u5F0F\u914D\u7F6E */\n  styles?: RegionBannerStyles\n  /** \u5F53\u524D\u7AD9\u70B9\u5730\u533A\u914D\u7F6E\uFF08\u7528\u4E8E\u663E\u793A\u56FD\u65D7\u56FE\u6807\uFF09 */\n  currentRegion?: RegionConfig\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\n// \u9ED8\u8BA4\u6837\u5F0F\nconst defaultStyles: Required<RegionBannerStyles> = {\n  backgroundColor: '#fff',\n  buttonBorderRadius: '9999px',\n  fontSize: '14px',\n  stayButtonBgColor: '#000',\n  stayButtonTextColor: '#fff',\n  switchButtonBorderColor: '#000',\n  switchButtonTextColor: '#000',\n}\n\nexport function RegionBanner({\n  visible,\n  onVisibleChange,\n  copy,\n  onStayHere,\n  onSwitchSite,\n  styles: customStyles,\n  currentRegion,\n  className,\n}: RegionBannerProps) {\n  // \u5408\u5E76\u6837\u5F0F\n  const styles = { ...defaultStyles, ...customStyles }\n\n  if (!visible) return null\n\n  const handleStayHere = () => {\n    onStayHere()\n    onVisibleChange(false)\n  }\n\n  const handleClose = () => {\n    // \u5173\u95ED\u6309\u94AE\u548C Stay Here \u6309\u94AE\u884C\u4E3A\u4E00\u81F4\n    onStayHere()\n    onVisibleChange(false)\n  }\n\n  return (\n    <>\n      <style>{`\n        .region-banner-wrapper {\n          height: auto;\n          min-height: 74px;\n        }\n        @media (min-width: 1024px) {\n          .region-banner-wrapper {\n            height: 54px;\n          }\n        }\n        .region-banner-content {\n          padding: 0 12px;\n          flex-direction: column;\n          gap: 8px;\n          align-items: flex-start;\n        }\n        .region-banner-title-row {\n          display: flex;\n          align-items: center;\n          width: 100%;\n          gap: 8px;\n          height: 20px;\n          margin-top: 8px;\n        }\n        .region-banner-content h1 {\n          flex: 1;\n          min-width: 0;\n        }\n        .region-banner-close-btn {\n          position: static;\n          flex-shrink: 0;\n        }\n        @media (min-width: 1024px) {\n          .region-banner-content {\n            padding: 0 64px;\n            flex-direction: row;\n            align-items: center;\n          }\n          .region-banner-title-row {\n            flex: 1;\n          }\n          .region-banner-close-btn {\n            position: absolute;\n            right: 16px;\n            top: 50%;\n            transform: translateY(-50%);\n          }\n        }\n        @media (min-width: 1920px) {\n          .region-banner-content {\n            padding: 0 128px;\n          }\n        }\n        @media (min-width: 1025px) and (max-width: 1440px) {\n          .region-banner-title {\n            max-width: 623px;\n          }\n        }\n      `}</style>\n\n      <div\n        className={`region-banner-wrapper relative left-0 top-0 w-full ${className || ''}`}\n        style={{ backgroundColor: styles.backgroundColor, boxShadow: '0 2px 8px rgba(0,0,0,0.1)', zIndex: 1000 }}\n      >\n        <div className=\"region-banner-content flex h-full justify-between text-black\">\n          <div className=\"region-banner-title-row\">\n            <h1\n              className=\"region-banner-title truncate font-bold\"\n              style={{ fontSize: styles.fontSize, color: '#1F2021' }}\n            >\n              {copy.message}\n            </h1>\n\n            {/* \u5173\u95ED\u6309\u94AE */}\n            <button\n              onClick={handleClose}\n              className=\"region-banner-close-btn inline-flex size-[28px] items-center justify-center rounded-full hover:bg-[#f5f5f5] focus:outline-none\"\n              style={{ color: '#767880' }}\n              aria-label=\"Close\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.5\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            </button>\n          </div>\n\n          <div className=\"ml-4 flex gap-3\">\n            {/* Stay Here \u6309\u94AE */}\n            <button\n              onClick={handleStayHere}\n              className=\"box-border flex h-[38px] items-center gap-1 whitespace-nowrap px-4 py-2 hover:opacity-80\"\n              style={{\n                backgroundColor: styles.stayButtonBgColor,\n                color: styles.stayButtonTextColor,\n                fontWeight: '700',\n                fontSize: styles.fontSize,\n                borderRadius: styles.buttonBorderRadius,\n                border: 'none',\n              }}\n            >\n              {currentRegion?.icon && (\n                <img src={currentRegion.icon} alt=\"\" style={{ width: '16px', height: '16px', borderRadius: '100%' }} />\n              )}\n              {copy.stayButtonText}\n            </button>\n\n            {/* Switch Site \u6309\u94AE */}\n            <button\n              onClick={onSwitchSite}\n              className=\"box-border flex h-[38px] items-center gap-1 whitespace-nowrap px-4 py-2 hover:opacity-80\"\n              style={{\n                backgroundColor: 'transparent',\n                color: styles.switchButtonTextColor,\n                border: `1.6px solid ${styles.switchButtonBorderColor}`,\n                fontWeight: '700',\n                fontSize: styles.fontSize,\n                borderRadius: styles.buttonBorderRadius,\n              }}\n            >\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M8.29883 1.2041C12.216 1.20425 15.3923 4.37181 15.3926 8.28027C15.3926 12.189 12.2162 15.3563 8.29883 15.3564C4.38145 15.3563 1.2041 12.189 1.2041 8.28027C1.20439 4.37183 4.38163 1.20428 8.29883 1.2041ZM3.58105 11.4795C4.31053 12.5471 5.39411 13.3542 6.66406 13.7324C6.21155 13.0301 5.86128 12.2699 5.60938 11.4795H3.58105ZM11.0166 11.4795C10.7696 12.2779 10.4256 13.0347 9.98438 13.7178C11.2325 13.3333 12.2971 12.5331 13.0166 11.4795H11.0166ZM7.0791 11.4795C7.3755 12.2654 7.78717 12.9997 8.31445 13.6455C8.83791 13.0305 9.25428 12.2929 9.55273 11.4795H7.0791ZM2.85645 6.56738C2.6854 7.10801 2.59283 7.68338 2.59277 8.28027C2.59277 8.91383 2.69891 9.52251 2.89063 10.0918H5.27148C5.15636 9.42693 5.10277 8.75388 5.11133 8.08789C5.11789 7.57837 5.1619 7.06931 5.23926 6.56738L2.85645 6.56738ZM11.3447 6.56738C11.4483 7.20036 11.4944 7.84036 11.4863 8.47363C11.4793 9.01629 11.4291 9.55828 11.3418 10.0918H13.707C13.8986 9.52259 14.0039 8.91374 14.0039 8.28027C14.0039 7.68337 13.9112 7.10802 13.7402 6.56738H11.3447ZM6.64648 6.56738C6.55761 7.06802 6.50673 7.58339 6.5 8.10547C6.49143 8.7725 6.55341 9.44067 6.68359 10.0918L9.93457 10.0918C10.0348 9.56074 10.0905 9.01207 10.0977 8.45605C10.1058 7.82231 10.0497 7.18763 9.93262 6.56738L6.64648 6.56738ZM6.6123 2.84277C5.32602 3.23909 4.23535 4.07819 3.51563 5.17969L5.5498 5.17969C5.79857 4.34514 6.15294 3.55384 6.6123 2.84277ZM9.93262 2.8291C10.4039 3.56047 10.7656 4.35407 11.0195 5.17969H13.0811C12.3519 4.06343 11.2413 3.21866 9.93262 2.8291ZM8.28223 2.91504C7.73775 3.55467 7.30932 4.32752 7.00879 5.17969L9.55566 5.17969C9.25672 4.35642 8.83179 3.58782 8.28223 2.91504Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              {copy.switchButtonText}\n            </button>\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],
+  "mappings": "aA+EI,mBAAAA,EACE,OAAAC,EAiEI,QAAAC,MAlEN,oBArCJ,MAAMC,EAA8C,CAClD,gBAAiB,OACjB,mBAAoB,SACpB,SAAU,OACV,kBAAmB,OACnB,oBAAqB,OACrB,wBAAyB,OACzB,sBAAuB,MACzB,EAEO,SAASC,EAAa,CAC3B,QAAAC,EACA,gBAAAC,EACA,KAAAC,EACA,WAAAC,EACA,aAAAC,EACA,OAAQC,EACR,cAAAC,EACA,UAAAC,CACF,EAAsB,CAEpB,MAAMC,EAAS,CAAE,GAAGV,EAAe,GAAGO,CAAa,EAEnD,GAAI,CAACL,EAAS,OAAO,KAErB,MAAMS,EAAiB,IAAM,CAC3BN,EAAW,EACXF,EAAgB,EAAK,CACvB,EAEMS,EAAc,IAAM,CAExBP,EAAW,EACXF,EAAgB,EAAK,CACvB,EAEA,OACEJ,EAAAF,EAAA,CACE,UAAAC,EAAC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA0DN,EAEFA,EAAC,OACC,UAAW,sDAAsDW,GAAa,EAAE,GAChF,MAAO,CAAE,gBAAiBC,EAAO,gBAAiB,UAAW,4BAA6B,OAAQ,GAAK,EAEvG,SAAAX,EAAC,OAAI,UAAU,+DACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MACC,UAAU,yCACV,MAAO,CAAE,SAAUY,EAAO,SAAU,MAAO,SAAU,EAEpD,SAAAN,EAAK,QACR,EAGAN,EAAC,UACC,QAASc,EACT,UAAU,iIACV,MAAO,CAAE,MAAO,SAAU,EAC1B,aAAW,QAEX,SAAAd,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,uCACF,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACjB,EACF,EACF,GACF,EAEAC,EAAC,OAAI,UAAU,kBAEb,UAAAA,EAAC,UACC,QAASY,EACT,UAAU,2FACV,MAAO,CACL,gBAAiBD,EAAO,kBACxB,MAAOA,EAAO,oBACd,WAAY,MACZ,SAAUA,EAAO,SACjB,aAAcA,EAAO,mBACrB,OAAQ,MACV,EAEC,UAAAF,GAAe,MACdV,EAAC,OAAI,IAAKU,EAAc,KAAM,IAAI,GAAG,MAAO,CAAE,MAAO,OAAQ,OAAQ,OAAQ,aAAc,MAAO,EAAG,EAEtGJ,EAAK,gBACR,EAGAL,EAAC,UACC,QAASO,EACT,UAAU,2FACV,MAAO,CACL,gBAAiB,cACjB,MAAOI,EAAO,sBACd,OAAQ,eAAeA,EAAO,uBAAuB,GACrD,WAAY,MACZ,SAAUA,EAAO,SACjB,aAAcA,EAAO,kBACvB,EAEA,UAAAZ,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,8lDACF,KAAK,eACP,EACF,EACCM,EAAK,kBACR,GACF,GACF,EACF,GACF,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "defaultStyles", "RegionBanner", "visible", "onVisibleChange", "copy", "onStayHere", "onSwitchSite", "customStyles", "currentRegion", "className", "styles", "handleStayHere", "handleClose"]
+}