npm - @anker-in/headless-ui - Versions diffs - 1.0.26 → 1.0.28 - Mend

@anker-in/headless-ui 1.0.26 → 1.0.28

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

Files changed (62) hide show

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

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

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

@@ -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 } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { isDisplayBackImage = false, itemShape } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\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 } = 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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\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 ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\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      </>\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]'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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          <div\n            className={cn(\n              'lg-desktop:mb-3 lg-desktop:h-[195px] 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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\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 } = 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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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  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        'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\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, 'relative overflow-hidden desktop:mb-0 mb-1')}>\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {data?.tags\n                ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n                ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n                ?.slice?.(0, 2)\n                ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\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", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "locale", "copyWriting", "ref", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "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, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { isDisplayBackImage = false, itemShape, metafields } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = 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  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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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 || ''}`\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 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-3 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      </>\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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          <div\n            className={cn(\n              'lg-desktop:mb-3 lg-desktop:h-[195px] 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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 } = 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 handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\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 || ''}`\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 duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\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, 'relative overflow-hidden desktop:mb-0 mb-1')}>\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', 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", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "metafields", "locale", "copyWriting", "discounts", "ref", "showTags", "setShowTags", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/esm/biz-components/Specs/dropdown.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import{jsx as a}from"react/jsx-runtime";import{useEffect as b,useRef as h,useMemo as x}from"react";const m="openDropDown",v=({index:l,active:s,list:d,setActive:p,setVisible:c,visible:t,filterActive:r})=>{const u=h(null);b(()=>{const e=n=>{const o=n?.target?.getAttribute?.("class");!u?.current?.contains(n?.target)&&!o?.includes(m)&&c({...t,[l]:!1})};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)},[]);const f=x(()=>{const e=Object.keys(r||{});return d?.filter(n=>!e?.find(i=>r?.[i]?.handle===n?.handle))},[r,d]);return a("div",{ref:u,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${t?.[l]?"block":"hidden"}`,children:a("div",{className:"m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0",children:f?.map((e,n)=>{const o=e?.sku||e?.variants?.[0]?.sku;return a("div",{onClick:()=>{p({...s,[n]:{sku:o,name:e?.name,handle:e?.handle}}),c({...t,[n]:!1})},title:e?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
+import{jsx as l}from"react/jsx-runtime";import{useEffect as b,useRef as h,useMemo as x}from"react";const m="openDropDown",v=({index:o,active:s,list:d,setActive:p,setVisible:c,visible:r,filterActive:a})=>{const u=h(null);b(()=>{const e=n=>{const t=n?.target?.getAttribute?.("class");!u?.current?.contains(n?.target)&&!t?.includes(m)&&c({...r,[o]:!1})};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)},[]);const f=x(()=>{const e=Object.keys(a||{});return d?.filter(n=>!e?.find(i=>a?.[i]?.handle===n?.handle))},[a,d]);return l("div",{ref:u,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${r?.[o]?"block":"hidden"}`,children:l("div",{className:"m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0",children:f?.map((e,n)=>{const t=e?.sku||e?.variants?.[0]?.sku;return l("div",{onClick:()=>{p({...s,[o]:{sku:t,name:e?.name,handle:e?.handle}}),c({...r,[o]:!1})},title:e?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
                 ${e?.handle===s?.handle?"bg-[#EAEAEC]":""}`,children:e?.name},n)})})})};var D=v;export{D as default};
 //# sourceMappingURL=dropdown.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Specs/dropdown.tsx"],
