npm - @anker-in/headless-ui - Versions diffs - 1.2.2 → 1.2.3 - Mend

@anker-in/headless-ui 1.2.2 → 1.2.3

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

Files changed (80) hide show

package/dist/cjs/biz-components/ImageOverlayShelf/ProductCard.js.map CHANGED Viewed

@@ -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": "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",
+  "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": ["ProductCard_exports", "__export", "ProductCard", "ProductCard_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_badge", "import_text", "import_button", "import_picture", "import_heading", "objectPositionClassMap", "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", "Picture", "tag", "index", "Badge", "Button"]
 }

package/dist/cjs/biz-components/Marquee/Marquee.d.ts CHANGED Viewed

@@ -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/cjs/biz-components/Marquee/Marquee.js CHANGED Viewed

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

package/dist/cjs/biz-components/Marquee/Marquee.js.map CHANGED Viewed

@@ -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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAuDU,IAAAO,EAAA,6BAtDVC,EAAmE,oBACnEC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAG3BH,EAAoD,wBACpDI,EAAO,sBACPC,EAAyB,0BACzBC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAU,EAAAC,QAAM,WAAoC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,KAAW,UAAkB,IAAI,EACvC,gCAAoBD,EAAK,IAAMC,EAAS,OAAoB,KAE5D,eAAYA,EAAkD,CAC5D,cAAeP,EACf,cAAeC,CACjB,CAAC,KAGC,OAAC,UACC,UAAU,aACV,aAAW,MACT,0GACAI,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAAC,UAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBA,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,OACvB,OAAC,eACC,mBAACrB,EAAA,CAAY,KAAMoB,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDP,EAAQ,YAAc,UAEtB,MAAMd,EAAc,CAAC,CAAE,KAAAgB,EAAM,cAAAM,CAAc,OAEvC,oBACG,UAAAN,EAAK,OAAS,YACb,OAACjB,EAAA,CAAoB,MAAOiB,GAAM,MAAO,eAAgBM,GAAe,eAAgB,EAEzFN,EAAK,OAAS,WAAU,OAACf,EAAA,CAAmB,KAAMe,GAAM,KAAM,cAAeM,GAAe,cAAe,GAC9G,EAIJtB,EAAY,YAAc,cAE1B,MAAMD,EAAsB,CAAC,CAAE,MAAAwB,EAAO,eAAAC,CAAe,OAEjD,OAAC,OAAI,UAAU,4CACb,mBAAC,WAAQ,OAAQD,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,gBAAc,MAAG,eAAgBC,CAAc,EAAG,EACxG,EAIJzB,EAAoB,YAAc,sBAElC,MAAME,EAAqB,EAAAc,QAAM,WAAoD,CAAC,CAAE,KAAAU,EAAM,cAAAC,CAAc,EAAGR,OAE3G,OAAC,QACC,GAAG,MACH,IAAKA,EACL,KAAMO,EACN,aAAW,MAAG,oFAAqFC,CAAa,EAClH,CAEH,EAEDzB,EAAmB,YAAc,qBAEjC,IAAOC,KAAQ,cAAWY,CAAO",
-  "names": ["Marquee_exports", "__export", "MarqueeImageContent", "MarqueeItem", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_css", "import_modules", "import_useExposure", "componentType", "componentName", "Marquee", "React", "data", "className", "ref", "innerRef", "item", "index", "configuration", "image", "imageClassName", "text", "textClassName"]
+  "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": ["Marquee_exports", "__export", "MarqueeIconAndTextContent", "MarqueeImageContent", "MarqueeItem", "MarqueePictureContent", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_css", "import_useExposure", "componentType", "componentName", "Marquee", "React", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "_", "copyIndex", "data", "configuration", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName"]
 }

package/dist/cjs/biz-components/Marquee/index.d.ts CHANGED Viewed

