@anker-in/headless-ui 1.2.2 → 1.2.3

package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as D,jsx as o,jsxs as d}from"react/jsx-runtime";import*as r from"react";import{cn as t}from"../../helpers/utils.js";import _ from"../../components/badge.js";import{Text as z}from"../../components/text.js";import y from"../../components/button.js";import B from"../../components/picture.js";import{Heading as R}from"../../components/heading.js";const T={center:"object-center",top:"object-top",bottom:"object-bottom",left:"object-left",right:"object-right","top-left":"object-left-top","top-right":"object-right-top","bottom-left":"object-left-bottom","bottom-right":"object-right-bottom"},f=r.forwardRef(({product:e,className:h,showTags:k=!0,showOriginalPrice:P=!0,onLearnMore:j,onShopNow:w,onAddToCart:C,onProductImageClick:p,classNames:a,secondaryButtonText:m,secondaryButtonFun:g,primaryButtonText:c,primaryButtonFun:x,copy:S},L)=>{const[O,N]=r.useState(!1),[$,I]=r.useState(!1),b=!e.availableForSale,u=async(i,s)=>{if(!i)return;const v=s==="primary"?N:I;v(!0);try{switch(i){case"buyNow":await w?.(e);break;case"addCart":await C?.(e);break;case"learnMore":await j?.(e);break;default:break}}finally{v(!1)}},l=e.custom_name||e.name,n=e.custom_description||e.description,M=e.custom_theme??"dark";return o("div",{ref:L,className:t("rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]","tablet:min-w-[auto] min-w-[296px] max-w-[824px]",{"aiui-dark":M==="dark"},h,a?.productCard),children:d("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[o("a",{onClick:()=>p?.(e),...!p&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:t("absolute inset-0",a?.productImage),children:o(B,{alt:e.name,source:e.custom_image??e.image,className:t("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:t("object-cover",T[e.imageObjectPosition??"center"])})}),d("div",{className:t("desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",a?.productContent),children:[k&&e.tags?.length?o("div",{className:t("mb-2 box-border flex flex-wrap gap-1 overflow-visible",a?.tagsContainer),children:e.tags.map((i,s)=>i.label?o(_,{size:"sm",variant:i.variant||"outline",promotionalType:i.promotionalType,children:i.label},s):r.isValidElement(i)&&o(r.Fragment,{children:i},s))}):null,l?o(R,{as:"h3",title:l,html:l,className:t("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",a?.productTitle)}):null,n?o(z,{size:2,html:n,className:t("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",a?.productDescription)}):null,o("div",{className:t("mb-1 mt-4 flex items-center",a?.priceContainer),children:b?o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",a?.productPrice),children:S?.outOfStockLabel??"Sold Out"}):d(D,{children:[o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",a?.productPrice),children:e.price}),P&&e.originalPrice&&o("div",{className:t("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",a?.originalPrice),children:e.originalPrice})]})}),d("div",{className:t("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",a?.buttonGroup),children:[m&&o(y,{variant:"secondary",onClick:()=>u(g,"secondary"),disabled:b&&g!=="learnMore",loading:$,className:t(a?.secondaryButton),"data-headless-type-name":"ImageOverlayShelf#ProductCard","data-headless-title-desc-button":`${l}#${n||""}#${m}`,"data-headless-sku":e.sku,children:m}),c&&o(y,{variant:"primary",onClick:()=>u(x,"primary"),disabled:b&&x!=="learnMore",loading:O,className:t(a?.primaryButton),"data-headless-type-name":"ImageOverlayShelf#ProductCard","data-headless-title-desc-button":`${l}#${n||""}#${c}`,"data-headless-sku":e.sku,children:c})]})]})]})})});f.displayName="ImageOverlayShelf.ProductCard";var A=f;export{f as ProductCard,A as default};
+"use client";import{Fragment as D,jsx as o,jsxs as d}from"react/jsx-runtime";import*as r from"react";import{cn as t}from"../../helpers/utils.js";import _ from"../../components/badge.js";import{Text as z}from"../../components/text.js";import y from"../../components/button.js";import B from"../../components/picture.js";import{Heading as R}from"../../components/heading.js";const T={center:"object-center",top:"object-top",bottom:"object-bottom",left:"object-left",right:"object-right","top-left":"object-left-top","top-right":"object-right-top","bottom-left":"object-left-bottom","bottom-right":"object-right-bottom"},f=r.forwardRef(({product:e,className:h,showTags:k=!0,showOriginalPrice:P=!0,onLearnMore:j,onShopNow:w,onAddToCart:C,onProductImageClick:p,classNames:a,secondaryButtonText:m,secondaryButtonFun:g,primaryButtonText:c,primaryButtonFun:x,copy:S},L)=>{const[O,N]=r.useState(!1),[$,I]=r.useState(!1),b=!e.availableForSale,u=async(i,s)=>{if(!i)return;const v=s==="primary"?N:I;v(!0);try{switch(i){case"buyNow":await w?.(e);break;case"addCart":await C?.(e);break;case"learnMore":await j?.(e);break;default:break}}finally{v(!1)}},l=e.custom_name||e.name,n=e.custom_description||e.description,M=e.custom_theme??"dark";return o("div",{ref:L,className:t("rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]","tablet:min-w-[auto] min-w-[296px] max-w-[824px]",{"aiui-dark":M==="dark"},h,a?.productCard),children:d("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[o("a",{onClick:()=>p?.(e),...!p&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:t("absolute inset-0",a?.productImage),children:o(B,{alt:e.name,source:e.custom_image??e.image,className:t("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:t("object-cover",T[e.imageObjectPosition??"center"])})}),d("div",{className:t("desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",a?.productContent),children:[k&&e.tags?.length?o("div",{className:t("mb-2 box-border flex flex-wrap gap-1 overflow-visible",a?.tagsContainer),children:e.tags.map((i,s)=>i.label?o(_,{size:"sm",variant:i.variant||"outline",promotionalType:i.promotionalType,children:i.label},s):r.isValidElement(i)&&o(r.Fragment,{children:i},s))}):null,l?o(R,{as:"h3",title:l,html:l,className:t("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",a?.productTitle)}):null,n?o(z,{size:2,html:n,className:t("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",a?.productDescription)}):null,o("div",{className:t("mb-1 mt-4 flex items-center",a?.priceContainer),children:b?o("div",{className:t("tablet:text-xl text-info-primary text-xl font-bold",a?.productPrice),children:S?.outOfStockLabel??"Sold Out"}):d(D,{children:[o("div",{className:t("tablet:text-xl text-info-primary text-xl font-bold",a?.productPrice),children:e.price}),P&&e.originalPrice&&o("div",{className:t("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",a?.originalPrice),children:e.originalPrice})]})}),d("div",{className:t("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",a?.buttonGroup),children:[m&&o(y,{variant:"secondary",onClick:()=>u(g,"secondary"),disabled:b&&g!=="learnMore",loading:$,className:t(a?.secondaryButton),"data-headless-type-name":"ImageOverlayShelf#ProductCard","data-headless-title-desc-button":`${l}#${n||""}#${m}`,"data-headless-sku":e.sku,children:m}),c&&o(y,{variant:"primary",onClick:()=>u(x,"primary"),disabled:b&&x!=="learnMore",loading:O,className:t(a?.primaryButton),"data-headless-type-name":"ImageOverlayShelf#ProductCard","data-headless-title-desc-button":`${l}#${n||""}#${c}`,"data-headless-sku":e.sku,children:c})]})]})]})})});f.displayName="ImageOverlayShelf.ProductCard";var A=f;export{f as ProductCard,A as default};
 //# sourceMappingURL=ProductCard.js.map