-  "sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n  index: number\n  active: any\n  list: any\n  setActive: any\n  setVisible: any\n  visible: any\n  filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const isDel = event?.target?.getAttribute?.('class')\n      const isContainer = !dropDownRef?.current?.contains(event?.target)\n      if (isContainer && !isDel?.includes(clickContent)) {\n        setVisible({ ...visible, [index]: false })\n      }\n    }\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [])\n\n  const handleList = useMemo(() => {\n    const activeIndex = Object.keys(filterActive || {})\n    return list?.filter((item: { handle: any }) => {\n      const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n      return !currentIndex\n    })\n  }, [filterActive, list])\n\n  return (\n    <div\n      ref={dropDownRef}\n      className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n    >\n      <div className={'m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0'}>\n        {handleList?.map((item: any, index: number) => {\n          const currentSku = item?.sku || item?.variants?.[0]?.sku\n          return (\n            <div\n              key={index}\n              onClick={() => {\n                setActive({\n                  ...active,\n                  [index]: {\n                    sku: currentSku,\n                    name: item?.name,\n                    handle: item?.handle,\n                  },\n                })\n                setVisible({ ...visible, [index]: false })\n              }}\n              title={item?.name}\n              className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n                ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n            >\n              {item?.name}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default DropDown\n"],
-  "mappings": "AA8CY,cAAAA,MAAA,oBA9CZ,OAAS,aAAAC,EAAW,UAAAC,EAAQ,WAAAC,MAAe,QAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,EAAcX,EAAuB,IAAI,EAE/CD,EAAU,IAAM,CACd,MAAMa,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAad,EAAQ,IAAM,CAC/B,MAAMe,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,OACER,EAAC,OACC,IAAKa,EACL,UAAW,2GAA2GF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAE3J,SAAAN,EAAC,OAAI,UAAW,+FACb,SAAAiB,GAAY,IAAI,CAACE,EAAWb,IAAkB,CAC7C,MAAMe,EAAaF,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,OACEnB,EAAC,OAEC,QAAS,IAAM,CACbS,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKe,EACL,KAAMF,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFb,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAOgB,EAAQjB",
-  "names": ["jsx", "useEffect", "useRef", "useMemo", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "currentSku", "dropdown_default"]
+  "sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n  index: number\n  active: any\n  list: any\n  setActive: any\n  setVisible: any\n  visible: any\n  filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const isDel = event?.target?.getAttribute?.('class')\n      const isContainer = !dropDownRef?.current?.contains(event?.target)\n      if (isContainer && !isDel?.includes(clickContent)) {\n        setVisible({ ...visible, [index]: false })\n      }\n    }\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [])\n\n  const handleList = useMemo(() => {\n    const activeIndex = Object.keys(filterActive || {})\n    return list?.filter((item: { handle: any }) => {\n      const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n      return !currentIndex\n    })\n  }, [filterActive, list])\n\n  return (\n    <div\n      ref={dropDownRef}\n      className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n    >\n      <div className={'m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0'}>\n        {handleList?.map((item: any, id: number) => {\n          const currentSku = item?.sku || item?.variants?.[0]?.sku\n          return (\n            <div\n              key={id}\n              onClick={() => {\n                setActive({\n                  ...active,\n                  [index]: {\n                    sku: currentSku,\n                    name: item?.name,\n                    handle: item?.handle,\n                  },\n                })\n                setVisible({ ...visible, [index]: false })\n              }}\n              title={item?.name}\n              className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n                ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n            >\n              {item?.name}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default DropDown\n"],
+  "mappings": "AA8CY,cAAAA,MAAA,oBA9CZ,OAAS,aAAAC,EAAW,UAAAC,EAAQ,WAAAC,MAAe,QAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,EAAcX,EAAuB,IAAI,EAE/CD,EAAU,IAAM,CACd,MAAMa,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAad,EAAQ,IAAM,CAC/B,MAAMe,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,OACER,EAAC,OACC,IAAKa,EACL,UAAW,2GAA2GF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAE3J,SAAAN,EAAC,OAAI,UAAW,+FACb,SAAAiB,GAAY,IAAI,CAACE,EAAWE,IAAe,CAC1C,MAAMC,EAAaH,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,OACEnB,EAAC,OAEC,QAAS,IAAM,CACbS,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKgB,EACL,KAAMH,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFE,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAOE,EAAQlB",
+  "names": ["jsx", "useEffect", "useRef", "useMemo", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "id", "currentSku", "dropdown_default"]
 }