@@ -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/cjs/biz-components/Marquee/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var q=Object.create;var m=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var r in t)m(e,r,{get:t[r],enumerable:!0})},u=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of M(t))!C.call(e,a)&&a!==r&&m(e,a,{get:()=>t[a],enumerable:!(n=x(t,a))||n.enumerable});return e};var d=(e,t,r)=>(r=e!=null?q(p(e)):{},u(t||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),g=e=>u(m({},"__esModule",{value:!0}),e);var l={};I(l,{MarqueeImageContent:()=>o.MarqueeImageContent,MarqueeItem:()=>o.MarqueeItem,MarqueeTextContent:()=>o.MarqueeTextContent,default:()=>f.default});module.exports=g(l);var f=d(require("./Marquee.js")),o=require("./Marquee.js");
+"use strict";var m=Object.create;var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var c=(e,t)=>{for(var r in t)a(e,r,{get:t[r],enumerable:!0})},q=(e,t,r,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of C(t))!I.call(e,o)&&o!==r&&a(e,o,{get:()=>t[o],enumerable:!(u=x(t,o))||u.enumerable});return e};var d=(e,t,r)=>(r=e!=null?m(f(e)):{},q(t||!e||!e.__esModule?a(r,"default",{value:e,enumerable:!0}):r,e)),p=e=>q(a({},"__esModule",{value:!0}),e);var T={};c(T,{MarqueeIconAndTextContent:()=>n.MarqueeIconAndTextContent,MarqueeImageContent:()=>n.MarqueeImageContent,MarqueeItem:()=>n.MarqueeItem,MarqueePictureContent:()=>n.MarqueePictureContent,MarqueeTextContent:()=>n.MarqueeTextContent,default:()=>M.default});module.exports=p(T);var M=d(require("./Marquee.js")),n=require("./Marquee.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Marquee/index.js.map CHANGED Viewed

@@ -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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gKAAAE,EAAAF,GAAA,IAAAG,EAAwB,2BACxBA,EAAqE",
+  "sourcesContent": ["export { default } from './Marquee.js'\nexport {\n  MarqueeItem,\n  MarqueeImageContent,\n  MarqueeTextContent,\n  MarqueeIconAndTextContent,\n  MarqueePictureContent,\n} from './Marquee.js'\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4QAAAE,EAAAF,GAAA,IAAAG,EAAwB,2BACxBA,EAMO",
   "names": ["Marquee_exports", "__export", "__toCommonJS", "import_Marquee"]
 }

package/dist/cjs/biz-components/Marquee/type.d.ts CHANGED Viewed

@@ -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/cjs/biz-components/Marquee/type.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var g=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!o.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(a=i(e,r))||a.enumerable});return t};var p=t=>g(s({},"__esModule",{value:!0}),t);var u={};module.exports=p(u);
+"use strict";var n=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var m=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of o(e))!g.call(t,r)&&r!==s&&n(t,r,{get:()=>e[r],enumerable:!(a=i(e,r))||a.enumerable});return t};var p=t=>m(n({},"__esModule",{value:!0}),t);var c={};module.exports=p(c);
 //# sourceMappingURL=type.js.map

