@anker-in/headless-ui 1.1.14 → 1.1.15

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js

@@ -1,10 +1,10 @@
-import{Fragment as A,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as R}from"../AiuiProvider/index.js";import{formatVariantPrice as M}from"./shelfDisplay.js";import U from"../../components/picture.js";import F from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as V}from"../../components/text.js";import $ from"../../components/button.js";import{gaTrack as q}from"../../shared/track.js";import{trackUrlRef as G}from"../../shared/trackUrlRef.js";import{Heading as J}from"../../components/heading.js";import{useExposure as K}from"../../hooks/useExposure.js";import{useRef as Q,useEffect as X,useState as W}from"react";const P="image",j="product_shelf",Y=999999999e-2,Z=e=>{const t=e?.sku,u=e?.variants,x=u?.find(T=>T?.sku===t),w=x?.image?.url||u?.[0]?.image?.url||"",k=x?.image?.altText||u?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:w,altText:k}},de=({data:e,configuration:t})=>{const{isDisplayBackImage:u=!1,itemShape:x,metafields:w,isTopTag:k=!1,isShowTag:T,isShowOriginalPrice:f}=t||{},{locale:g="us",copyWriting:N}=R(),{discounts:O,discountsCopy:_}=w||{},B=Q(null),[D,o]=W([]),[C,z]=W(""),I=(l,v,p)=>t?.event?.primaryButton?.(l,v+1,p),S=(l,v,p)=>t?.event?.secondaryButton?.(l,v+1,p),i=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},H=!i?.availableForSale&&i?.price?.amount===Y,m=i?.coupons?.[0],{price:L,basePrice:E,discount:n}=M({locale:g,amount:f&&m?m.variant_price4wscode:i.price,baseAmount:f&&m?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:b,altText:y}=Z(e),h=e?.custom_name||e?.title,a=e?.custom_description||e?.description;X(()=>{let l=[];if(n){const p=`${n}${O?.off||_?.off||""}`;z(p),l.push(p)}const v=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,n?1:2);o(l.concat(v))},[e?.tags,n]),K(B,{componentType:P,componentName:j,componentTitle:h,componentDescription:a,position:t?.index+1});const r=()=>c(A,{children:[T&&D?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:D?.map?.((l,v)=>s(F,{className:"shelf-items-tag",children:l},v))}):null,h?s(J,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title line-clamp-2",html:h||""}):null,a?s(V,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:a||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:H?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:N?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&L||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&E||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s($,{variant:"secondary",onClick:()=>S(e,t?.index,t),className:`
+import{Fragment as Q,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as X}from"../AiuiProvider/index.js";import{formatVariantPrice as Y}from"./shelfDisplay.js";import G from"../../components/picture.js";import J from"../../components/badge.js";import{cn as u}from"../../helpers/utils.js";import{Text as Z}from"../../components/text.js";import z from"../../components/button.js";import{gaTrack as ee}from"../../shared/track.js";import{trackUrlRef as te}from"../../shared/trackUrlRef.js";import{Heading as se}from"../../components/heading.js";import{useExposure as le}from"../../hooks/useExposure.js";import{useRef as oe,useEffect as ae,useMemo as H,useState as K}from"react";const L="image",E="product_shelf",A=999999999e-2,ie=e=>{const t=e?.sku,x=e?.variants,f=x?.find(w=>w?.sku===t),S=f?.image?.url||x?.[0]?.image?.url||"",b=f?.image?.altText||x?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:S,altText:b}},ye=({data:e,configuration:t})=>{const{isDisplayBackImage:x=!1,itemShape:f,metafields:S,isTopTag:b=!1,isShowTag:w,isShowOriginalPrice:h}=t||{},{locale:v="us",copyWriting:I}=X(),{discounts:$,discountsCopy:N}=S||{},P=oe(null),[j,a]=K([]),[B,F]=K(""),W=(l,n,c,q)=>t?.event?.primaryButton?.(l,n+1,c,q),M=(l,n,c,q)=>t?.event?.secondaryButton?.(l,n+1,c,q),i=H(()=>{const l=e?.variants||[];if(l.length)return e?.sku?l?.find?.(n=>n?.sku===e?.sku)||l[0]:l?.[0]},[e?.sku,e?.variants]),d=i?.id?.split?.("/")||[],C=d?.[d?.length-1],O=!i?.availableForSale&&(i?.price?.amount===A||i?.price===A),g=i?.coupons?.[0],D=!!(h&&g),U=e?.price?.currencyCode||"USD",k=H(()=>Y({locale:v,amount:D?g?.variant_price4wscode:i?.price,baseAmount:D?i?.price:0,currencyCode:U}),[U,v,D,g?.variant_price4wscode,i]),{price:R,basePrice:V,discount:p}=k,{imageUrl:T,altText:_}=ie(e),y=e?.custom_name||e?.title,o=e?.custom_description||e?.description;ae(()=>{let l=[];if(p){const c=`${p}${$?.off||N?.off||""}`;F(c),l.push(c)}const n=e?.tags?.filter?.(c=>c?.startsWith?.("CLtag"))?.map?.(c=>c?.replace?.("CLtag:",""))?.slice?.(0,p?1:2);a(l.concat(n))},[e?.tags,p,$?.off,N?.off]),le(P,{componentType:L,componentName:E,componentTitle:y,componentDescription:o,position:t?.index+1});const r=()=>m(Q,{children:[w&&j?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:j?.map?.((l,n)=>s(J,{className:"shelf-items-tag",children:l},n))}):null,y?s(se,{as:"h3",title:y||"",size:2,className:"shelf-display-product-title line-clamp-2",html:y||""}):null,o?s(Z,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:O?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:I?.soldOutText}):m(Q,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&R||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&V||""})]})}),m("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(z,{variant:"secondary",onClick:()=>M(e,t?.index,t,g),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s($,{variant:"primary",onClick:()=>I(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(z,{variant:"primary",onClick:()=>W(e,t?.index,t,g),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:B,className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:u?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(U,{source:b,alt:y,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[C&&k&&s(F,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:C||""}),s("div",{className:d("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":h,target:t?.target,href:G(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}`,`${P}_${j}`),onClick:()=>{q({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(U,{source:b,alt:y,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},ue=({data:e,configuration:t})=>{const{itemShape:u,itemLength:x,metafields:w}=t||{},{discounts:k,discountsCopy:T}=w||{},{locale:f="us",copyWriting:g}=R(),[N,O]=W([]),_=Q(null),B=(a,r,l)=>t?.event?.primaryButton?.(a,r+1,l),D=(a,r,l)=>t?.event?.secondaryButton?.(a,r+1,l),o=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},C=!o?.availableForSale&&o?.price?.amount===Y,z=t?.isShowTag,I=t?.isShowOriginalPrice,S=o?.coupons?.[0],{price:i,basePrice:H,discount:m}=M({locale:f,amount:I&&S?S.variant_price4wscode:o.price,baseAmount:I&&S?o.price:0,currencyCode:e?.price?.currencyCode||"USD"}),{imageUrl:L,altText:E}=Z(e),n=e?.custom_name||e?.title,b=e?.custom_description||e?.description;K(_,{componentType:P,componentName:j,componentTitle:n,componentDescription:b,position:t?.index+1});const y=()=>x>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},h=()=>x>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return X(()=>{let a=[];if(m){const l=`${m}${k?.off||T?.off||""}`;a.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);O(a.concat(r))},[e?.tags,m]),s("div",{ref:_,className:d(y().wrap,u==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:c("div",{className:d(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(y().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":n,target:t?.target,href:G(`${f==="us"||!f?"":`/${f}`}/products/${e?.handle}`,`${P}_${j}`),onClick:()=>{q({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||o?.sku,item_name:e?.name,item_variant:o?.name,price:o?.price,index:t?.index+1}]}})},children:s(U,{source:L,alt:E,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:d("flex flex-col items-start justify-center",y().boxItem),children:[z&&N?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:N?.map?.((a,r)=>s(F,{className:"shelf-items-tag",children:a},r))}):null,n?s(J,{as:"h3",title:n||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:n||""}):null,b?s(V,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:b||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:C?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:o?.availableForSale&&i||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:o?.availableForSale&&H||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s($,{variant:"secondary",onClick:()=>D(e,t?.index,t),className:`
+            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:P,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",f==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:x?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(G,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:r()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[B&&b&&s(J,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:B||""}),s("div",{className:u("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":y,target:t?.target,href:te(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}?variant=${C}`,`${L}_${E}`),onClick:()=>{ee({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(G,{source:T,alt:_,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),r()]})},e?.id||e?.handle)},be=({data:e,configuration:t})=>{const{itemShape:x,itemLength:f,metafields:S}=t||{},{discounts:b,discountsCopy:w}=S||{},{locale:h="us",copyWriting:v}=X(),[I,$]=K([]),N=oe(null),P=(o,r,l,n)=>t?.event?.primaryButton?.(o,r+1,l,n),j=(o,r,l,n)=>t?.event?.secondaryButton?.(o,r+1,l,n),a=H(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(r=>r?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),B=a?.id?.split?.("/")||[],F=B?.[B?.length-1],W=!a?.availableForSale&&(a?.price?.amount===A||a?.price===A),M=t?.isShowTag,i=t?.isShowOriginalPrice,d=a?.coupons?.[0],C=!!(i&&d),O=e?.price?.currencyCode||"USD",g=H(()=>Y({locale:h,amount:C?d?.variant_price4wscode:a?.price,baseAmount:C?a?.price:0,currencyCode:O}),[O,h,C,d?.variant_price4wscode,a]),{price:D,basePrice:U,discount:k}=g,{imageUrl:R,altText:V}=ie(e),p=e?.custom_name||e?.title,T=e?.custom_description||e?.description;le(N,{componentType:L,componentName:E,componentTitle:p,componentDescription:T,position:t?.index+1});const _=()=>f>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},y=()=>f>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return ae(()=>{let o=[];if(k){const l=`${k}${b?.off||w?.off||""}`;o.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,k?1:2);$(o.concat(r))},[e?.tags,k,b?.off,w?.off]),s("div",{ref:N,className:u(_().wrap,x==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:u(y(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(_().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":p,target:t?.target,href:te(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}?variant=${F}`,`${L}_${E}`),onClick:()=>{ee({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(G,{source:R,alt:V,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:u("flex flex-col items-start justify-center",_().boxItem),children:[M&&I?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:I?.map?.((o,r)=>s(J,{className:"shelf-items-tag",children:o},r))}):null,p?s(se,{as:"h3",title:p||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:p||""}):null,T?s(Z,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:T||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:W?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):m(Q,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&D||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&U||""})]})}),m("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(z,{variant:"secondary",onClick:()=>j(e,t?.index,t,d),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s($,{variant:"primary",onClick:()=>B(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(z,{variant:"primary",onClick:()=>P(e,t?.index,t,d),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{ue as ShelfDisplayHorizontalItem,de as ShelfDisplayWrapItem,Z as getProductImage};
+            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{be as ShelfDisplayHorizontalItem,ye as ShelfDisplayWrapItem,ie as getProductImage};
 //# sourceMappingURL=shelfDisplayItem.js.map

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n  const sku = data?.sku\n  const skuArray = data?.variants\n  const findSku = skuArray?.find((item: any) => item?.sku === sku)\n  const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n  return {\n    imageUrl,\n    altText,\n  }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n  } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts, discountsCopy } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n      setCurrentPriceTag(discountTag)\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const bottomContent = () => {\n    return (\n      <>\n        {isShowTag && showTags?.length > 0 ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {showTags?.map?.((item: any, index: number) => (\n              <Badge key={index} className=\"shelf-items-tag\">\n                {item}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title line-clamp-2\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-4 flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px] shelf-display-item'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          {currentPriceTag && isTopTag && (\n            <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength, metafields } = configuration || {}\n  const { discounts, discountsCopy } = metafields || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n        wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n      wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'shelf-display-item',\n        'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n        'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n      )}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n          </a>\n        </div>\n        <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n          {isShowTag && showTags?.length > 0 ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.map?.((item: any, index: number) => (\n                <Badge key={index} className=\"shelf-items-tag\">\n                  {item}\n                </Badge>\n              ))}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title mb-1 line-clamp-2\"\n              html={displayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton ? (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n                className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                variant=\"primary\"\n                onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n                className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "isSoldOut", "coupon", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
+  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n  const sku = data?.sku\n  const skuArray = data?.variants\n  const findSku = skuArray?.find((item: any) => item?.sku === sku)\n  const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n  return {\n    imageUrl,\n    altText,\n  }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const {\n    isDisplayBackImage = false,\n    itemShape,\n    metafields,\n    isTopTag = false,\n    isShowTag,\n    isShowOriginalPrice,\n  } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts, discountsCopy } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n  const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants?.[0]\n    }\n    return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n        currencyCode,\n      }),\n    [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n  )\n\n  const { price, basePrice, discount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n      setCurrentPriceTag(discountTag)\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const bottomContent = () => {\n    return (\n      <>\n        {isShowTag && showTags?.length > 0 ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {showTags?.map?.((item: any, index: number) => (\n              <Badge key={index} className=\"shelf-items-tag\">\n                {item}\n              </Badge>\n            ))}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title line-clamp-2\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-4 flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px] shelf-display-item'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          {currentPriceTag && isTopTag && (\n            <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n          )}\n          <div\n            className={cn(\n              'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture\n                source={imageUrl}\n                alt={altText}\n                className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n              />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength, metafields } = configuration || {}\n  const { discounts, discountsCopy } = metafields || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n  const variant = useMemo(() => {\n    const variants = data?.variants || []\n    if (!variants.length) {\n      return undefined\n    }\n    if (!data?.sku) {\n      return variants[0]\n    }\n    return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n  }, [data?.sku, data?.variants])\n\n  const variantArr = variant?.id?.split?.('/') || []\n  const variantId = variantArr?.[variantArr?.length - 1]\n\n  const isSoldOut =\n    !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n  const currencyCode = data?.price?.currencyCode || 'USD'\n\n  const priceInfo = useMemo(\n    () =>\n      formatVariantPrice({\n        locale,\n        amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n        baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n        currencyCode,\n      }),\n    [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n  )\n\n  const { price, basePrice, discount } = priceInfo\n\n  const { imageUrl, altText } = getProductImage(data)\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n        wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n      wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'shelf-display-item',\n        'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n        'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n      )}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture\n              source={imageUrl}\n              alt={altText}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n          </a>\n        </div>\n        <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n          {isShowTag && showTags?.length > 0 ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.map?.((item: any, index: number) => (\n                <Badge key={index} className=\"shelf-items-tag\">\n                  {item}\n                </Badge>\n              ))}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title mb-1 line-clamp-2\"\n              html={displayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton ? (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n                className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                variant=\"primary\"\n                onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n                className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/esm/biz-components/Slogan/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";const lt="copy",it="brand_slogan";function W(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m=""},g)=>{const{title:n,features:o=[],featureChunkSize:H=3}=f,[v,N]=l.useState(0),[j,w]=l.useState(!0),k=i(null),y=i(null),b=i(null),d=W(o,H),T=d.length,a=o.length>H,C=a?[...d,d[0]]:d,E=40;q(g,()=>k.current);const{ref:P,inView:I}=Q();l.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,a]),l.useEffect(()=>{if(a)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,F=1/L,$=.5;u.forEach((U,A)=>{const Y=A/L*(1-$),_=F*(1+$);let S=(V-Y)/_;S=Math.max(0,Math.min(S,1)),h.set(U,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:P,children:G("div",{ref:k,className:p("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[r(J,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:n}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:C.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var at=O(D);export{it as componentName,lt as componentType,at as default};
+"use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";const lt="copy",it="brand_slogan";function W(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m=""},g)=>{const{title:n,features:o=[],featureChunkSize:H=3}=f,[v,N]=l.useState(0),[j,w]=l.useState(!0),k=i(null),y=i(null),b=i(null),d=W(o,H),T=d.length,a=o.length>H,C=a?[...d,d[0]]:d,E=40;q(g,()=>k.current);const{ref:P,inView:I}=Q();l.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,a]),l.useEffect(()=>{if(a)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,F=1/L,$=.5;u.forEach((U,A)=>{const Y=A/L*(1-$),_=F*(1+$);let S=(V-Y)/_;S=Math.max(0,Math.min(S,1)),h.set(U,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:P,children:G("div",{ref:k,className:p("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",m),children:[r(J,{ref:c,as:"h1",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:n}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:C.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var at=O(D);export{it as componentName,lt as componentType,at as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Slogan/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\n\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n\n      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\n          },\n        })\n      }\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as=\"h2\"\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\n      if (!titleRef.current) return\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const height = titleRef.current?.clientHeight || 100\n\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n\n      if (features && features.length > 0) {\n        featuresTriggerRef.current = ScrollTrigger.create({\n          trigger: featuresRef.current,\n          start: `bottom+=${height * 2}px bottom-=6%`,\n          end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n          onUpdate: (self: any) => {\n            gsap.set(featuresRef.current, { opacity: self.progress })\n          },\n        })\n      }\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\n      <div\n        ref={innerRef}\n        className={cn(\n          'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n          className\n        )}\n      >\n        <Heading\n          ref={titleRef}\n          as=\"h1\"\n          size={2}\n          weight={'bold'}\n          align={'left'}\n          className={cn(\n            'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n          )}\n          html={title}\n        />\n        {features && features.length > 0 && (\n          <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n            <div\n              className={cn([\n                'flex flex-col',\n                isTransitioning\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                    `tablet:h-[${groupHeight}px]`\n                  )}\n                  key={idx}\n                >\n                  {group.map((feature, index) => (\n                    <React.Fragment key={index}>\n                      {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                      <Text\n                        size={3}\n                        align=\"left\"\n                        as=\"p\"\n                        className=\"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                        html={feature.title}\n                      />\n                    </React.Fragment>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_default"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",