package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageOverlayShelf/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\n\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ProductCardProps, ButtonFunctionType, ImageObjectPosition } from './types.js'\n\n/**\n * \u56FE\u7247\u88C1\u5207\u4F4D\u7F6E\u6620\u5C04\n */\nconst objectPositionClassMap: Record<ImageObjectPosition, string> = {\n  center: 'object-center',\n  top: 'object-top',\n  bottom: 'object-bottom',\n  left: 'object-left',\n  right: 'object-right',\n  'top-left': 'object-left-top',\n  'top-right': 'object-right-top',\n  'bottom-left': 'object-left-bottom',\n  'bottom-right': 'object-right-bottom',\n}\n\n/**\n * ProductCard - ImageOverlayShelf \u7684\u5355\u4E2A\u4EA7\u54C1\u5361\u7247\n * \u56FE\u6587\u53E0\u52A0\u6837\u5F0F\uFF0C\u80CC\u666F\u56FE\u5B8C\u5168\u8986\u76D6\u5361\u7247\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      showOriginalPrice = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      copy,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const isSoldOut = !product.availableForSale\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n      if (!buttonFun) return\n\n      const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n      setLoading(true)\n\n      try {\n        switch (buttonFun) {\n          case 'buyNow':\n            await onShopNow?.(product)\n            break\n          case 'addCart':\n            await onAddToCart?.(product)\n            break\n          case 'learnMore':\n            await onLearnMore?.(product)\n            break\n          default:\n            break\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    const displayTitle = product.custom_name || product.name\n    const displayDescription = product.custom_description || product.description\n    const theme = product.custom_theme ?? 'dark'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300',\n          'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n          'tablet:min-w-[auto] min-w-[296px] max-w-[824px]',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className,\n          classNames?.productCard\n        )}\n      >\n        <div className=\"box-border flex h-full flex-col justify-between overflow-hidden\">\n          {/* \u80CC\u666F\u56FE */}\n          <a\n            onClick={() => onProductImageClick?.(product)}\n            {...(!onProductImageClick &&\n              product.listingLink && {\n                href: product.listingLink,\n              })}\n            rel=\"noreferrer\"\n            className={cn('absolute inset-0', classNames?.productImage)}\n          >\n            <Picture\n              alt={product.name}\n              source={product.custom_image ?? product.image}\n              className={cn(\n                'rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full'\n              )}\n              imgClassName={cn('object-cover', objectPositionClassMap[product.imageObjectPosition ?? 'center'])}\n            />\n          </a>\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div\n            className={cn(\n              'desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4',\n              classNames?.productContent\n            )}\n          >\n            {/* \u6807\u7B7E */}\n            {showTags && product.tags?.length ? (\n              <div className={cn('mb-2 box-border flex flex-wrap gap-1 overflow-visible', classNames?.tagsContainer)}>\n                {product.tags.map((tag: any, index: number) =>\n                  (tag as any).label ? (\n                    <Badge\n                      key={index}\n                      size=\"sm\"\n                      variant={(tag.variant as any) || 'outline'}\n                      promotionalType={tag.promotionalType}\n                    >\n                      {tag.label}\n                    </Badge>\n                  ) : (\n                    React.isValidElement(tag) && <React.Fragment key={index}>{tag}</React.Fragment>\n                  )\n                )}\n              </div>\n            ) : null}\n\n            {/* \u4EA7\u54C1\u6807\u9898 */}\n            {displayTitle ? (\n              <Heading\n                as=\"h3\"\n                title={displayTitle}\n                html={displayTitle}\n                className={cn(\n                  'lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold',\n                  classNames?.productTitle\n                )}\n              />\n            ) : null}\n\n            {/* \u4EA7\u54C1\u63CF\u8FF0 */}\n            {displayDescription ? (\n              <Text\n                size={2}\n                html={displayDescription}\n                className={cn(\n                  'lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold',\n                  classNames?.productDescription\n                )}\n              />\n            ) : null}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div className={cn('mb-1 mt-4 flex items-center', classNames?.priceContainer)}>\n              {isSoldOut ? (\n                <div className={cn('tablet:text-2xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                  {copy?.outOfStockLabel ?? 'Sold Out'}\n                </div>\n              ) : (\n                <>\n                  <div className={cn('tablet:text-2xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                    {product.price}\n                  </div>\n                  {showOriginalPrice && product.originalPrice && (\n                    <div\n                      className={cn(\n                        'tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through',\n                        classNames?.originalPrice\n                      )}\n                    >\n                      {product.originalPrice}\n                    </div>\n                  )}\n                </>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u533A\u57DF */}\n            <div\n              className={cn('lg-desktop:gap-3 pointer-events-auto flex items-center gap-2', classNames?.buttonGroup)}\n            >\n              {secondaryButtonText && (\n                <Button\n                  variant=\"secondary\"\n                  onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n                  disabled={isSoldOut && secondaryButtonFun !== 'learnMore'}\n                  loading={secondaryLoading}\n                  className={cn(classNames?.secondaryButton)}\n                  data-headless-type-name=\"ImageOverlayShelf#ProductCard\"\n                  data-headless-title-desc-button={`${displayTitle}#${displayDescription || ''}#${secondaryButtonText}`}\n                  data-headless-sku={product.sku}\n                >\n                  {secondaryButtonText}\n                </Button>\n              )}\n              {primaryButtonText && (\n                <Button\n                  variant=\"primary\"\n                  onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n                  disabled={isSoldOut && primaryButtonFun !== 'learnMore'}\n                  loading={primaryLoading}\n                  className={cn(classNames?.primaryButton)}\n                  data-headless-type-name=\"ImageOverlayShelf#ProductCard\"\n                  data-headless-title-desc-button={`${displayTitle}#${displayDescription || ''}#${primaryButtonText}`}\n                  data-headless-sku={product.sku}\n                >\n                  {primaryButtonText}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCard.displayName = 'ImageOverlayShelf.ProductCard'\n\nexport { ProductCard }\nexport default ProductCard\n"],
-  "mappings": "aA+GY,OAoEI,YAAAA,EApEJ,OAAAC,EAoEI,QAAAC,MApEJ,oBA7GZ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,4BAClB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAY,6BACnB,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BAMxB,MAAMC,EAA8D,CAClE,OAAQ,gBACR,IAAK,aACL,OAAQ,gBACR,KAAM,cACN,MAAO,eACP,WAAY,kBACZ,YAAa,mBACb,cAAe,qBACf,eAAgB,qBAClB,EAMMC,EAAcR,EAAM,WACxB,CACE,CACE,QAAAS,EACA,UAAAC,EACA,SAAAC,EAAW,GACX,kBAAAC,EAAoB,GACpB,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,KAAAC,CACF,EACAC,IACG,CACH,KAAM,CAACC,EAAgBC,CAAiB,EAAIzB,EAAM,SAAS,EAAK,EAC1D,CAAC0B,EAAkBC,CAAmB,EAAI3B,EAAM,SAAS,EAAK,EAE9D4B,EAAY,CAACnB,EAAQ,iBAGrBoB,EAAoB,MAAOC,EAAgCC,IAAyC,CACxG,GAAI,CAACD,EAAW,OAEhB,MAAME,EAAaD,IAAe,UAAYN,EAAoBE,EAClEK,EAAW,EAAI,EAEf,GAAI,CACF,OAAQF,EAAW,CACjB,IAAK,SACH,MAAMhB,IAAYL,CAAO,EACzB,MACF,IAAK,UACH,MAAMM,IAAcN,CAAO,EAC3B,MACF,IAAK,YACH,MAAMI,IAAcJ,CAAO,EAC3B,MACF,QACE,KACJ,CACF,QAAE,CACAuB,EAAW,EAAK,CAClB,CACF,EAEMC,EAAexB,EAAQ,aAAeA,EAAQ,KAC9CyB,EAAqBzB,EAAQ,oBAAsBA,EAAQ,YAC3D0B,EAAQ1B,EAAQ,cAAgB,OAEtC,OACEX,EAAC,OACC,IAAKyB,EACL,UAAWtB,EACT,qFACA,mDACA,kDACA,CACE,YAAakC,IAAU,MACzB,EACAzB,EACAO,GAAY,WACd,EAEA,SAAAlB,EAAC,OAAI,UAAU,kEAEb,UAAAD,EAAC,KACC,QAAS,IAAMkB,IAAsBP,CAAO,EAC3C,GAAI,CAACO,GACJP,EAAQ,aAAe,CACrB,KAAMA,EAAQ,WAChB,EACF,IAAI,aACJ,UAAWR,EAAG,mBAAoBgB,GAAY,YAAY,EAE1D,SAAAnB,EAACO,EAAA,CACC,IAAKI,EAAQ,KACb,OAAQA,EAAQ,cAAgBA,EAAQ,MACxC,UAAWR,EACT,+FACF,EACA,aAAcA,EAAG,eAAgBM,EAAuBE,EAAQ,qBAAuB,QAAQ,CAAC,EAClG,EACF,EAEAV,EAAC,OACC,UAAWE,EACT,0IACAgB,GAAY,cACd,EAGC,UAAAN,GAAYF,EAAQ,MAAM,OACzBX,EAAC,OAAI,UAAWG,EAAG,wDAAyDgB,GAAY,aAAa,EAClG,SAAAR,EAAQ,KAAK,IAAI,CAAC2B,EAAUC,IAC1BD,EAAY,MACXtC,EAACI,EAAA,CAEC,KAAK,KACL,QAAUkC,EAAI,SAAmB,UACjC,gBAAiBA,EAAI,gBAEpB,SAAAA,EAAI,OALAC,CAMP,EAEArC,EAAM,eAAeoC,CAAG,GAAKtC,EAACE,EAAM,SAAN,CAA4B,SAAAoC,GAARC,CAAY,CAElE,EACF,EACE,KAGHJ,EACCnC,EAACQ,EAAA,CACC,GAAG,KACH,MAAO2B,EACP,KAAMA,EACN,UAAWhC,EACT,8HACAgB,GAAY,YACd,EACF,EACE,KAGHiB,EACCpC,EAACK,EAAA,CACC,KAAM,EACN,KAAM+B,EACN,UAAWjC,EACT,wFACAgB,GAAY,kBACd,EACF,EACE,KAGJnB,EAAC,OAAI,UAAWG,EAAG,8BAA+BgB,GAAY,cAAc,EACzE,SAAAW,EACC9B,EAAC,OAAI,UAAWG,EAAG,sDAAuDgB,GAAY,YAAY,EAC/F,SAAAK,GAAM,iBAAmB,WAC5B,EAEAvB,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAWG,EAAG,sDAAuDgB,GAAY,YAAY,EAC/F,SAAAR,EAAQ,MACX,EACCG,GAAqBH,EAAQ,eAC5BX,EAAC,OACC,UAAWG,EACT,yEACAgB,GAAY,aACd,EAEC,SAAAR,EAAQ,cACX,GAEJ,EAEJ,EAGAV,EAAC,OACC,UAAWE,EAAG,+DAAgEgB,GAAY,WAAW,EAEpG,UAAAC,GACCpB,EAACM,EAAA,CACC,QAAQ,YACR,QAAS,IAAMyB,EAAkBV,EAAoB,WAAW,EAChE,SAAUS,GAAaT,IAAuB,YAC9C,QAASO,EACT,UAAWzB,EAAGgB,GAAY,eAAe,EACzC,0BAAwB,gCACxB,kCAAiC,GAAGgB,CAAY,IAAIC,GAAsB,EAAE,IAAIhB,CAAmB,GACnG,oBAAmBT,EAAQ,IAE1B,SAAAS,EACH,EAEDE,GACCtB,EAACM,EAAA,CACC,QAAQ,UACR,QAAS,IAAMyB,EAAkBR,EAAkB,SAAS,EAC5D,SAAUO,GAAaP,IAAqB,YAC5C,QAASG,EACT,UAAWvB,EAAGgB,GAAY,aAAa,EACvC,0BAAwB,gCACxB,kCAAiC,GAAGgB,CAAY,IAAIC,GAAsB,EAAE,IAAId,CAAiB,GACjG,oBAAmBX,EAAQ,IAE1B,SAAAW,EACH,GAEJ,GACF,GACF,EACF,CAEJ,CACF,EAEAZ,EAAY,YAAc,gCAG1B,IAAO8B,EAAQ9B",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\n\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ProductCardProps, ButtonFunctionType, ImageObjectPosition } from './types.js'\n\n/**\n * \u56FE\u7247\u88C1\u5207\u4F4D\u7F6E\u6620\u5C04\n */\nconst objectPositionClassMap: Record<ImageObjectPosition, string> = {\n  center: 'object-center',\n  top: 'object-top',\n  bottom: 'object-bottom',\n  left: 'object-left',\n  right: 'object-right',\n  'top-left': 'object-left-top',\n  'top-right': 'object-right-top',\n  'bottom-left': 'object-left-bottom',\n  'bottom-right': 'object-right-bottom',\n}\n\n/**\n * ProductCard - ImageOverlayShelf \u7684\u5355\u4E2A\u4EA7\u54C1\u5361\u7247\n * \u56FE\u6587\u53E0\u52A0\u6837\u5F0F\uFF0C\u80CC\u666F\u56FE\u5B8C\u5168\u8986\u76D6\u5361\u7247\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      product,\n      className,\n      showTags = true,\n      showOriginalPrice = true,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      copy,\n    },\n    ref\n  ) => {\n    const [primaryLoading, setPrimaryLoading] = React.useState(false)\n    const [secondaryLoading, setSecondaryLoading] = React.useState(false)\n\n    const isSoldOut = !product.availableForSale\n\n    // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n    const handleButtonClick = async (buttonFun?: ButtonFunctionType, buttonType?: 'primary' | 'secondary') => {\n      if (!buttonFun) return\n\n      const setLoading = buttonType === 'primary' ? setPrimaryLoading : setSecondaryLoading\n      setLoading(true)\n\n      try {\n        switch (buttonFun) {\n          case 'buyNow':\n            await onShopNow?.(product)\n            break\n          case 'addCart':\n            await onAddToCart?.(product)\n            break\n          case 'learnMore':\n            await onLearnMore?.(product)\n            break\n          default:\n            break\n        }\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    const displayTitle = product.custom_name || product.name\n    const displayDescription = product.custom_description || product.description\n    const theme = product.custom_theme ?? 'dark'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300',\n          'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n          'tablet:min-w-[auto] min-w-[296px] max-w-[824px]',\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          className,\n          classNames?.productCard\n        )}\n      >\n        <div className=\"box-border flex h-full flex-col justify-between overflow-hidden\">\n          {/* \u80CC\u666F\u56FE */}\n          <a\n            onClick={() => onProductImageClick?.(product)}\n            {...(!onProductImageClick &&\n              product.listingLink && {\n                href: product.listingLink,\n              })}\n            rel=\"noreferrer\"\n            className={cn('absolute inset-0', classNames?.productImage)}\n          >\n            <Picture\n              alt={product.name}\n              source={product.custom_image ?? product.image}\n              className={cn(\n                'rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full'\n              )}\n              imgClassName={cn('object-cover', objectPositionClassMap[product.imageObjectPosition ?? 'center'])}\n            />\n          </a>\n          {/* \u5185\u5BB9\u533A\u57DF */}\n          <div\n            className={cn(\n              'desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4',\n              classNames?.productContent\n            )}\n          >\n            {/* \u6807\u7B7E */}\n            {showTags && product.tags?.length ? (\n              <div className={cn('mb-2 box-border flex flex-wrap gap-1 overflow-visible', classNames?.tagsContainer)}>\n                {product.tags.map((tag: any, index: number) =>\n                  (tag as any).label ? (\n                    <Badge\n                      key={index}\n                      size=\"sm\"\n                      variant={(tag.variant as any) || 'outline'}\n                      promotionalType={tag.promotionalType}\n                    >\n                      {tag.label}\n                    </Badge>\n                  ) : (\n                    React.isValidElement(tag) && <React.Fragment key={index}>{tag}</React.Fragment>\n                  )\n                )}\n              </div>\n            ) : null}\n\n            {/* \u4EA7\u54C1\u6807\u9898 */}\n            {displayTitle ? (\n              <Heading\n                as=\"h3\"\n                title={displayTitle}\n                html={displayTitle}\n                className={cn(\n                  'lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold',\n                  classNames?.productTitle\n                )}\n              />\n            ) : null}\n\n            {/* \u4EA7\u54C1\u63CF\u8FF0 */}\n            {displayDescription ? (\n              <Text\n                size={2}\n                html={displayDescription}\n                className={cn(\n                  'lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold',\n                  classNames?.productDescription\n                )}\n              />\n            ) : null}\n\n            {/* \u4EF7\u683C\u533A\u57DF */}\n            <div className={cn('mb-1 mt-4 flex items-center', classNames?.priceContainer)}>\n              {isSoldOut ? (\n                <div className={cn('tablet:text-xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                  {copy?.outOfStockLabel ?? 'Sold Out'}\n                </div>\n              ) : (\n                <>\n                  <div className={cn('tablet:text-xl text-info-primary text-xl font-bold', classNames?.productPrice)}>\n                    {product.price}\n                  </div>\n                  {showOriginalPrice && product.originalPrice && (\n                    <div\n                      className={cn(\n                        'tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through',\n                        classNames?.originalPrice\n                      )}\n                    >\n                      {product.originalPrice}\n                    </div>\n                  )}\n                </>\n              )}\n            </div>\n\n            {/* \u6309\u94AE\u533A\u57DF */}\n            <div\n              className={cn('lg-desktop:gap-3 pointer-events-auto flex items-center gap-2', classNames?.buttonGroup)}\n            >\n              {secondaryButtonText && (\n                <Button\n                  variant=\"secondary\"\n                  onClick={() => handleButtonClick(secondaryButtonFun, 'secondary')}\n                  disabled={isSoldOut && secondaryButtonFun !== 'learnMore'}\n                  loading={secondaryLoading}\n                  className={cn(classNames?.secondaryButton)}\n                  data-headless-type-name=\"ImageOverlayShelf#ProductCard\"\n                  data-headless-title-desc-button={`${displayTitle}#${displayDescription || ''}#${secondaryButtonText}`}\n                  data-headless-sku={product.sku}\n                >\n                  {secondaryButtonText}\n                </Button>\n              )}\n              {primaryButtonText && (\n                <Button\n                  variant=\"primary\"\n                  onClick={() => handleButtonClick(primaryButtonFun, 'primary')}\n                  disabled={isSoldOut && primaryButtonFun !== 'learnMore'}\n                  loading={primaryLoading}\n                  className={cn(classNames?.primaryButton)}\n                  data-headless-type-name=\"ImageOverlayShelf#ProductCard\"\n                  data-headless-title-desc-button={`${displayTitle}#${displayDescription || ''}#${primaryButtonText}`}\n                  data-headless-sku={product.sku}\n                >\n                  {primaryButtonText}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCard.displayName = 'ImageOverlayShelf.ProductCard'\n\nexport { ProductCard }\nexport default ProductCard\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "cn", "Badge", "Text", "Button", "Picture", "Heading", "objectPositionClassMap", "ProductCard", "product", "className", "showTags", "showOriginalPrice", "onLearnMore", "onShopNow", "onAddToCart", "onProductImageClick", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "copy", "ref", "primaryLoading", "setPrimaryLoading", "secondaryLoading", "setSecondaryLoading", "isSoldOut", "handleButtonClick", "buttonFun", "buttonType", "setLoading", "displayTitle", "displayDescription", "theme", "tag", "index", "ProductCard_default"]
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js';
-import { type SwiperRef } from 'swiper/react';
+import type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps, MarqueeIconAndTextContentProps, MarqueePictureContentProps } from './type.js';
 import 'swiper/css';
 declare const MarqueeItem: {
     ({ data, configuration }: MarqueeItemProps): import("react/jsx-runtime").JSX.Element;
@@ -11,8 +10,16 @@ declare const MarqueeImageContent: {
     displayName: string;
 };
 declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.ForwardRefExoticComponent<Omit<MarqueeProps & React.RefAttributes<SwiperRef>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const MarqueeIconAndTextContent: {
+    ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const MarqueePictureContent: {
+    ({ pictureImage, pictureClassName }: MarqueePictureContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<MarqueeProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;
-export { MarqueeItem, MarqueeImageContent, MarqueeTextContent };
+export { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent };

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as g,jsx as r,jsxs as v}from"react/jsx-runtime";import l,{useImperativeHandle as f,useRef as w}from"react";import{Picture as d,Text as x}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withLayout as M}from"../../shared/Styles.js";import{Swiper as y,SwiperSlide as q}from"swiper/react";import"swiper/css";import{Autoplay as N}from"swiper/modules";import{useExposure as C}from"../../hooks/useExposure.js";const S="image",R="marquee",u=l.forwardRef(({data:e,className:t},a)=>{const o=w(null);return f(a,()=>o.current),C(o,{componentType:S,componentName:R}),r(y,{direction:"horizontal",className:s("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:o,id:"Marquee"+e?.key,modules:[N],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((m,c)=>r(q,{children:r(p,{data:m})},m?.id+"SwiperSlide"+c))})});u.displayName="Marquee";const p=({data:e,configuration:t})=>v(g,{children:[e.type==="image"&&r(i,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&r(n,{text:e?.text,textClassName:t?.textClassName})]});p.displayName="MarqueeItem";const i=({image:e,imageClassName:t})=>r("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:r(d,{source:e?.url,alt:e?.alt||"",imgClassName:s("object-cover",t)})});i.displayName="MarqueeImageContent";const n=l.forwardRef(({text:e,textClassName:t},a)=>r(x,{as:"div",ref:a,html:e,className:s("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));n.displayName="MarqueeTextContent";var E=M(u);export{i as MarqueeImageContent,p as MarqueeItem,n as MarqueeTextContent,E as default};
+"use client";import{Fragment as W,jsx as t,jsxs as M}from"react/jsx-runtime";import N,{useRef as h,useImperativeHandle as z,useLayoutEffect as E,useState as L}from"react";import{Picture as y,Text as q}from"../../components/index.js";import{cn as n}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import"swiper/css";import{useExposure as j}from"../../hooks/useExposure.js";const A="image",D="marquee",g=N.forwardRef(({data:{items:e=[],speed:s=3e3,reverseDirection:i=!1,key:p}={},className:k},P)=>{const o=h(null),C=h(null);z(P,()=>o.current),j(o,{componentType:A,componentName:D});const T=`${s*5}ms`,m="clamp(24px, 4vw, 64px)",[w,I]=L(2);return E(()=>{const a=C.current;if(!a)return;const r=()=>{const c=a.offsetWidth;if(c===0)return;const R=window.innerWidth,b=Math.ceil(R/c);I(Math.max(2,b))};r(),o.current?.style.setProperty("--track-width",`${a.offsetWidth}px`);const l=new ResizeObserver(()=>{r(),o.current?.style.setProperty("--track-width",`${a.offsetWidth}px`)});return l.observe(a),()=>l.disconnect()},[e]),t("div",{ref:o,id:p?`Marquee-${p}`:void 0,className:n("text-info-primary w-full",k),children:M("div",{className:n("flex h-full w-max items-center",i?"animate-marquee-reverse":"animate-marquee"),style:{"--marquee-duration":T},children:[t("div",{ref:C,className:"flex h-full shrink-0 items-center",style:{gap:m,paddingRight:m},children:e.map((a,r)=>t("div",{className:"shrink-0",children:t(u,{data:a})},(a?.id??"")+"-orig-"+r))}),Array.from({length:w}).map((a,r)=>t("div",{className:"flex h-full shrink-0 items-center",style:{gap:m,paddingRight:m},"aria-hidden":"true",children:e.map((l,c)=>t("div",{className:"shrink-0",children:t(u,{data:l})},(l?.id??"")+"-copy-"+r+"-"+c))},`copy-group-${r}`))]})})});g.displayName="Marquee";const u=({data:e,configuration:s})=>M(W,{children:[e.type==="image"&&t(d,{image:e?.image,imageClassName:s?.imageClassName}),e.type==="text"&&t(x,{text:e?.text,textClassName:s?.textClassName}),e.type==="iconAndText"&&t(f,{icon:e?.iconImage,text:e?.iconText,iconClassName:s?.iconClassName,textClassName:s?.textClassName}),e.type==="picture"&&t(v,{pictureImage:e?.pictureImage,pictureClassName:s?.pictureClassName})]});u.displayName="MarqueeItem";const d=({image:e,imageClassName:s})=>t("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:t(y,{source:e?.url,alt:e?.alt||"",imgClassName:n("object-cover",s)})});d.displayName="MarqueeImageContent";const x=N.forwardRef(({text:e,textClassName:s},i)=>t(q,{as:"div",ref:i,html:e,className:n("text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]",s)}));x.displayName="MarqueeTextContent";const f=({icon:e,text:s,iconClassName:i,textClassName:p})=>M("div",{className:"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1",children:[e&&t("img",{src:e?.url,alt:e?.alt||"",className:n("desktop:size-6 size-5 shrink-0 object-contain",i)}),s&&t(q,{as:"div",html:s,className:n("laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ",p)})]});f.displayName="MarqueeIconAndTextContent";const v=({pictureImage:e,pictureClassName:s})=>t("div",{className:"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0",children:t(y,{source:e?.url,alt:e?.alt||"",className:"w-full",imgClassName:n("object-contain",s)})});v.displayName="MarqueePictureContent";var G=H(g);export{f as MarqueeIconAndTextContent,d as MarqueeImageContent,u as MarqueeItem,v as MarqueePictureContent,x as MarqueeTextContent,G as default};
 //# sourceMappingURL=Marquee.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport 'swiper/css'\nimport { Autoplay } from 'swiper/modules'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  const innerRef = useRef<SwiperRef>(null)\n  useImperativeHandle(ref, () => innerRef.current as SwiperRef)\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n  })\n\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={innerRef}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
-  "mappings": "aAuDU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBAtDV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAA8B,QACnE,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,MAAO,aACP,OAAS,YAAAC,MAAgB,iBACzB,OAAS,eAAAC,MAAmB,6BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAUb,EAAM,WAAoC,CAAC,CAAE,KAAAc,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,EAAWf,EAAkB,IAAI,EACvC,OAAAD,EAAoBe,EAAK,IAAMC,EAAS,OAAoB,EAE5DP,EAAYO,EAAkD,CAC5D,cAAeN,EACf,cAAeC,CACjB,CAAC,EAGCd,EAACS,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAU,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAACL,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBK,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACI,EAAMC,IACvBrB,EAACU,EAAA,CACC,SAAAV,EAACsB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDN,EAAQ,YAAc,UAEtB,MAAMO,EAAc,CAAC,CAAE,KAAAN,EAAM,cAAAO,CAAc,IAEvCtB,EAAAF,EAAA,CACG,UAAAiB,EAAK,OAAS,SACbhB,EAACwB,EAAA,CAAoB,MAAOR,GAAM,MAAO,eAAgBO,GAAe,eAAgB,EAEzFP,EAAK,OAAS,QAAUhB,EAACyB,EAAA,CAAmB,KAAMT,GAAM,KAAM,cAAeO,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjD3B,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACK,EAAA,CAAQ,OAAQqB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcnB,EAAG,eAAgBoB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBvB,EAAM,WAAoD,CAAC,CAAE,KAAA0B,EAAM,cAAAC,CAAc,EAAGX,IAE3GlB,EAACM,EAAA,CACC,GAAG,MACH,IAAKY,EACL,KAAMU,EACN,UAAWrB,EAAG,oFAAqFsB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQtB,EAAWO,CAAO",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withLayout", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type {\n  MarqueeProps,\n  MarqueeItemProps,\n  MarqueeImageContentProps,\n  MarqueeTextContentProps,\n  MarqueeIconAndTextContentProps,\n  MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n    const innerRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n      componentType,\n      componentName,\n    })\n\n    const duration = `${speed * 5}ms`\n    const gap = 'clamp(24px, 4vw, 64px)'\n\n    const [copies, setCopies] = useState(2)\n\n    useLayoutEffect(() => {\n      const track = trackRef.current\n      if (!track) return\n\n      const calcCopies = () => {\n        const trackWidth = track.offsetWidth\n        if (trackWidth === 0) return\n        const viewportWidth = window.innerWidth\n        const minCopies = Math.ceil(viewportWidth / trackWidth)\n        setCopies(Math.max(2, minCopies))\n      }\n\n      calcCopies()\n      innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n      const ro = new ResizeObserver(() => {\n        calcCopies()\n        innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n      })\n      ro.observe(track)\n      return () => ro.disconnect()\n    }, [items])\n\n    return (\n      <div\n        ref={innerRef}\n        id={dataKey ? `Marquee-${dataKey}` : undefined}\n        className={cn('text-info-primary w-full', className)}\n      >\n        <div\n          className={cn(\n            'flex h-full w-max items-center',\n            reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n          )}\n          style={{ '--marquee-duration': duration } as React.CSSProperties}\n        >\n          {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n          <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n            {items.map((item, index) => (\n              <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n                <MarqueeItem data={item} />\n              </div>\n            ))}\n          </div>\n\n          {Array.from({ length: copies }).map((_, copyIndex) => (\n            <div\n              key={`copy-group-${copyIndex}`}\n              className=\"flex h-full shrink-0 items-center\"\n              style={{ gap, paddingRight: gap }}\n              aria-hidden=\"true\"\n            >\n              {items.map((item, index) => (\n                <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n                  <MarqueeItem data={item} />\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n      {data.type === 'iconAndText' && (\n        <MarqueeIconAndTextContent\n          icon={data?.iconImage}\n          text={data?.iconText}\n          iconClassName={configuration?.iconClassName}\n          textClassName={configuration?.textClassName}\n        />\n      )}\n      {data.type === 'picture' && (\n        <MarqueePictureContent pictureImage={data?.pictureImage} pictureClassName={configuration?.pictureClassName} />\n      )}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-bold leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nconst MarqueeIconAndTextContent = ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps) => {\n  return (\n    <div className=\"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1\">\n      {icon && (\n        <img\n          src={icon?.url}\n          alt={icon?.alt || ''}\n          className={cn('desktop:size-6 size-5 shrink-0 object-contain', iconClassName)}\n        />\n      )}\n      {text && (\n        <Text\n          as=\"div\"\n          html={text}\n          className={cn(\n            'laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ',\n            textClassName\n          )}\n        />\n      )}\n    </div>\n  )\n}\n\nMarqueeIconAndTextContent.displayName = 'MarqueeIconAndTextContent'\n\nconst MarqueePictureContent = ({ pictureImage, pictureClassName }: MarqueePictureContentProps) => {\n  return (\n    <div className=\"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0\">\n      <Picture\n        source={pictureImage?.url}\n        alt={pictureImage?.alt || ''}\n        className=\"w-full\"\n        imgClassName={cn('object-contain', pictureClassName)}\n      />\n    </div>\n  )\n}\n\nMarqueePictureContent.displayName = 'MarqueePictureContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "useLayoutEffect", "useState", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "Marquee", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "MarqueeItem", "_", "copyIndex", "data", "configuration", "MarqueeImageContent", "MarqueeTextContent", "MarqueeIconAndTextContent", "MarqueePictureContent", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName", "Marquee_default"]
 }

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

@@ -1,2 +1,2 @@
 export { default } from './Marquee.js';
-export { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee.js';
+export { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent, } from './Marquee.js';

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

@@ -1,2 +1,2 @@
-import{default as r}from"./Marquee.js";import{MarqueeItem as a,MarqueeImageContent as m,MarqueeTextContent as n}from"./Marquee.js";export{m as MarqueeImageContent,a as MarqueeItem,n as MarqueeTextContent,r as default};
+import{default as n}from"./Marquee.js";import{MarqueeItem as o,MarqueeImageContent as a,MarqueeTextContent as u,MarqueeIconAndTextContent as q,MarqueePictureContent as M}from"./Marquee.js";export{q as MarqueeIconAndTextContent,a as MarqueeImageContent,o as MarqueeItem,M as MarqueePictureContent,u as MarqueeTextContent,n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/index.ts"],
-  "sourcesContent": ["export { default } from './Marquee.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee.js'\n"],
-  "mappings": "AAAA,OAAS,WAAAA,MAAe,eACxB,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B",
-  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent"]
+  "sourcesContent": ["export { default } from './Marquee.js'\nexport {\n  MarqueeItem,\n  MarqueeImageContent,\n  MarqueeTextContent,\n  MarqueeIconAndTextContent,\n  MarqueePictureContent,\n} from './Marquee.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,eACxB,OACE,eAAAC,EACA,uBAAAC,EACA,sBAAAC,EACA,6BAAAC,EACA,yBAAAC,MACK",
+  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "MarqueeIconAndTextContent", "MarqueePictureContent"]
 }

package/dist/esm/biz-components/Marquee/type.d.ts

@@ -2,9 +2,11 @@ import type { Img } from '../../types/props.js';
 interface MarqueeProps {
     data: {
         key?: string;
-        /** 是否反向 */
+        /** 是否反向滚动 */
         reverseDirection?: boolean;
-        /** 速度 */
+        /**
+         * 一轮动画时长（ms）。数值越小滚动越快，默认 8000（即 8s 完成一轮）
+         */
         speed?: number;
         /** 跑马灯内容 */
         items: any[];
@@ -13,13 +15,19 @@ interface MarqueeProps {
 }
 interface MarqueeItemProps {
     data: {
-        type: 'image' | 'text';
+        id?: string;
+        type: 'image' | 'text' | 'iconAndText' | 'picture';
         image?: Img;
         text?: string;
+        iconImage?: Img;
+        iconText?: string;
+        pictureImage?: Img;
     };
     configuration?: {
         imageClassName?: string;
         textClassName?: string;
+        iconClassName?: string;
+        pictureClassName?: string;
     };
 }
 interface MarqueeImageContentProps {
@@ -30,4 +38,14 @@ interface MarqueeTextContentProps {
     text?: string;
     textClassName?: string;
 }
-export type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps };
+interface MarqueeIconAndTextContentProps {
+    icon?: Img;
+    text?: string;
+    iconClassName?: string;
+    textClassName?: string;
+}
+interface MarqueePictureContentProps {
+    pictureImage?: Img;
+    pictureClassName?: string;
+}
+export type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps, MarqueeIconAndTextContentProps, MarqueePictureContentProps, };

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as a}from"react/jsx-runtime";import C from"react";import{useMediaQuery as s}from"react-responsive";import{Picture as D}from"../../components/index.js";import{cn as n}from"../../helpers/index.js";const u=C.forwardRef(({pcImage:t,desktopImage:e,laptopImage:i,padImage:o,mobileImage:r,className:c,videoClassName:p,imgClassName:y,muted:f=!0,loop:m=!0,playsInline:M=!0,autoPlay:v=!0,poster:T,videoRef:P,onVideoPlay:x,onVideoPause:b,onVideoEnded:w,...N},h)=>{const S=s({query:"(max-width: 767px)"}),R=s({query:"(min-width: 768px)"}),q=s({query:"(min-width: 1025px)"}),E=s({query:"(min-width: 1440px)"}),L=s({query:"(min-width: 1920px)"}),V=[t,e,i,o,r].some(z=>z?.mimeType==="video/mp4"),d=L?t:E?e:q?i:R?o:r,l=d||t||e||i||o||r,j=l?.mimeType==="video/mp4"?l.url:void 0,H=T||(l?.mimeType!=="video/mp4"?l?.url:void 0),$=[r?.url&&`${r.url} 768`,o?.url&&`${o.url} 1025`,i?.url&&`${i.url} 1440`,e?.url&&`${e.url} 1920`,t?.url].filter(Boolean).reverse().join(" , ");return a("div",{ref:h,className:n("media-wrapper",c),...N,children:V?a("video",{ref:P,src:j,poster:H,className:n("size-full object-cover",p),muted:f,loop:m,playsInline:M,autoPlay:v,"aria-label":d?.alt||"",onPlay:x,onPause:b,onEnded:w}):a(D,{className:"size-full",imgClassName:n("size-full object-cover",y),alt:t?.alt||e?.alt||i?.alt||o?.alt||r?.alt||"",source:$})})});u.displayName="Media";var G=u;export{G as default};
+"use client";import{jsx as a}from"react/jsx-runtime";import C from"react";import{useMediaQuery as s}from"react-responsive";import{Picture as D}from"../../components/index.js";import{cn as n}from"../../helpers/index.js";const u=C.forwardRef(({pcImage:t,desktopImage:e,laptopImage:i,padImage:o,mobileImage:r,className:c,videoClassName:p,imgClassName:y,muted:m=!0,loop:f=!0,playsInline:M=!0,autoPlay:v=!0,poster:x,videoRef:T,onVideoPlay:P,onVideoPause:w,onVideoEnded:h,...b},N)=>{const S=s({query:"(max-width: 767px)"}),R=s({query:"(min-width: 768px) and (max-width: 1024px)"}),q=s({query:"(min-width: 1025px) and (max-width: 1439px)"}),E=s({query:"(min-width: 1440px) and (max-width: 1919px)"}),L=s({query:"(min-width: 1920px)"}),V=[t,e,i,o,r].some(z=>z?.mimeType==="video/mp4"),d=L?t:E?e:q?i:R?o:r,l=d||t||e||i||o||r,j=l?.mimeType==="video/mp4"?l.url:void 0,H=x||(l?.mimeType!=="video/mp4"?l?.url:void 0),$=[r?.url&&`${r.url} 768`,o?.url&&`${o.url} 1025`,i?.url&&`${i.url} 1440`,e?.url&&`${e.url} 1920`,t?.url].filter(Boolean).reverse().join(" , ");return a("div",{ref:N,className:n("media-wrapper",c),...b,children:V?a("video",{ref:T,src:j,poster:H,className:n("size-full object-cover",p),muted:m,loop:f,playsInline:M,autoPlay:v,"aria-label":d?.alt||"",onPlay:P,onPause:w,onEnded:h}):a(D,{className:"size-full",imgClassName:n("size-full object-cover",y),alt:t?.alt||e?.alt||i?.alt||o?.alt||r?.alt||"",source:$})})});u.displayName="Media";var G=u;export{G as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Media/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n  pcImage?: MediaType\n  /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n  desktopImage?: MediaType\n  /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n  laptopImage?: MediaType\n  /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n  padImage?: MediaType\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n  mobileImage?: MediaType\n  /** \u89C6\u9891\u7C7B\u540D */\n  videoClassName?: string\n  /** \u56FE\u7247\u7C7B\u540D */\n  imgClassName?: string\n  /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  muted?: boolean\n  /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  loop?: boolean\n  /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  playsInline?: boolean\n  /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  autoPlay?: boolean\n  /** \u89C6\u9891\u9884\u89C8\u56FE */\n  poster?: string\n  /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n  videoRef?: React.RefObject<HTMLVideoElement>\n  /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n  onVideoPlay?: () => void\n  /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n  onVideoPause?: () => void\n  /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n  onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n  (\n    {\n      pcImage,\n      desktopImage,\n      laptopImage,\n      padImage,\n      mobileImage,\n      className,\n      videoClassName,\n      imgClassName,\n      muted = true,\n      loop = true,\n      playsInline = true,\n      autoPlay = true,\n      poster,\n      videoRef,\n      onVideoPlay,\n      onVideoPause,\n      onVideoEnded,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n    const isPad = useMediaQuery({ query: '(min-width: 768px)' })\n    const isLaptop = useMediaQuery({ query: '(min-width: 1025px)' })\n    const isDesktop = useMediaQuery({ query: '(min-width: 1440px)' })\n    const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n    const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n    const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n    const currentMedia = isPc\n      ? pcImage\n      : isDesktop\n        ? desktopImage\n        : isLaptop\n          ? laptopImage\n          : isPad\n            ? padImage\n            : mobileImage\n\n    const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n    const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n    const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n\n    const pictureSource = [\n      mobileImage?.url && `${mobileImage.url} 768`,\n      padImage?.url && `${padImage.url} 1025`,\n      laptopImage?.url && `${laptopImage.url} 1440`,\n      desktopImage?.url && `${desktopImage.url} 1920`,\n      pcImage?.url,\n    ]\n      .filter(Boolean)\n      .reverse()\n      .join(' , ')\n\n    return (\n      <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n        {hasVideo ? (\n          <video\n            ref={videoRef}\n            src={videoSrc}\n            poster={imagePoster}\n            className={cn('size-full object-cover', videoClassName)}\n            muted={muted}\n            loop={loop}\n            playsInline={playsInline}\n            autoPlay={autoPlay}\n            aria-label={currentMedia?.alt || ''}\n            onPlay={onVideoPlay}\n            onPause={onVideoPause}\n            onEnded={onVideoEnded}\n          />\n        ) : (\n          <Picture\n            className=\"size-full\"\n            imgClassName={cn('size-full object-cover', imgClassName)}\n            alt={pcImage?.alt || desktopImage?.alt || laptopImage?.alt || padImage?.alt || mobileImage?.alt || ''}\n            source={pictureSource}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
-  "mappings": "aA+GU,cAAAA,MAAA,oBA7GV,OAAOC,MAAW,QAClB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,MAAe,4BAExB,OAAS,MAAAC,MAAU,yBA2CnB,MAAMC,EAAQJ,EAAM,WAClB,CACE,CACE,QAAAK,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAWvB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDwB,EAAQxB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACrDyB,EAAWzB,EAAc,CAAE,MAAO,qBAAsB,CAAC,EACzD0B,EAAY1B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAC1D2B,EAAO3B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrD4B,EADY,CAACxB,EAASC,EAAcC,EAAaC,EAAUC,CAAW,EACjD,KAAKqB,GAASA,GAAO,WAAa,WAAW,EAElEC,EAAeH,EACjBvB,EACAsB,EACErB,EACAoB,EACEnB,EACAkB,EACEjB,EACAC,EAEJuB,EAAgBD,GAAgB1B,GAAWC,GAAgBC,GAAeC,GAAYC,EAEtFwB,EAAWD,GAAe,WAAa,YAAcA,EAAc,IAAM,OACzEE,EAAcjB,IAAWe,GAAe,WAAa,YAAcA,GAAe,IAAM,QAExFG,EAAgB,CACpB1B,GAAa,KAAO,GAAGA,EAAY,GAAG,OACtCD,GAAU,KAAO,GAAGA,EAAS,GAAG,QAChCD,GAAa,KAAO,GAAGA,EAAY,GAAG,QACtCD,GAAc,KAAO,GAAGA,EAAa,GAAG,QACxCD,GAAS,GACX,EACG,OAAO,OAAO,EACd,QAAQ,EACR,KAAK,KAAK,EAEb,OACEN,EAAC,OAAI,IAAKwB,EAAK,UAAWpB,EAAG,gBAAiBO,CAAS,EAAI,GAAGY,EAC3D,SAAAO,EACC9B,EAAC,SACC,IAAKmB,EACL,IAAKe,EACL,OAAQC,EACR,UAAW/B,EAAG,yBAA0BQ,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,EAEAtB,EAACG,EAAA,CACC,UAAU,YACV,aAAcC,EAAG,yBAA0BS,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEA/B,EAAM,YAAc,QAEpB,IAAOgC,EAAQhC",
+  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n  pcImage?: MediaType\n  /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n  desktopImage?: MediaType\n  /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n  laptopImage?: MediaType\n  /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n  padImage?: MediaType\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n  mobileImage?: MediaType\n  /** \u89C6\u9891\u7C7B\u540D */\n  videoClassName?: string\n  /** \u56FE\u7247\u7C7B\u540D */\n  imgClassName?: string\n  /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  muted?: boolean\n  /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  loop?: boolean\n  /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  playsInline?: boolean\n  /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  autoPlay?: boolean\n  /** \u89C6\u9891\u9884\u89C8\u56FE */\n  poster?: string\n  /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n  videoRef?: React.RefObject<HTMLVideoElement>\n  /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n  onVideoPlay?: () => void\n  /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n  onVideoPause?: () => void\n  /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n  onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n  (\n    {\n      pcImage,\n      desktopImage,\n      laptopImage,\n      padImage,\n      mobileImage,\n      className,\n      videoClassName,\n      imgClassName,\n      muted = true,\n      loop = true,\n      playsInline = true,\n      autoPlay = true,\n      poster,\n      videoRef,\n      onVideoPlay,\n      onVideoPause,\n      onVideoEnded,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n    const isPad = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n    const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n    const isDesktop = useMediaQuery({ query: '(min-width: 1440px) and (max-width: 1919px)' })\n    const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n    const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n    const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n    const currentMedia = isPc\n      ? pcImage\n      : isDesktop\n        ? desktopImage\n        : isLaptop\n          ? laptopImage\n          : isPad\n            ? padImage\n            : mobileImage\n\n    const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n    const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n    const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n\n    const pictureSource = [\n      mobileImage?.url && `${mobileImage.url} 768`,\n      padImage?.url && `${padImage.url} 1025`,\n      laptopImage?.url && `${laptopImage.url} 1440`,\n      desktopImage?.url && `${desktopImage.url} 1920`,\n      pcImage?.url,\n    ]\n      .filter(Boolean)\n      .reverse()\n      .join(' , ')\n\n    return (\n      <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n        {hasVideo ? (\n          <video\n            ref={videoRef}\n            src={videoSrc}\n            poster={imagePoster}\n            className={cn('size-full object-cover', videoClassName)}\n            muted={muted}\n            loop={loop}\n            playsInline={playsInline}\n            autoPlay={autoPlay}\n            aria-label={currentMedia?.alt || ''}\n            onPlay={onVideoPlay}\n            onPause={onVideoPause}\n            onEnded={onVideoEnded}\n          />\n        ) : (\n          <Picture\n            className=\"size-full\"\n            imgClassName={cn('size-full object-cover', imgClassName)}\n            alt={pcImage?.alt || desktopImage?.alt || laptopImage?.alt || padImage?.alt || mobileImage?.alt || ''}\n            source={pictureSource}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
+  "mappings": "aA+GU,cAAAA,MAAA,oBA7GV,OAAOC,MAAW,QAClB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,MAAe,4BAExB,OAAS,MAAAC,MAAU,yBA2CnB,MAAMC,EAAQJ,EAAM,WAClB,CACE,CACE,QAAAK,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAWvB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDwB,EAAQxB,EAAc,CAAE,MAAO,4CAA6C,CAAC,EAC7EyB,EAAWzB,EAAc,CAAE,MAAO,6CAA8C,CAAC,EACjF0B,EAAY1B,EAAc,CAAE,MAAO,6CAA8C,CAAC,EAClF2B,EAAO3B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrD4B,EADY,CAACxB,EAASC,EAAcC,EAAaC,EAAUC,CAAW,EACjD,KAAKqB,GAASA,GAAO,WAAa,WAAW,EAElEC,EAAeH,EACjBvB,EACAsB,EACErB,EACAoB,EACEnB,EACAkB,EACEjB,EACAC,EAEJuB,EAAgBD,GAAgB1B,GAAWC,GAAgBC,GAAeC,GAAYC,EAEtFwB,EAAWD,GAAe,WAAa,YAAcA,EAAc,IAAM,OACzEE,EAAcjB,IAAWe,GAAe,WAAa,YAAcA,GAAe,IAAM,QAExFG,EAAgB,CACpB1B,GAAa,KAAO,GAAGA,EAAY,GAAG,OACtCD,GAAU,KAAO,GAAGA,EAAS,GAAG,QAChCD,GAAa,KAAO,GAAGA,EAAY,GAAG,QACtCD,GAAc,KAAO,GAAGA,EAAa,GAAG,QACxCD,GAAS,GACX,EACG,OAAO,OAAO,EACd,QAAQ,EACR,KAAK,KAAK,EAEb,OACEN,EAAC,OAAI,IAAKwB,EAAK,UAAWpB,EAAG,gBAAiBO,CAAS,EAAI,GAAGY,EAC3D,SAAAO,EACC9B,EAAC,SACC,IAAKmB,EACL,IAAKe,EACL,OAAQC,EACR,UAAW/B,EAAG,yBAA0BQ,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,EAEAtB,EAACG,EAAA,CACC,UAAU,YACV,aAAcC,EAAG,yBAA0BS,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEA/B,EAAM,YAAc,QAEpB,IAAOgC,EAAQhC",
   "names": ["jsx", "React", "useMediaQuery", "Picture", "cn", "Media", "pcImage", "desktopImage", "laptopImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "videoRef", "onVideoPlay", "onVideoPause", "onVideoEnded", "props", "ref", "isMobile", "isPad", "isLaptop", "isDesktop", "isPc", "hasVideo", "media", "currentMedia", "fallbackMedia", "videoSrc", "imagePoster", "pictureSource", "Media_default"]
 }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MediaTextOverlayProps } from './types.js';
+import 'swiper/css';
+import 'swiper/css/navigation';
+declare const _default: React.ForwardRefExoticComponent<Omit<MediaTextOverlayProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
+    readonly $$typeof: symbol;
+};
+export default _default;
+export type { MediaTextOverlayProps };

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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import N,{useRef as B,useMemo as C,useState as M,useEffect as E,useCallback as T}from"react";import{withLayout as O}from"../../shared/Styles.js";import{cn as g}from"../../helpers/utils.js";import{useExposure as S}from"../../hooks/useExposure.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as $}from"../../components/index.js";import{Swiper as R,SwiperSlide as j}from"swiper/react";import{Navigation as A}from"swiper/modules";const D=({disabled:l})=>p("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),H=({disabled:l})=>p("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),W="video",Z="media_text_overlay",_=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),F=()=>p("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),e("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),q=({data:l,configuration:r,jIndex:w,classNames:d={}})=>{const v=B(null),c=B(null),{content:s,media:o}=l,x=r?.theme||"light",b=r?.size||"lg",k=r?.onlyOne||!1,m=r?.isAutoPlay??!0,[f,n]=M(!1);S(v,{componentType:W,componentName:Z,position:w,componentTitle:s,navigation:r?.activeTab});const a=C(()=>[o.lgDesktop,o.desktop,o.laptop,o.pad,o.mobile].some(i=>i?.mimeType==="video/mp4"),[o]),P=T(()=>{const i=c.current;i&&(i.paused?(i.play(),n(!0)):(i.pause(),n(!1)))},[]);return E(()=>{const i=c.current;if(!i||!a||!m)return;const u=new IntersectionObserver(t=>{t.forEach(h=>{h.isIntersecting?i.play().catch(I=>{console.warn("Video autoplay failed:",I)}):i.pause()})},{threshold:.5});return u.observe(i),()=>{u.disconnect()}},[a,m]),p("div",{className:g("item-wrapper rounded-box group relative box-border w-full overflow-hidden",k?{lg:"h-[400px] laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[b]:"desktop:h-[384px] lg-desktop:h-[480px] h-[360px]",{"aiui-dark":x==="dark"}),ref:v,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:o.lgDesktop||o.desktop,desktopImage:o.desktop,laptopImage:o.laptop,padImage:o.pad,mobileImage:o.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:c,muted:!0,loop:!0,playsInline:!0,autoPlay:m,onVideoPlay:()=>n(!0),onVideoPause:()=>n(!1),onVideoEnded:()=>n(!1)})}),a&&e("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:e("button",{type:"button","aria-label":f?"Pause video":"Play video",onClick:P,className:g("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",d.playButton),children:f?e(F,{}):e(_,{})})}),e("div",{className:g("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",d.overlay),children:e("div",{className:g("flex items-end justify-between gap-4",d.content),children:e($,{size:2,html:s,className:"line-clamp-3"})})})]})},z=N.forwardRef((l,r)=>{const{data:w,className:d,classNames:v={},...c}=l,{items:s=[],theme:o="dark",size:x="sm",isShowPagination:b=!0,isAutoPlay:k=!0}=w,{locale:m="us"}=L(),f=B(null),[n,a]=M({isBeginning:!0,isEnd:!1}),P=C(()=>{const t=s?.length||0;return{0:{spaceBetween:12,slidesPerView:t>1?1.2:1},768:{spaceBetween:12,slidesPerView:t>2?2.3:t>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(t,3)},1440:{spaceBetween:16,slidesPerView:Math.min(t,4)},1920:{spaceBetween:16,slidesPerView:Math.min(t,4)}}},[s?.length]),y=N.useId().replace(/:/g,""),i=`${y}-custom-swiper-button-next`,u=`${y}-custom-swiper-button-prev`;return e("section",{"data-ui-component-id":"MediaTextOverlay",ref:r,...c,className:g("mediaTextOverlayBlock text-info-primary",d,v.root),children:s&&s.length>0?p("div",{className:"group relative",children:[e(R,{className:"!overflow-visible",modules:[A],navigation:{nextEl:`.${i}`,prevEl:`.${u}`},onSwiper:t=>{f.current=t,a({isBeginning:t.isBeginning,isEnd:t.isEnd})},onReachEnd:()=>{a(t=>({...t,isEnd:!0}))},onReachBeginning:()=>{a(t=>({...t,isBeginning:!0}))},onFromEdge:()=>{a({isBeginning:!1,isEnd:!1})},breakpoints:P,children:s.map((t,h)=>e(j,{className:"!flex !h-[unset]",children:e(q,{data:t,configuration:{theme:o,size:x,num:s.length,locale:m,onlyOne:s.length===1,index:h,isAutoPlay:k},jIndex:h})},`${y}-SwiperSlide-${h}`))}),b&&s.length>1&&p(G,{children:[e("button",{className:`${u} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${n.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(D,{disabled:n.isBeginning})}),e("button",{className:`${i} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${n.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(H,{disabled:n.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var ne=O(z);export{ne as default};
+//# sourceMappingURL=MediaTextOverlay.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaTextOverlay/MediaTextOverlay.tsx"],
+  "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\ninterface ItemBlockProps {\n  data: MediaTextOverlayItem\n  configuration?: any\n  jIndex?: number\n  classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const { content, media } = item\n  const theme = configuration?.theme || 'light'\n  const size = configuration?.size || 'lg'\n  const onlyOne = configuration?.onlyOne || false\n  const isAutoPlay = configuration?.isAutoPlay ?? true\n\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    position: jIndex,\n    componentTitle: content,\n    navigation: configuration?.activeTab,\n  })\n\n  const hasVideo = useMemo(\n    () =>\n      [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n    [media]\n  )\n\n  const handlePlayButtonClick = useCallback(() => {\n    const video = videoRef.current\n    if (video) {\n      if (video.paused) {\n        video.play()\n        setIsPlaying(true)\n      } else {\n        video.pause()\n        setIsPlaying(false)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video || !hasVideo || !isAutoPlay) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            video.play().catch(error => {\n              console.warn('Video autoplay failed:', error)\n            })\n          } else {\n            video.pause()\n          }\n        })\n      },\n      { threshold: 0.5 }\n    )\n\n    observer.observe(video)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasVideo, isAutoPlay])\n\n  const sizeClasses = {\n    lg: 'h-[400px] laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]',\n    sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n  }\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n        onlyOne ? sizeClasses[size as keyof typeof sizeClasses] : 'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n        {\n          'aiui-dark': theme === 'dark',\n        }\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Media\n          pcImage={media.lgDesktop || media.desktop}\n          desktopImage={media.desktop}\n          laptopImage={media.laptop}\n          padImage={media.pad}\n          mobileImage={media.mobile}\n          videoClassName=\"absolute inset-0 size-full object-cover\"\n          imgClassName=\"absolute inset-0 size-full object-cover\"\n          videoRef={videoRef}\n          muted={true}\n          loop={true}\n          playsInline={true}\n          autoPlay={isAutoPlay}\n          onVideoPlay={() => setIsPlaying(true)}\n          onVideoPause={() => setIsPlaying(false)}\n          onVideoEnded={() => setIsPlaying(false)}\n        />\n      </div>\n\n      {hasVideo && (\n        <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n          <button\n            type=\"button\"\n            aria-label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayButtonClick}\n            className={cn(\n              'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n              classNames.playButton\n            )}\n          >\n            {isPlaying ? <PauseIcon /> : <PlayIcon />}\n          </button>\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20',\n          classNames.overlay\n        )}\n      >\n        <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n          <Heading size={2} html={content} className=\"line-clamp-3\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n  const { data, className, classNames = {}, ...rest } = props\n  const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n  const { locale = 'us' } = useAiuiContext()\n  const swiperRef = useRef<any>(null)\n  const [swiperState, setSwiperState] = useState({\n    isBeginning: true,\n    isEnd: false,\n  })\n\n  const breakpoints = useMemo(() => {\n    const len = items?.length || 0\n    return {\n      0: {\n        spaceBetween: 12,\n        slidesPerView: len > 1 ? 1.2 : 1,\n      },\n      768: {\n        spaceBetween: 12,\n        slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n      },\n      1024: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 3),\n      },\n      1440: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n      1920: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n    }\n  }, [items?.length])\n\n  // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n  const id = React.useId().replace(/:/g, '')\n  const nextButtonClass = `${id}-custom-swiper-button-next`\n  const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n  return (\n    <section\n      data-ui-component-id=\"MediaTextOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n    >\n      {items && items.length > 0 ? (\n        <div className=\"group relative\">\n          <Swiper\n            className=\"!overflow-visible\"\n            modules={[Navigation]}\n            navigation={{\n              nextEl: `.${nextButtonClass}`,\n              prevEl: `.${prevButtonClass}`,\n            }}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n              setSwiperState({\n                isBeginning: swiper.isBeginning,\n                isEnd: swiper.isEnd,\n              })\n            }}\n            onReachEnd={() => {\n              setSwiperState(prev => ({ ...prev, isEnd: true }))\n            }}\n            onReachBeginning={() => {\n              setSwiperState(prev => ({ ...prev, isBeginning: true }))\n            }}\n            onFromEdge={() => {\n              setSwiperState({ isBeginning: false, isEnd: false })\n            }}\n            breakpoints={breakpoints}\n          >\n            {items.map((item, jIndex) => (\n              <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    theme,\n                    size,\n                    num: items.length,\n                    locale,\n                    onlyOne: items.length === 1,\n                    index: jIndex,\n                    isAutoPlay,\n                  }}\n                  jIndex={jIndex}\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {isShowPagination && items.length > 1 && (\n            <>\n              <button\n                className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Previous slide\"\n              >\n                <PrevIcon disabled={swiperState.isBeginning} />\n              </button>\n              <button\n                className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Next slide\"\n              >\n                <NextIcon disabled={swiperState.isEnd} />\n              </button>\n            </>\n          )}\n        </div>\n      ) : null}\n    </section>\n  )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "size", "onlyOne", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
+}

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

@@ -0,0 +1,2 @@
+export { default } from './MediaTextOverlay.js';
+export type { MediaTextOverlayProps, MediaTextOverlayData, MediaTextOverlayItem, MediaTextOverlaySemanticName, ResponsiveMedia, } from './types.js';

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

@@ -0,0 +1,2 @@
+import{default as t}from"./MediaTextOverlay.js";export{t as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaTextOverlay/index.tsx"],
+  "sourcesContent": ["export { default } from './MediaTextOverlay.js'\nexport type {\n  MediaTextOverlayProps,\n  MediaTextOverlayData,\n  MediaTextOverlayItem,\n  MediaTextOverlaySemanticName,\n  ResponsiveMedia,\n} from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
+  "names": ["default"]
+}

package/dist/esm/biz-components/MediaTextOverlay/types.d.ts

@@ -0,0 +1,24 @@
+import type { Media, Theme } from '../../types/props.js';
+export type MediaTextOverlaySemanticName = 'root' | 'mediaContainer' | 'media' | 'overlay' | 'content' | 'playButton';
+export interface ResponsiveMedia {
+    lgDesktop?: Media;
+    desktop?: Media;
+    laptop?: Media;
+    pad?: Media;
+    mobile?: Media;
+}
+export interface MediaTextOverlayItem {
+    content: string;
+    media: ResponsiveMedia;
+}
+export interface MediaTextOverlayData {
+    items: MediaTextOverlayItem[];
+    theme?: Theme;
+    size?: 'lg' | 'sm';
+    isShowPagination?: boolean;
+    isAutoPlay?: boolean;
+}
+export interface MediaTextOverlayProps extends React.HTMLAttributes<HTMLElement> {
+    data: MediaTextOverlayData;
+    classNames?: Partial<Record<MediaTextOverlaySemanticName, string>>;
+}

package/dist/esm/biz-components/MediaTextOverlay/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/MediaTextOverlay/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as be}from"react/jsx-runtime";import ne,{useState as L,useEffect as y,useRef as g,useImperativeHandle as se}from"react";import{cn as ae}from"../../helpers/utils.js";import{Tabs as re,TabsList as ie,TabsTrigger as oe}from"../../components/tabs.js";import le from"../Title/index.js";import ce from"../SwiperBox/index.js";import{withLayout as me}from"../../shared/Styles.js";import{gaTrack as V}from"../../shared/track.js";import{useMediaQuery as fe}from"react-responsive";import{useRollout as pe}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as ue,ShelfDisplayHorizontalItem as de}from"./shelfDisplayItem.js";const he="image",ge="product_shelf",we=f=>f==null?"default":String(f).replace(/[^a-zA-Z0-9_-]/g,"")||"default",_e=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,B=ne.forwardRef(({key:f,data:p,event:E,buildData:T,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:$,isDisplayGudgments:S=!1,isDisplayBackImage:q=!1,onAddCart:O,onBuyNow:K,onLearnMore:Q,...W},Z)=>{const{productsTab:a=[],productsCard:v=[],title:k,isShowTab:u=!0,tabShape:j="square",isShowTag:F=!1,isShowOriginalPrice:G=!0,isShowRecommendedCard:I=!1,...J}=p,[d,R]=L(""),[r,w]=L([]),D=g(!1),_=g(!1),M=g(null),U=g(_e()),X=fe({query:"(max-width: 768px)"}),[Y,x]=pe({threshold:0}),h=r?.length<=1&&S,c=!X&&r?.length<=2&&S,b=e=>{switch(e){case 1440:return c?r?.length:4;case 1024:return c?r?.length:3;default:return c?r?.length:2.3}},P=()=>{V({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,t)=>{const s=e?.variants?.find(n=>n?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:t+1}})}})},m=(e,t)=>{if(t){const o=i?.map?.(s=>({...s,isShowRecommended:!0}));w(o?.length?o||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(n=>{const H=T?.products?.find(te=>te?.handle===n?.handle);if(H)return{sku:n.sku,isShowRecommended:!1,custom_name:n.custom_name,custom_description:n.custom_description,custom_image:n.custom_image,custom_theme:n.custom_theme,custom_primary_link:n?.custom_primary_link||"",custom_secondary_link:n?.custom_secondary_link||"",...H}})?.filter(n=>n);w(s?.length?s||[]:[])}else w([])};se(Z,()=>M.current),y(()=>{x&&i?.length&&!D.current&&(D.current=!0,P())},[x,i]),y(()=>{if(!_.current){if(!_.current&&i?.length&&(_.current=!0),u){const e=a?.find(t=>t?.tab===d)||a?.[0];R(e?.tab||""),m(e?.data||[],e?.isShowRecommendedTab);return}m(v,I)}},[i]),y(()=>{if(u){const e=a?.find(t=>t?.tab===d)||a?.[0];m(e?.data||[],e?.isShowRecommendedTab);return}m(v,I)},[T]);const ee=we(d),C=`${U.current}-${ee}`;return be("div",{ref:M,...W,className:ae("shelf-display-wrap text-info-primary w-full",z,{"aiui-dark":p?.theme==="dark"}),children:[k&&l(le,{data:{title:k}}),u&&a?.length>0&&l(re,{value:d,onValueChange:e=>{const t=a?.find(o=>o?.tab===e);if(t){if(R(e),m(t.data||[],t.isShowRecommendedTab),!t.isShowRecommendedTab){V({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:he,component_name:ge,component_title:p?.title,component_position:1,navigation:e}});return}P()}},shape:j==="rounded"?"rounded":"square",children:l(ie,{children:a.map(e=>l(oe,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),l("div",{ref:Y,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:l(ce,{data:{list:r,configuration:{...J,event:E,isShowTag:F,isShowOriginalPrice:G,target:A,metafields:$,itemLength:r?.length,isDisplayBackImage:q,onAddCart:O,onBuyNow:K,onLearnMore:Q}},id:C,className:`${u?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:c?"flex-1":"",Slide:c?de:ue,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h?1:1.2},768:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b()},1024:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1024)},1440:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1440)}}},C)})]})});B.displayName="ShelfDisplay";var Pe=me(B);export{Pe as default};
+"use client";import{jsx as l,jsxs as be}from"react/jsx-runtime";import se,{useState as L,useEffect as y,useRef as g,useImperativeHandle as ne}from"react";import{cn as ae}from"../../helpers/utils.js";import{Tabs as re,TabsList as ie,TabsTrigger as oe}from"../../components/tabs.js";import le from"../Title/index.js";import ce from"../SwiperBox/index.js";import{withLayout as me}from"../../shared/Styles.js";import{gaTrack as V}from"../../shared/track.js";import{useMediaQuery as fe}from"react-responsive";import{useRollout as pe}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as ue,ShelfDisplayHorizontalItem as de}from"./shelfDisplayItem.js";const he="image",ge="product_shelf",_e=f=>f==null?"default":String(f).replace(/[^a-zA-Z0-9_-]/g,"")||"default",we=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,B=se.forwardRef(({key:f,data:p,event:E,buildData:T,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:$,isDisplayGudgments:S=!1,isDisplayBackImage:q=!1,onAddCart:O,onBuyNow:K,onLearnMore:Q,...W},Z)=>{const{productsTab:a=[],productsCard:v=[],title:k,isShowTab:u=!0,tabShape:j="square",isShowTag:F=!1,isShowOriginalPrice:G=!0,isShowRecommendedCard:I=!1,...J}=p,[d,R]=L(""),[r,_]=L([]),D=g(!1),w=g(!1),M=g(null),U=g(we()),X=fe({query:"(max-width: 768px)"}),[Y,x]=pe({threshold:0}),h=r?.length<=1&&S,c=!X&&r?.length<=2&&S,b=e=>{switch(e){case 1440:return c?r?.length:4;case 1024:return c?r?.length:3;default:return c?r?.length:2.3}},P=()=>{V({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,s)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:s+1}})}})},m=(e,s)=>{if(s){const o=i?.map?.(n=>({...n,isShowRecommended:!0}));_(o?.length?o||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=T?.products?.find(te=>te?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,custom_primary_link:t?.custom_primary_link||"",custom_secondary_link:t?.custom_secondary_link||"",custom_bg_image:t?.custom_bg_image||"",...H}})?.filter(t=>t);_(n?.length?n||[]:[])}else _([])};ne(Z,()=>M.current),y(()=>{x&&i?.length&&!D.current&&(D.current=!0,P())},[x,i]),y(()=>{if(!w.current){if(!w.current&&i?.length&&(w.current=!0),u){const e=a?.find(s=>s?.tab===d)||a?.[0];R(e?.tab||""),m(e?.data||[],e?.isShowRecommendedTab);return}m(v,I)}},[i]),y(()=>{if(u){const e=a?.find(s=>s?.tab===d)||a?.[0];m(e?.data||[],e?.isShowRecommendedTab);return}m(v,I)},[T]);const ee=_e(d),C=`${U.current}-${ee}`;return be("div",{ref:M,...W,className:ae("shelf-display-wrap text-info-primary w-full",z,{"aiui-dark":p?.theme==="dark"}),children:[k&&l(le,{data:{title:k}}),u&&a?.length>0&&l(re,{value:d,onValueChange:e=>{const s=a?.find(o=>o?.tab===e);if(s){if(R(e),m(s.data||[],s.isShowRecommendedTab),!s.isShowRecommendedTab){V({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:he,component_name:ge,component_title:p?.title,component_position:1,navigation:e}});return}P()}},shape:j==="rounded"?"rounded":"square",children:l(ie,{children:a.map(e=>l(oe,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),l("div",{ref:Y,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:l(ce,{data:{list:r,configuration:{...J,event:E,isShowTag:F,isShowOriginalPrice:G,target:A,metafields:$,itemLength:r?.length,isDisplayBackImage:q,onAddCart:O,onBuyNow:K,onLearnMore:Q}},id:C,className:`${u?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:c?"flex-1":"",Slide:c?de:ue,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h?1:1.2},768:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b()},1024:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1024)},1440:{spaceBetween:h?0:16,freeMode:!1,slidesPerView:b(1440)}}},C)})]})});B.displayName="ShelfDisplay";var Pe=me(B);export{Pe as default};
 //# sourceMappingURL=index.js.map