package/dist/cjs/biz-components/Marquee/type.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/type.ts"],
-  "sourcesContent": ["import type { Img } from '../../types/props.js'\n\ninterface MarqueeProps {\n  data: {\n    key?: string\n    /** \u662F\u5426\u53CD\u5411 */\n    reverseDirection?: boolean\n    /** \u901F\u5EA6 */\n    speed?: number\n    /** \u8DD1\u9A6C\u706F\u5185\u5BB9 */\n    items: any[]\n  }\n  className?: string\n}\n\ninterface MarqueeItemProps {\n  data: {\n    type: 'image' | 'text'\n    image?: Img\n    text?: string\n  }\n  configuration?: {\n    imageClassName?: string\n    textClassName?: string\n  }\n}\n\ninterface MarqueeImageContentProps {\n  image?: Img\n  imageClassName?: string\n}\n\ninterface MarqueeTextContentProps {\n  text?: string\n  textClassName?: string\n}\n\nexport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps }\n"],
+  "sourcesContent": ["import type { Img } from '../../types/props.js'\n\ninterface MarqueeProps {\n  data: {\n    key?: string\n    /** \u662F\u5426\u53CD\u5411\u6EDA\u52A8 */\n    reverseDirection?: boolean\n    /**\n     * \u4E00\u8F6E\u52A8\u753B\u65F6\u957F\uFF08ms\uFF09\u3002\u6570\u503C\u8D8A\u5C0F\u6EDA\u52A8\u8D8A\u5FEB\uFF0C\u9ED8\u8BA4 8000\uFF08\u5373 8s \u5B8C\u6210\u4E00\u8F6E\uFF09\n     */\n    speed?: number\n    /** \u8DD1\u9A6C\u706F\u5185\u5BB9 */\n    items: any[]\n  }\n  className?: string\n}\n\ninterface MarqueeItemProps {\n  data: {\n    id?: string\n    type: 'image' | 'text' | 'iconAndText' | 'picture'\n    image?: Img\n    text?: string\n    iconImage?: Img\n    iconText?: string\n    pictureImage?: Img\n  }\n  configuration?: {\n    imageClassName?: string\n    textClassName?: string\n    iconClassName?: string\n    pictureClassName?: string\n  }\n}\n\ninterface MarqueeImageContentProps {\n  image?: Img\n  imageClassName?: string\n}\n\ninterface MarqueeTextContentProps {\n  text?: string\n  textClassName?: string\n}\n\ninterface MarqueeIconAndTextContentProps {\n  icon?: Img\n  text?: string\n  iconClassName?: string\n  textClassName?: string\n}\n\ninterface MarqueePictureContentProps {\n  pictureImage?: Img\n  pictureClassName?: string\n}\n\nexport type {\n  MarqueeProps,\n  MarqueeItemProps,\n  MarqueeImageContentProps,\n  MarqueeTextContentProps,\n  MarqueeIconAndTextContentProps,\n  MarqueePictureContentProps,\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["type_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/Media/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var B=Object.create;var n=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(e,i)=>{for(var o in i)n(e,o,{get:i[o],enumerable:!0})},c=(e,i,o,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of Q(i))!G.call(e,r)&&r!==o&&n(e,r,{get:()=>i[r],enumerable:!(t=O(i,r))||t.enumerable});return e};var K=(e,i,o)=>(o=e!=null?B(F(e)):{},c(i||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),U=e=>c(n({},"__esModule",{value:!0}),e);var X={};J(X,{default:()=>W});module.exports=U(X);var d=require("react/jsx-runtime"),y=K(require("react")),s=require("react-responsive"),f=require("../../components/index.js"),a=require("../../helpers/index.js");const p=y.default.forwardRef(({pcImage:e,desktopImage:i,laptopImage:o,padImage:t,mobileImage:r,className:m,videoClassName:M,imgClassName:v,muted:T=!0,loop:P=!0,playsInline:x=!0,autoPlay:b=!0,poster:w,videoRef:N,onVideoPlay:h,onVideoPause:R,onVideoEnded:q,...E},L)=>{const Y=(0,s.useMediaQuery)({query:"(max-width: 767px)"}),V=(0,s.useMediaQuery)({query:"(min-width: 768px)"}),j=(0,s.useMediaQuery)({query:"(min-width: 1025px)"}),H=(0,s.useMediaQuery)({query:"(min-width: 1440px)"}),$=(0,s.useMediaQuery)({query:"(min-width: 1920px)"}),z=[e,i,o,t,r].some(A=>A?.mimeType==="video/mp4"),u=$?e:H?i:j?o:V?t:r,l=u||e||i||o||t||r,C=l?.mimeType==="video/mp4"?l.url:void 0,D=w||(l?.mimeType!=="video/mp4"?l?.url:void 0),S=[r?.url&&`${r.url} 768`,t?.url&&`${t.url} 1025`,o?.url&&`${o.url} 1440`,i?.url&&`${i.url} 1920`,e?.url].filter(Boolean).reverse().join(" , ");return(0,d.jsx)("div",{ref:L,className:(0,a.cn)("media-wrapper",m),...E,children:z?(0,d.jsx)("video",{ref:N,src:C,poster:D,className:(0,a.cn)("size-full object-cover",M),muted:T,loop:P,playsInline:x,autoPlay:b,"aria-label":u?.alt||"",onPlay:h,onPause:R,onEnded:q}):(0,d.jsx)(f.Picture,{className:"size-full",imgClassName:(0,a.cn)("size-full object-cover",v),alt:e?.alt||i?.alt||o?.alt||t?.alt||r?.alt||"",source:S})})});p.displayName="Media";var W=p;
+"use strict";"use client";var B=Object.create;var n=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(e,i)=>{for(var o in i)n(e,o,{get:i[o],enumerable:!0})},c=(e,i,o,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of Q(i))!G.call(e,r)&&r!==o&&n(e,r,{get:()=>i[r],enumerable:!(t=O(i,r))||t.enumerable});return e};var K=(e,i,o)=>(o=e!=null?B(F(e)):{},c(i||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),U=e=>c(n({},"__esModule",{value:!0}),e);var X={};J(X,{default:()=>W});module.exports=U(X);var d=require("react/jsx-runtime"),y=K(require("react")),s=require("react-responsive"),m=require("../../components/index.js"),a=require("../../helpers/index.js");const p=y.default.forwardRef(({pcImage:e,desktopImage:i,laptopImage:o,padImage:t,mobileImage:r,className:f,videoClassName:M,imgClassName:v,muted:x=!0,loop:T=!0,playsInline:P=!0,autoPlay:w=!0,poster:h,videoRef:b,onVideoPlay:N,onVideoPause:R,onVideoEnded:q,...E},L)=>{const Y=(0,s.useMediaQuery)({query:"(max-width: 767px)"}),V=(0,s.useMediaQuery)({query:"(min-width: 768px) and (max-width: 1024px)"}),j=(0,s.useMediaQuery)({query:"(min-width: 1025px) and (max-width: 1439px)"}),H=(0,s.useMediaQuery)({query:"(min-width: 1440px) and (max-width: 1919px)"}),$=(0,s.useMediaQuery)({query:"(min-width: 1920px)"}),z=[e,i,o,t,r].some(A=>A?.mimeType==="video/mp4"),u=$?e:H?i:j?o:V?t:r,l=u||e||i||o||t||r,C=l?.mimeType==="video/mp4"?l.url:void 0,D=h||(l?.mimeType!=="video/mp4"?l?.url:void 0),S=[r?.url&&`${r.url} 768`,t?.url&&`${t.url} 1025`,o?.url&&`${o.url} 1440`,i?.url&&`${i.url} 1920`,e?.url].filter(Boolean).reverse().join(" , ");return(0,d.jsx)("div",{ref:L,className:(0,a.cn)("media-wrapper",f),...E,children:z?(0,d.jsx)("video",{ref:b,src:C,poster:D,className:(0,a.cn)("size-full object-cover",M),muted:x,loop:T,playsInline:P,autoPlay:w,"aria-label":u?.alt||"",onPlay:N,onPause:R,onEnded:q}):(0,d.jsx)(m.Picture,{className:"size-full",imgClassName:(0,a.cn)("size-full object-cover",v),alt:e?.alt||i?.alt||o?.alt||t?.alt||r?.alt||"",source:S})})});p.displayName="Media";var W=p;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Media/index.js.map CHANGED Viewed

@@ -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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+GU,IAAAI,EAAA,6BA7GVC,EAAkB,oBAClBC,EAA8B,4BAC9BC,EAAwB,qCAExBC,EAAmB,kCA2CnB,MAAMC,EAAQ,EAAAC,QAAM,WAClB,CACE,CACE,QAAAC,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,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACrDC,KAAW,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EACzDC,KAAY,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAC1DC,KAAO,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrDC,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,SACE,OAAC,OAAI,IAAKkB,EAAK,aAAW,MAAG,gBAAiBb,CAAS,EAAI,GAAGY,EAC3D,SAAAO,KACC,OAAC,SACC,IAAKX,EACL,IAAKe,EACL,OAAQC,EACR,aAAW,MAAG,yBAA0BvB,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,KAEA,OAAC,WACC,UAAU,YACV,gBAAc,MAAG,yBAA0BT,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEAhC,EAAM,YAAc,QAEpB,IAAOP,EAAQO",
+  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+GU,IAAAI,EAAA,6BA7GVC,EAAkB,oBAClBC,EAA8B,4BAC9BC,EAAwB,qCAExBC,EAAmB,kCA2CnB,MAAMC,EAAQ,EAAAC,QAAM,WAClB,CACE,CACE,QAAAC,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,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,4CAA6C,CAAC,EAC7EC,KAAW,iBAAc,CAAE,MAAO,6CAA8C,CAAC,EACjFC,KAAY,iBAAc,CAAE,MAAO,6CAA8C,CAAC,EAClFC,KAAO,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrDC,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,SACE,OAAC,OAAI,IAAKkB,EAAK,aAAW,MAAG,gBAAiBb,CAAS,EAAI,GAAGY,EAC3D,SAAAO,KACC,OAAC,SACC,IAAKX,EACL,IAAKe,EACL,OAAQC,EACR,aAAW,MAAG,yBAA0BvB,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,KAEA,OAAC,WACC,UAAU,YACV,gBAAc,MAAG,yBAA0BT,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEAhC,EAAM,YAAc,QAEpB,IAAOP,EAAQO",
   "names": ["Media_exports", "__export", "Media_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_helpers", "Media", "React", "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"]
 }