package/dist/esm/helpers/ScrollLoadVideo.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as M}from"react/jsx-runtime";import{useEffect as y,useState as b,useRef as L,useCallback as g}from"react";import{cn as i}from"../helpers/utils.js";import{debounce as R}from"lodash";const n=new Set,H=({src:r,poster:s,alt:w="Scroll Loaded Video",className:V="",videoWrapperClassName:c="",videoClassName:u="",autoplay:h=!1,muted:E=!0,loop:N=!0,controls:S=!1,playsInline:z=!0,videoRef:k=null,...I})=>{const[f,v]=b(!1),[t,l]=b(!1),m=L(null),o=L("");y(()=>{n.has(r)&&(v(!0),l(!0),o.current=r)},[r]);const p=g(()=>{const e=r;if(!e||o.current===e&&t)return;if(n.has(e)){l(!0),o.current=e;return}o.current=e;const d=document.createElement("video");d.preload="metadata",d.onloadedmetadata=()=>{l(!0),n.add(e)},d.src=e},[t,r]);y(()=>{if(!m.current||t)return;const e=R(()=>{if(window.scrollY>10)return v(!0),p(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[p,t]);const U=g(()=>{l(!0),o.current&&n.add(o.current)},[]);return M("div",{ref:m,className:i("relative size-full",V),children:[s&&a("div",{className:i("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",c,{"opacity-100":!t,"overflow-visible opacity-0":t}),children:a("img",{src:s,alt:w,style:{width:"100%",height:"100%",objectFit:"cover"},className:i(u)})}),a("div",{className:i("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":t,"opacity-0":!t}),style:{visibility:f?"visible":"hidden"},children:f&&a("div",{className:i("relative size-full",c),children:a("video",{ref:k,src:o.current||r,poster:s,className:i("size-full object-cover",u),onLoadedMetadata:U,autoPlay:h,muted:E,loop:N,controls:S,playsInline:z,...I},o.current)})})]})};var P=H;export{P as default};
+import{jsx as l,jsxs as j}from"react/jsx-runtime";import{useEffect as m,useState as g,useRef as v,useCallback as V}from"react";import{cn as n}from"../helpers/utils.js";import{debounce as M}from"lodash";const c=new Set,T=({src:r,poster:u,alt:E="Scroll Loaded Video",className:h="",videoWrapperClassName:p="",videoClassName:y="",autoplay:N=!1,muted:S=!0,loop:k=!0,controls:z=!1,playsInline:I=!0,videoRef:a=null,...U})=>{const[s,L]=g(!1),[t,d]=g(!1),b=v(null),f=v(null),o=v("");m(()=>{c.has(r)&&(L(!0),d(!0),o.current=r)},[r]),m(()=>{if(t&&s){const e=a?.current||f.current;e&&(e.muted=!0,e.play().catch(i=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",i)}))}},[t,s,a]);const w=V(()=>{const e=r;if(!e||o.current===e&&t)return;if(c.has(e)){d(!0),o.current=e;return}o.current=e;const i=document.createElement("video");i.preload="metadata",i.onloadedmetadata=()=>{d(!0),c.add(e)},i.src=e},[t,r]);m(()=>{if(!b.current||t)return;const e=M(()=>{if(window.scrollY>10)return L(!0),w(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[w,t]);const H=V(()=>{d(!0),o.current&&c.add(o.current);const e=a?.current||f.current;e&&(e.muted=!0,e.play())},[]);return j("div",{ref:b,className:n("relative size-full",h),children:[u&&l("div",{className:n("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",p,{"opacity-100":!t,"overflow-visible opacity-0":t}),children:l("img",{src:u,alt:E,style:{width:"100%",height:"100%",objectFit:"cover"},className:n(y)})}),l("div",{className:n("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":t,"opacity-0":!t}),style:{visibility:s?"visible":"hidden"},children:s&&l("div",{className:n("relative size-full",p),children:l("video",{ref:a||f,src:o.current||r,poster:u,className:n("size-full object-cover",y),onLoadedMetadata:H,autoPlay:N,muted:S,loop:k,controls:z,playsInline:I,...U},o.current)})})]})};var R=T;export{R as default};
 //# sourceMappingURL=ScrollLoadVideo.js.map

package/dist/esm/helpers/ScrollLoadVideo.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useEffect", "useState", "useRef", "useCallback", "cn", "debounce", "globalLoadedVideoUrls", "ScrollLoadVideo", "src", "poster", "alt", "className", "videoWrapperClassName", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "isVideoStartLoad", "setIsVideoStartLoad", "isVideoLoaded", "setIsVideoLoaded", "ref", "currentVideoUrl", "preloadVideo", "videoUrl", "videoElement", "scrollHandler", "handleVideoLoad", "ScrollLoadVideo_default"]
+  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u5185\u90E8\u89C6\u9891\u5F15\u7528\uFF0C\u5982\u679C\u5916\u90E8\u6CA1\u6709\u4F20\u5165 videoRef\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u5F53\u89C6\u9891\u5DF2\u52A0\u8F7D\u4E14\u5DF2\u5F00\u59CB\u52A0\u8F7D\u65F6\uFF0C\u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n  useEffect(() => {\n    if (isVideoLoaded && isVideoStartLoad) {\n      const videoElement = videoRef?.current || internalVideoRef.current\n      if (videoElement) {\n        // \u786E\u4FDD\u9759\u97F3\u4EE5\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\n        videoElement.muted = true\n        // \u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n        videoElement.play().catch((error: unknown) => {\n          console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n        })\n      }\n    }\n  }, [isVideoLoaded, isVideoStartLoad, videoRef])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n    const videoElement = videoRef?.current || internalVideoRef.current\n    if (videoElement) {\n      videoElement.muted = true\n      videoElement.play()\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef || internalVideoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useEffect", "useState", "useRef", "useCallback", "cn", "debounce", "globalLoadedVideoUrls", "ScrollLoadVideo", "src", "poster", "alt", "className", "videoWrapperClassName", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "isVideoStartLoad", "setIsVideoStartLoad", "isVideoLoaded", "setIsVideoLoaded", "ref", "internalVideoRef", "currentVideoUrl", "videoElement", "error", "preloadVideo", "videoUrl", "scrollHandler", "handleVideoLoad", "ScrollLoadVideo_default"]
 }

package/dist/esm/hooks/useRollout.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type MutableRefObject } from 'react';
2	+ export declare function useRollout<T extends HTMLElement = HTMLElement>(options: any): [MutableRefObject<T \| null>, boolean];

package/dist/esm/hooks/useRollout.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useEffect as c,useRef as f,useState as i}from"react";function b(n){const r=f(null),[e,o]=i(!1);return c(()=>{if(e)return;const s=r.current;if(!s\|\|typeof IntersectionObserver>"u")return;const t=new IntersectionObserver(([u])=>{u.isIntersecting&&(o(!0),t.disconnect())},n);return t.observe(s),()=>t.disconnect()},[e,n]),[r,e]}export{b as useRollout};
2	+ //# sourceMappingURL=useRollout.js.map

package/dist/esm/hooks/useRollout.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useRollout.ts"],
+  "sourcesContent": ["import { useEffect, useRef, useState, type MutableRefObject } from 'react'\n\nexport function useRollout<T extends HTMLElement = HTMLElement>(\n  options: any\n): [MutableRefObject<T | null>, boolean] {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n  return [ref, inView]\n}\n\n\n"],
+  "mappings": "AAAA,OAAS,aAAAA,EAAW,UAAAC,EAAQ,YAAAC,MAAuC,QAE5D,SAASC,EACdC,EACuC,CACvC,MAAMC,EAAMJ,EAAU,IAAI,EACpB,CAACK,EAAQC,CAAS,EAAIL,EAAS,EAAK,EAC1C,OAAAF,EAAU,IAAM,CACd,GAAIM,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EACV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EACb,CAACC,EAAKC,CAAM,CACrB",
+  "names": ["useEffect", "useRef", "useState", "useRollout", "options", "ref", "inView", "setInView", "el", "observer", "entry"]
+}

package/dist/esm/stories/HeroBanner.stories.js CHANGED Viewed

@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
 - \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
 - \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
 - \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
-        `}}},tags:["autodocs"]};var s=i;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",u="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",t="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",n={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},l={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},g=()=>m("div",{className:"flex flex-col",children:[o(a,{data:{...n.args.data,size:"sm"}}),o(a,{data:{...l.args.data,size:"sm"}})]}),c={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},h={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},d={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",playVideoButton:{text:"Shop Now"},videoConfig:{videoUrl:"https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4",setVideoUrl:r=>{console.log("setVideoUrl",r)}},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};export{l as DarkTheme,n as LightTheme,g as MultiBanner,h as WithPadImage,d as WithPlayButton,c as WithoutSecondaryButton,s as default};
+        `}}},tags:["autodocs"]};var p=i;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",u="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",t="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",n={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-09T09:00",endDate_tz:"Asia/Dhaka",dateFormat:"Day,Hours,Mins,Secs"}}},l={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"dark background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},g=()=>m("div",{className:"flex flex-col",children:[o(a,{data:{...n.args.data,size:"sm"}}),o(a,{data:{...l.args.data,size:"sm"}})]}),c={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},h={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},d={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",playVideoButton:{text:"Shop Now"},videoConfig:{videoUrl:"https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4",setVideoUrl:r=>{console.log("setVideoUrl",r)}},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}};export{l as DarkTheme,n as LightTheme,g as MultiBanner,h as WithPadImage,d as WithPlayButton,c as WithoutSecondaryButton,p as default};
 //# sourceMappingURL=HeroBanner.stories.js.map

package/dist/esm/stories/HeroBanner.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/HeroBanner.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPadImage: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPlayButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      playVideoButton: {\n        text: 'Shop Now',\n      },\n      videoConfig: {\n        videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n        setVideoUrl: (v: string) => {\n          console.log('setVideoUrl', v)\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-09T09:00',\n      endDate_tz: 'Asia/Dhaka',\n      dateFormat: 'Day,Hours,Mins,Secs',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPadImage: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPlayButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      playVideoButton: {\n        text: 'Shop Now',\n      },\n      videoConfig: {\n        videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n        setVideoUrl: (v: string) => {\n          console.log('setVideoUrl', v)\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n"],
+  "mappings": "AAiHI,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAhHJ,OAAOC,MAAgB,6CAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EACJ,gJAEIC,EACJ,gJAEIC,EACJ,2GAEWC,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKH,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,UAAW,sBACX,cAAe,CACb,KAAM,WACN,KAAM,wBACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,0BACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,EACA,QAAS,mBACT,WAAY,aACZ,WAAY,qBACd,CACF,CACF,EAEaI,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKF,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaG,EAAc,IAEvBT,EAAC,OAAI,UAAU,gBAEb,UAAAD,EAACE,EAAA,CAAW,KAAM,CAAE,GAAGM,EAAY,KAAM,KAAM,KAAM,IAAK,EAAG,EAE7DR,EAACE,EAAA,CAAW,KAAM,CAAE,GAAGO,EAAW,KAAM,KAAM,KAAM,IAAK,EAAG,GAC9D,EAISE,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKN,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaO,EAAsB,CACjC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAK,8CACL,IAAK,qBACL,aAAcP,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaQ,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAK,8CACL,IAAK,qBACL,aAAcR,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAK,4CACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,gBAAiB,CACf,KAAM,UACR,EACA,YAAa,CACX,SAAU,4EACV,YAAcS,GAAc,CAC1B,QAAQ,IAAI,cAAeA,CAAC,CAC9B,CACF,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF",
   "names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithPadImage", "WithPlayButton", "v"]
 }

package/package.json CHANGED Viewed

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