package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.d.ts ADDED Viewed

@@ -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/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js ADDED Viewed

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

package/dist/cjs/biz-components/MediaTextOverlay/MediaTextOverlay.js.map ADDED Viewed

@@ -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": ["MediaTextOverlay_exports", "__export", "MediaTextOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_utils", "import_useExposure", "import_AiuiProvider", "import_Media", "import_css", "import_navigation", "import_components", "import_modules", "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", "Media", "MediaTextOverlay", "React", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev"]
+}

package/dist/cjs/biz-components/MediaTextOverlay/index.d.ts ADDED Viewed

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

package/dist/cjs/biz-components/MediaTextOverlay/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var x=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var v=(e,a)=>{for(var t in a)i(e,t,{get:a[t],enumerable:!0})},o=(e,a,t,d)=>{if(a&&typeof a=="object"\|\|typeof a=="function")for(let r of l(a))!s.call(e,r)&&r!==t&&i(e,r,{get:()=>a[r],enumerable:!(d=y(a,r))\|\|d.enumerable});return e};var M=(e,a,t)=>(t=e!=null?x(m(e)):{},o(a\|\|!e\|\|!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),O=e=>o(i({},"__esModule",{value:!0}),e);var T={};v(T,{default:()=>p.default});module.exports=O(T);var p=M(require("./MediaTextOverlay.js"));
2	+ //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaTextOverlay/index.js.map ADDED Viewed

@@ -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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wCAAAE,EAAAF,GAAA,IAAAG,EAAwB",
+  "names": ["MediaTextOverlay_exports", "__export", "__toCommonJS", "import_MediaTextOverlay"]
+}

package/dist/cjs/biz-components/MediaTextOverlay/types.d.ts ADDED Viewed

@@ -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/cjs/biz-components/MediaTextOverlay/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var p=(a,e,r,i)=>{if(e&&typeof e=="object"\|\|typeof e=="function")for(let t of n(e))!s.call(a,t)&&t!==r&&o(a,t,{get:()=>e[t],enumerable:!(i=d(e,t))\|\|i.enumerable});return a};var l=a=>p(o({},"__esModule",{value:!0}),a);var m={};module.exports=l(m);
2	+ //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/MediaTextOverlay/types.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaTextOverlay/types.ts"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport type MediaTextOverlaySemanticName = 'root' | 'mediaContainer' | 'media' | 'overlay' | 'content' | 'playButton'\n\nexport interface ResponsiveMedia {\n  lgDesktop?: Media\n  desktop?: Media\n  laptop?: Media\n  pad?: Media\n  mobile?: Media\n}\n\nexport interface MediaTextOverlayItem {\n  content: string\n  media: ResponsiveMedia\n}\n\nexport interface MediaTextOverlayData {\n  items: MediaTextOverlayItem[]\n  theme?: Theme\n  size?: 'lg' | 'sm'\n  isShowPagination?: boolean\n  isAutoPlay?: boolean\n}\n\nexport interface MediaTextOverlayProps extends React.HTMLAttributes<HTMLElement> {\n  data: MediaTextOverlayData\n  classNames?: Partial<Record<MediaTextOverlaySemanticName, string>>\n}\n"],
+  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
+  "names": ["types_exports", "__toCommonJS"]
+}

package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED Viewed

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