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

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

@@ -0,0 +1,130 @@
+import * as React from 'react';
+/**
+ * 按钮功能类型
+ */
+export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
+/**
+ * 基础产品数据接口（来自外部数据源）
+ */
+export interface BaseImageOverlayProductData {
+    sku: string;
+    name?: string;
+    title?: string;
+    image?: string;
+    handle: string;
+    shopify_id?: string;
+    custom_name?: string;
+    custom_description?: string;
+    custom_image?: string;
+    custom_link?: string;
+    custom_theme?: 'light' | 'dark';
+}
+/**
+ * 完整的产品卡片数据接口
+ */
+export interface ImageOverlayProductCardData extends BaseImageOverlayProductData {
+}
+/**
+ * ImageOverlayShelf 业务组件数据接口
+ */
+export interface ImageOverlayShelfData {
+    /** 主题 */
+    theme?: 'light' | 'dark';
+    /** 组件标题 */
+    title?: string;
+    /** 组件描述 */
+    description?: string;
+    /** 产品列表 */
+    productsCard: ImageOverlayProductCardData[];
+    /** 是否显示标签 */
+    isShowTag?: boolean;
+    /** 是否显示原价 */
+    isShowOriginalPrice?: boolean;
+    /** 了解更多按钮文本 */
+    secondaryButtonText?: string;
+    /** 了解更多按钮功能 */
+    secondaryButtonFun?: ButtonFunctionType;
+    /** 立即购买按钮文本 */
+    primaryButtonText?: string;
+    /** 立即购买按钮功能 */
+    primaryButtonFun?: ButtonFunctionType;
+    /** 按钮方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 按钮形状 */
+    shape?: 'round' | 'square';
+}
+/**
+ * ImageOverlayShelf Props 接口
+ */
+export interface ImageOverlayShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: ImageOverlayShelfData;
+    /** 点击了解更多回调 */
+    onLearnMore?: (product: any, variant: any, coupon: any) => void;
+    /** 点击立即购买回调 */
+    onShopNow?: (product: any, variant: any, coupon: any) => void;
+    /** 点击加入购物车回调 */
+    onAddToCart?: (product: any, variant: any, coupon: any) => void;
+    /** 外部构建数据（用于合并产品数据） */
+    buildData?: {
+        categories?: any[];
+        products?: any[];
+    };
+    /** 目标窗口 */
+    target?: '_self' | '_blank';
+    /** 元字段 */
+    metafields?: Record<string, any>;
+    /** 断点配置 */
+    breakpoints?: {
+        [key: number]: {
+            spaceBetween: number;
+            freeMode: boolean;
+            slidesPerView: number;
+        };
+    };
+}
+/**
+ * ImageOverlayShelf Context 配置接口
+ */
+export interface ImageOverlayShelfContextConfig {
+    /** 是否显示标签 */
+    isShowTag?: boolean;
+    /** 目标窗口 */
+    target?: string;
+    /** 是否显示原价 */
+    isShowOriginalPrice?: boolean;
+    /** 元字段 */
+    metafields?: Record<string, any>;
+    /** 项目数量 */
+    itemLength?: number;
+    /** 事件处理器 */
+    event?: {
+        primaryButton?: (item: any, index: number, data: any, coupon: any) => void;
+        secondaryButton?: (item: any, index: number, data: any, coupon: any) => void;
+    };
+    /** 按钮配置 */
+    secondaryButtonText?: string;
+    secondaryButtonFun?: ButtonFunctionType;
+    primaryButtonText?: string;
+    primaryButtonFun?: ButtonFunctionType;
+    direction?: 'horizontal' | 'vertical';
+    shape?: 'round' | 'square';
+    /** 回调函数 */
+    onLearnMore?: (product: any, variant: any, coupon: any) => void;
+    onShopNow?: (product: any, variant: any, coupon: any) => void;
+    onAddToCart?: (product: any, variant: any, coupon: any) => void;
+}
+/**
+ * ImageOverlayShelf Context 值接口
+ */
+interface ImageOverlayShelfContextValue extends ImageOverlayShelfContextConfig {
+    /** 当前项目索引 */
+    index?: number;
+}
+/**
+ * 使用 ImageOverlayShelf Context 的 Hook
+ * 返回 null 如果没有 context（向后兼容）
+ */
+export declare const useImageOverlayShelfContext: () => ImageOverlayShelfContextValue | null;
+declare const ImageOverlayShelf: React.ForwardRefExoticComponent<ImageOverlayShelfProps & React.RefAttributes<HTMLDivElement>>;
+export default ImageOverlayShelf;

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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as se,jsx as n,jsxs as f}from"react/jsx-runtime";import*as c from"react";import{cn as I}from"../../helpers/utils.js";import Q from"../SwiperBox/index.js";import X from"../../components/badge.js";import{Text as $}from"../../components/text.js";import E from"../../components/button.js";import Y from"../../components/picture.js";import{Heading as U}from"../../components/heading.js";import{useAiuiContext as Z}from"../AiuiProvider/index.js";import{formatVariantPrice as ee}from"../ShelfDisplay/shelfDisplay.js";import{forwardRef as te,useRef as ne,useImperativeHandle as oe}from"react";const j=c.createContext(null),re=()=>c.useContext(j),ae=999999999e-2,ie=({data:e,configuration:u})=>{const{locale:y="us",copyWriting:N,currencyDisplay:P}=Z(),{custom_theme:M="dark"}=e,d=re()||u||{},{isShowTag:F,isShowOriginalPrice:g,event:v,target:x,metafields:h,secondaryButtonText:b,secondaryButtonFun:w,primaryButtonText:B,primaryButtonFun:k,direction:m,shape:S,onLearnMore:D,onShopNow:T,onAddToCart:s,index:C=u?.index}=d,a=(t,o,r)=>{if(t)switch(t){case"buyNow":T?.(o,i,r);break;case"addCart":s?.(o,i,r);break;case"learnMore":D?.(o,i,r);break;default:break}},O=(t,o,r,l)=>{k?a(k,t,l):v?.primaryButton?.(t,o+1,r,l)},L=(t,o,r,l)=>{w?a(w,t,l):v?.secondaryButton?.(t,o+1,r,l)},i=c.useMemo(()=>e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0]||{},[e?.variants,e?.sku]),H=!i?.availableForSale||i?.price?.amount===ae,[R,W]=c.useState([]),p=i?.coupons?.[0],{price:G,basePrice:J,discount:_}=ee({locale:y,amount:g&&p?p.variant_price4wscode:i.price,baseAmount:g&&p?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),K=()=>{const t=e?.sku,o=e?.variants;return o?.find(l=>l?.sku===t)?.image?.url||o?.[0]?.image?.url||""},V=e?.custom_name||e?.title||e?.name,A=e?.custom_description||e?.description;return c.useEffect(()=>{let t=[];if(_){const r=`${_}${h?.discounts?.off||""}`;t.push(r)}const o=e?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,_?1:2);W(t.concat(o))},[_,h?.discounts,e?.tags]),n("div",{className:I("rounded-box  box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]",{"aiui-dark":M==="dark"}),children:f("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[n(Y,{alt:"",source:e?.custom_image??K(),className:I("rounded-box absolute inset-x-0 top-0 h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full")}),f("div",{className:"desktop:p-6 collection-shelves-product-content z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",children:[F&&R?.length?n("div",{className:"mb-2 box-border flex flex-wrap gap-1 overflow-hidden",children:R?.map?.((t,o)=>n(X,{children:t},o))}):null,V?n(U,{as:"h3",title:V||"",html:V||"",className:"lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl collection-shelves-product-title text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold"}):null,A?n($,{size:2,html:A||"",className:"lg-desktop:text-lg desktop:text-base collection-shelves-product-description text-info-primary line-clamp-1 text-sm font-bold"}):null,n("div",{className:"mb-1 mt-4 flex items-center",children:H?n("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:N?.soldOutText??"Sold Out"}):f(se,{children:[n("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&G||""}),n("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&J||""})]})}),f("div",{className:I("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",m==="vertical"?"flex-col":""),children:[b&&n(E,{variant:"secondary",onClick:()=>L(e,C,d,p),className:`overflow-hidden font-bold ${m==="vertical"?"w-full":""} ${S==="round"?"rounded-2xl":""}`,children:b}),B&&n(E,{variant:"primary",disabled:H,onClick:()=>O(e,C,d,p),className:`overflow-hidden font-bold ${m==="vertical"?"w-full":""} ${S==="round"?"rounded-2xl":""}`,children:B})]})]})]})},e?.id||e?.handle)},q=te(({data:e,onLearnMore:u,onShopNow:y,onAddToCart:N,buildData:P,breakpoints:M,className:z="",target:d="_self",metafields:F,...g},v)=>{const{productsCard:x=[],isShowTag:h=!1,isShowOriginalPrice:b=!0,secondaryButtonText:w,secondaryButtonFun:B,primaryButtonText:k,primaryButtonFun:m,direction:S="horizontal",shape:D="round"}=e,T=ne(null);oe(v,()=>T.current);const s=c.useMemo(()=>x?.length?x.map(a=>{const O=P?.products?.find(L=>L?.handle===a?.handle);return O?{sku:a.sku,custom_name:a.custom_name,custom_image:a.custom_image,custom_link:a.custom_link,custom_description:a.custom_description,custom_theme:a.custom_theme,...O}:null}).filter(a=>a!==null):[],[P?.products,x]),C={isShowTag:h,target:d,isShowOriginalPrice:b,metafields:F||{},itemLength:s?.length,event:{primaryButton:y,secondaryButton:u},secondaryButtonText:w,secondaryButtonFun:B,primaryButtonText:k,primaryButtonFun:m,direction:S,shape:D,onLearnMore:u,onShopNow:y,onAddToCart:N};return n(j.Provider,{value:C,children:f("div",{ref:T,className:I("collection-shelves-wrap w-full",z),...g,children:[e.title&&n(U,{as:"h2",size:4,className:"text-info-primary mb-4",children:e.title}),e.description&&n($,{size:3,as:"p",className:"text-info-primary mb-6",children:e.description}),n(Q,{data:{list:s,configuration:{itemLength:s?.length}},id:`ImageOverlayShelf${Math.random().toString(36).substring(2,9)}`,className:"!overflow-visible",Slide:ie,breakpoints:M||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:Math.min(2,s.length)},768:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(3,s.length)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(4,s.length)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:Math.min(4,s.length)}}})]})})});q.displayName="ImageOverlayShelf";var xe=q;export{xe as default,re as useImageOverlayShelfContext};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ImageOverlayShelf/index.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.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 { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { forwardRef, useRef, useImperativeHandle } from 'react'\n\n/**\n * \u6309\u94AE\u529F\u80FD\u7C7B\u578B\n */\nexport type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore'\n\n/**\n * \u57FA\u7840\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u6765\u81EA\u5916\u90E8\u6570\u636E\u6E90\uFF09\n */\nexport interface BaseImageOverlayProductData {\n  sku: string\n  name?: string\n  title?: string\n  image?: string\n  handle: string\n  shopify_id?: string\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_link?: string\n  custom_theme?: 'light' | 'dark'\n}\n\n/**\n * \u5B8C\u6574\u7684\u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\n */\nexport interface ImageOverlayProductCardData extends BaseImageOverlayProductData {}\n\n/**\n * ImageOverlayShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface ImageOverlayShelfData {\n  /** \u4E3B\u9898 */\n  theme?: 'light' | 'dark'\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0 */\n  description?: string\n  /** \u4EA7\u54C1\u5217\u8868 */\n  productsCard: ImageOverlayProductCardData[]\n  /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n  isShowTag?: boolean\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n  isShowOriginalPrice?: boolean\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u6309\u94AE\u65B9\u5411 */\n  direction?: 'horizontal' | 'vertical'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n}\n\n/**\n * ImageOverlayShelf Props \u63A5\u53E3\n */\nexport interface ImageOverlayShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: ImageOverlayShelfData\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: any, variant: any, coupon: any) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: any, variant: any, coupon: any) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: any, variant: any, coupon: any) => void\n  /** \u5916\u90E8\u6784\u5EFA\u6570\u636E\uFF08\u7528\u4E8E\u5408\u5E76\u4EA7\u54C1\u6570\u636E\uFF09 */\n  buildData?: {\n    categories?: any[]\n    products?: any[]\n  }\n  /** \u76EE\u6807\u7A97\u53E3 */\n  target?: '_self' | '_blank'\n  /** \u5143\u5B57\u6BB5 */\n  metafields?: Record<string, any>\n  /** \u65AD\u70B9\u914D\u7F6E */\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n}\n\n/**\n * ImageOverlayShelf Context \u914D\u7F6E\u63A5\u53E3\n */\nexport interface ImageOverlayShelfContextConfig {\n  /** \u662F\u5426\u663E\u793A\u6807\u7B7E */\n  isShowTag?: boolean\n  /** \u76EE\u6807\u7A97\u53E3 */\n  target?: string\n  /** \u662F\u5426\u663E\u793A\u539F\u4EF7 */\n  isShowOriginalPrice?: boolean\n  /** \u5143\u5B57\u6BB5 */\n  metafields?: Record<string, any>\n  /** \u9879\u76EE\u6570\u91CF */\n  itemLength?: number\n  /** \u4E8B\u4EF6\u5904\u7406\u5668 */\n  event?: {\n    primaryButton?: (item: any, index: number, data: any, coupon: any) => void\n    secondaryButton?: (item: any, index: number, data: any, coupon: any) => void\n  }\n  /** \u6309\u94AE\u914D\u7F6E */\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  direction?: 'horizontal' | 'vertical'\n  shape?: 'round' | 'square'\n  /** \u56DE\u8C03\u51FD\u6570 */\n  onLearnMore?: (product: any, variant: any, coupon: any) => void\n  onShopNow?: (product: any, variant: any, coupon: any) => void\n  onAddToCart?: (product: any, variant: any, coupon: any) => void\n}\n\n/**\n * ImageOverlayShelf Context \u503C\u63A5\u53E3\n */\ninterface ImageOverlayShelfContextValue extends ImageOverlayShelfContextConfig {\n  /** \u5F53\u524D\u9879\u76EE\u7D22\u5F15 */\n  index?: number\n}\n\n/**\n * ImageOverlayShelf Context\n */\nconst ImageOverlayShelfContext = React.createContext<ImageOverlayShelfContextValue | null>(null)\n\n/**\n * \u4F7F\u7528 ImageOverlayShelf Context \u7684 Hook\n * \u8FD4\u56DE null \u5982\u679C\u6CA1\u6709 context\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n */\nexport const useImageOverlayShelfContext = () => {\n  const context = React.useContext(ImageOverlayShelfContext)\n  return context\n}\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n/**\n * Item \u7EC4\u4EF6 - ImageOverlayShelf \u7684\u5355\u4E2A\u4EA7\u54C1\u9879\n */\nconst Item = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting, currencyDisplay } = useAiuiContext()\n\n  const { custom_theme = 'dark' } = data\n\n  // \u4F7F\u7528 context \u83B7\u53D6\u914D\u7F6E\uFF0C\u56DE\u9000\u5230 configuration\uFF08\u5411\u540E\u517C\u5BB9\uFF09\n  const contextConfig = useImageOverlayShelfContext()\n  const config = contextConfig || configuration || {}\n\n  const {\n    isShowTag,\n    isShowOriginalPrice,\n    event,\n    target,\n    metafields,\n    secondaryButtonText,\n    secondaryButtonFun,\n    primaryButtonText,\n    primaryButtonFun,\n    direction,\n    shape,\n    onLearnMore,\n    onShopNow,\n    onAddToCart,\n    index = configuration?.index,\n  } = config\n\n  // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n  const handleButtonClick = (buttonFun?: ButtonFunctionType, params?: any, coupon?: any) => {\n    if (!buttonFun) return\n\n    switch (buttonFun) {\n      case 'buyNow':\n        onShopNow?.(params, variant, coupon)\n        break\n      case 'addCart':\n        onAddToCart?.(params, variant, coupon)\n        break\n      case 'learnMore':\n        onLearnMore?.(params, variant, coupon)\n        break\n      default:\n        break\n    }\n  }\n\n  const onPrimaryButton = (params: any, idx: number, shelfData: any, coupon?: any) => {\n    // \u5982\u679C\u6709\u65B0\u7684\u529F\u80FD\u914D\u7F6E\uFF0C\u4F7F\u7528\u65B0\u7684\u5904\u7406\u65B9\u5F0F\n    if (primaryButtonFun) {\n      handleButtonClick(primaryButtonFun, params, coupon)\n    } else {\n      // \u5411\u540E\u517C\u5BB9\uFF1A\u4F7F\u7528\u65E7\u7684 event \u65B9\u5F0F\n      event?.primaryButton?.(params, idx + 1, shelfData, coupon)\n    }\n  }\n\n  const onSecondaryButton = (params: any, idx: number, shelfData: any, coupon?: any) => {\n    // \u5982\u679C\u6709\u65B0\u7684\u529F\u80FD\u914D\u7F6E\uFF0C\u4F7F\u7528\u65B0\u7684\u5904\u7406\u65B9\u5F0F\n    if (secondaryButtonFun) {\n      handleButtonClick(secondaryButtonFun, params, coupon)\n    } else {\n      // \u5411\u540E\u517C\u5BB9\uFF1A\u4F7F\u7528\u65E7\u7684 event \u65B9\u5F0F\n      event?.secondaryButton?.(params, idx + 1, shelfData, coupon)\n    }\n  }\n\n  const variant = React.useMemo(\n    () => data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {},\n    [data?.variants, data?.sku]\n  )\n\n  const isSoldOut = !variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE\n\n  const [showTags, setShowTags] = React.useState<string[]>([])\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title || data?.name\n  const displayDescription = data?.custom_description || data?.description\n\n  React.useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${metafields?.discounts?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [discount, metafields?.discounts, data?.tags])\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'rounded-box  box-border w-full cursor-pointer overflow-hidden duration-300',\n        'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n        {\n          'aiui-dark': custom_theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"box-border flex h-full flex-col justify-between overflow-hidden\">\n        <Picture\n          alt=\"\"\n          source={data?.custom_image ?? handleUrl()}\n          className={cn(\n            'rounded-box absolute inset-x-0 top-0 h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full'\n          )}\n        />\n        <div className=\"desktop:p-6 collection-shelves-product-content z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4\">\n          {isShowTag && showTags?.length ? (\n            <div className=\"mb-2 box-border flex flex-wrap gap-1 overflow-hidden\">\n              {showTags?.map?.((item: any, index: number) => (\n                <Badge key={index}>{item}</Badge>\n              ))}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              html={displayTitle || ''}\n              className=\"lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl collection-shelves-product-title text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold\"\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              html={displayDescription || ''}\n              className=\"lg-desktop:text-lg desktop:text-base collection-shelves-product-description text-info-primary line-clamp-1 text-sm font-bold\"\n            />\n          ) : null}\n          <div className=\"mb-1 mt-4 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">\n                {copyWriting?.soldOutText ?? 'Sold Out'}\n              </div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {secondaryButtonText && (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, index, config, coupon)}\n                className={`overflow-hidden font-bold ${direction === 'vertical' ? 'w-full' : ''} ${shape === 'round' ? 'rounded-2xl' : ''}`}\n              >\n                {secondaryButtonText}\n              </Button>\n            )}\n            {primaryButtonText && (\n              <Button\n                variant=\"primary\"\n                disabled={isSoldOut}\n                onClick={() => onPrimaryButton(data, index, config, coupon)}\n                className={`overflow-hidden font-bold ${direction === 'vertical' ? 'w-full' : ''} ${shape === 'round' ? 'rounded-2xl' : ''}`}\n              >\n                {primaryButtonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ImageOverlayShelf = forwardRef<HTMLDivElement, ImageOverlayShelfProps>(\n  (\n    {\n      data,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      buildData,\n      breakpoints,\n      className = '',\n      target = '_self',\n      metafields,\n      ...props\n    },\n    ref\n  ) => {\n    const {\n      productsCard = [],\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      direction = 'horizontal',\n      shape = 'round',\n    } = data\n\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u76F4\u63A5\u7528 useMemo \u8BA1\u7B97\u5408\u5E76\u540E\u7684\u6570\u636E\uFF0C\u907F\u514D\u4E0D\u5FC5\u8981\u7684 useEffect \u548C\u72B6\u6001\n    const currentItems = React.useMemo(() => {\n      if (!productsCard?.length) return []\n\n      return productsCard\n        .map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              custom_name: item.custom_name,\n              custom_image: item.custom_image,\n              custom_link: item.custom_link,\n              custom_description: item.custom_description,\n              custom_theme: item.custom_theme,\n              ...findData,\n            }\n          }\n          return null\n        })\n        .filter(item => item !== null)\n    }, [buildData?.products, productsCard])\n\n    // \u6784\u5EFA Context \u503C\n    const contextValue: ImageOverlayShelfContextValue = {\n      isShowTag,\n      target,\n      isShowOriginalPrice,\n      metafields: metafields || {},\n      itemLength: currentItems?.length,\n      event: {\n        primaryButton: onShopNow,\n        secondaryButton: onLearnMore,\n      },\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      direction,\n      shape,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n    }\n\n    return (\n      <ImageOverlayShelfContext.Provider value={contextValue}>\n        <div ref={innerRef} className={cn('collection-shelves-wrap w-full', className)} {...props}>\n          {/* \u6807\u9898\u533A\u57DF */}\n          {data.title && (\n            <Heading as=\"h2\" size={4} className=\"text-info-primary mb-4\">\n              {data.title}\n            </Heading>\n          )}\n          {data.description && (\n            <Text size={3} as=\"p\" className=\"text-info-primary mb-6\">\n              {data.description}\n            </Text>\n          )}\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                // \u4FDD\u7559\u4E00\u4E9B\u57FA\u7840\u914D\u7F6E\u7ED9 SwiperBox\uFF0C\u4F46\u79FB\u9664\u90A3\u4E9B\u4F1A\u900F\u4F20\u7ED9 Item \u7684\u914D\u7F6E\n                itemLength: currentItems?.length,\n              },\n            }}\n            id={`ImageOverlayShelf${Math.random().toString(36).substring(2, 9)}`}\n            className={`!overflow-visible`}\n            Slide={Item}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: Math.min(2, currentItems.length),\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: Math.min(3, currentItems.length),\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: Math.min(4, currentItems.length),\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: Math.min(4, currentItems.length),\n                },\n              }\n            }\n          />\n        </div>\n      </ImageOverlayShelfContext.Provider>\n    )\n  }\n)\n\nImageOverlayShelf.displayName = 'ImageOverlayShelf'\n\nexport default ImageOverlayShelf\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "cn", "SwiperBox", "Badge", "Text", "Button", "Picture", "Heading", "useAiuiContext", "formatVariantPrice", "forwardRef", "useRef", "useImperativeHandle", "ImageOverlayShelfContext", "useImageOverlayShelfContext", "SOLD_OUT_PRICE", "Item", "data", "configuration", "locale", "copyWriting", "currencyDisplay", "custom_theme", "config", "isShowTag", "isShowOriginalPrice", "event", "target", "metafields", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "direction", "shape", "onLearnMore", "onShopNow", "onAddToCart", "index", "handleButtonClick", "buttonFun", "params", "coupon", "variant", "onPrimaryButton", "idx", "shelfData", "onSecondaryButton", "item", "isSoldOut", "showTags", "setShowTags", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "ImageOverlayShelf", "buildData", "breakpoints", "className", "props", "ref", "productsCard", "innerRef", "currentItems", "findData", "contextValue", "ImageOverlayShelf_default"]
+}

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import k,{useImperativeHandle as I,useRef as N}from"react";import{Heading as s,Picture as T,Text as o}from"../../components/index.js";import{cn as x}from"../../helpers/utils.js";import{withLayout as v}from"../../shared/Styles.js";import{useExposure as y}from"../../hooks/useExposure.js";const w="image",F="image_text_feature",f=k.forwardRef(({data:g,className:n},u)=>{const{title:r,subtitle:i,pcImage:t,mobileImage:c,padImage:d,items:_=[],imagePosition:a="left",theme:h="light"}=g,m=N(null);return y(m,{componentType:w,componentName:F,componentTitle:r,componentDescription:i}),I(u,()=>m.current),p("section",{ref:m,"data-ui-component-id":"ImageTextFeature",className:x("image-text-feature",h==="dark"?"aiui-dark":"","text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px] flex flex-col items-center gap-[24px]",n),children:[e(T,{source:`${t?.url}, ${d?.url||t?.url} 1024, ${c?.url||t?.url} 768`,alt:t?.alt,className:x("image-text-feature__image tablet:aspect-[704/360] laptop:aspect-[824/560] aspect-[716/720] max-h-[560px] max-w-[824px] shrink-0",{"image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a==="left","image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]":a==="right"})}),p("div",{className:x("image-text-feature__content laptop:w-fit flex w-full flex-col items-start justify-center",{"order-1 laptop:order-2":a==="left","order-1":a==="right"}),children:[e(s,{size:4,html:r,as:"h3",className:"image-text-feature__title w-full text-left"}),i&&e(o,{size:4,html:i,as:"p",className:"image-text-feature__subtitle min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]"}),e("div",{className:"image-text-feature__items tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0 flex w-full flex-col justify-around gap-0",children:_.map((l,b)=>p("div",{className:"image-text-feature__item laptop:mt-[32px] desktop:mt-[48px] mt-[24px]",children:[p("div",{className:"image-text-feature__item-header flex flex-row items-center gap-[8px]",children:[e("img",{src:l.icon,alt:"icon",className:"image-text-feature__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]"}),e(s,{size:5,as:"h6",className:"image-text-feature__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:l.text})]}),e(o,{size:4,as:"p",html:l.desc,className:"image-text-feature__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]"})]},b))})]})]})});f.displayName="ImageTextFeature";var L=v(f);export{L as default};
+"use client";import{jsx as e,jsxs as m}from"react/jsx-runtime";import I,{useImperativeHandle as N,useRef as T}from"react";import{Heading as o,Picture as v,Text as f}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as y}from"../../hooks/useExposure.js";const F="image",H="image_text_feature",g=I.forwardRef(({data:u,className:n,isHorizontal:r},c)=>{const{title:s,subtitle:i,pcImage:t,mobileImage:d,padImage:_,items:h=[],imagePosition:a="left",theme:b="light"}=u,l=T(null);return y(l,{componentType:F,componentName:H,componentTitle:s,componentDescription:i}),N(c,()=>l.current),m("section",{ref:l,"data-ui-component-id":"ImageTextFeature",className:p("image-text-feature",b==="dark"?"aiui-dark":"","text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px] flex flex-col items-center gap-[24px]",n),children:[e(v,{source:`${t?.url}, ${_?.url||t?.url} 1024, ${d?.url||t?.url} 768`,alt:t?.alt,className:p("image-text-feature__image tablet:aspect-[704/360] laptop:aspect-[824/560] aspect-[716/720] max-h-[560px] max-w-[824px] shrink-0",{"image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a==="left","image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]":a==="right"})}),m("div",{className:p("image-text-feature__content laptop:w-fit flex w-full flex-col items-start justify-center",{"order-1 laptop:order-2":a==="left","order-1":a==="right"}),children:[e(o,{size:4,html:s,as:"h3",className:"image-text-feature__title w-full text-left"}),i&&e(f,{size:4,html:i,as:"p",className:"image-text-feature__subtitle min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]"}),e("div",{className:p("image-text-feature__items tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:justify-around laptop:gap-0 flex w-full justify-around gap-0",{"flex-wrap":r,"laptop:flex-col flex-col":!r}),children:h.map((x,k)=>m("div",{className:"image-text-feature__item laptop:mt-[32px] desktop:mt-[48px] mt-[24px]",children:[m("div",{className:"image-text-feature__item-header flex flex-row items-center gap-[8px]",children:[e("img",{src:x.icon,alt:"icon",className:"image-text-feature__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]"}),e(o,{size:5,as:"h6",className:"image-text-feature__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:x.text})]}),e(f,{size:4,as:"p",html:x.desc,className:"image-text-feature__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]"})]},k))})]})]})});g.displayName="ImageTextFeature";var R=w(g);export{R as default};
 //# sourceMappingURL=ImageTextFeature.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageTextFeature/ImageTextFeature.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, padImage, items = [], imagePosition = 'left', theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageTextFeature\"\n      className={cn(\n        'image-text-feature',\n        theme === 'dark' ? 'aiui-dark' : '',\n        'text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px] flex flex-col items-center gap-[24px]',\n        className\n      )}\n    >\n      {/* \u56FE\u7247\u533A\u57DF */}\n      <Picture\n        source={`${pcImage?.url}, ${padImage?.url || pcImage?.url} 1024, ${mobileImage?.url || pcImage?.url} 768`}\n        alt={pcImage?.alt}\n        className={cn(\n          'image-text-feature__image tablet:aspect-[704/360] laptop:aspect-[824/560] aspect-[716/720] max-h-[560px] max-w-[824px] shrink-0',\n          {\n            'image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]':\n              imagePosition === 'left',\n            'image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]':\n              imagePosition === 'right',\n          }\n        )}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div\n        className={cn('image-text-feature__content laptop:w-fit flex w-full flex-col items-start justify-center', {\n          'order-1 laptop:order-2': imagePosition === 'left',\n          'order-1': imagePosition === 'right',\n        })}\n      >\n        {/* \u6807\u9898 */}\n        <Heading size={4} html={title} as=\"h3\" className=\"image-text-feature__title w-full text-left\" />\n\n        {/* \u526F\u6807\u9898 */}\n        {subtitle && (\n          <Text\n            size={4}\n            html={subtitle}\n            as=\"p\"\n            className=\"image-text-feature__subtitle min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]\"\n          />\n        )}\n\n        {/* \u529F\u80FD\u5217\u8868 */}\n        <div className=\"image-text-feature__items tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0 flex w-full flex-col justify-around gap-0\">\n          {items.map((item: ImageTextFeatureItem, index: number) => (\n            <div key={index} className=\"image-text-feature__item laptop:mt-[32px] desktop:mt-[48px] mt-[24px]\">\n              <div className=\"image-text-feature__item-header flex flex-row items-center gap-[8px]\">\n                <img\n                  src={item.icon}\n                  alt=\"icon\"\n                  className=\"image-text-feature__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]\"\n                />\n                <Heading\n                  size={5}\n                  as=\"h6\"\n                  className=\"image-text-feature__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                >\n                  {item.text}\n                </Heading>\n              </div>\n              <Text\n                size={4}\n                as=\"p\"\n                html={item.desc}\n                className=\"image-text-feature__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]\"\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n})\n\nImageTextFeature.displayName = 'ImageTextFeature'\n\nexport default withLayout(ImageTextFeature)\n"],
-  "mappings": "aAqCM,cAAAA,EAsCQ,QAAAC,MAtCR,oBApCN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACT,qBACAgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGa,GAAS,GAAG,KAAKE,GAAU,KAAOF,GAAS,GAAG,UAAUC,GAAa,KAAOD,GAAS,GAAG,OACnG,IAAKA,GAAS,IACd,UAAWX,EACT,kIACA,CACE,gGACEe,IAAkB,OACpB,kFACEA,IAAkB,OACtB,CACF,EACF,EAGAtB,EAAC,OACC,UAAWO,EAAG,2FAA4F,CACxG,yBAA0Be,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAvB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMY,EAAO,GAAG,KAAK,UAAU,6CAA6C,EAG7FC,GACClB,EAACO,EAAA,CACC,KAAM,EACN,KAAMW,EACN,GAAG,IACH,UAAU,yHACZ,EAIFlB,EAAC,OAAI,UAAU,6LACZ,SAAAsB,EAAM,IAAI,CAACI,EAA4BC,IACtC1B,EAAC,OAAgB,UAAU,wEACzB,UAAAA,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,OACC,IAAK0B,EAAK,KACV,IAAI,OACJ,UAAU,4LACZ,EACA1B,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,2GAET,SAAAqB,EAAK,KACR,GACF,EACA1B,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMmB,EAAK,KACX,UAAU,uIACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDd,EAAiB,YAAc,mBAE/B,IAAOe,EAAQnB,EAAWI,CAAgB",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageTextFeature", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index", "ImageTextFeature_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(\n  ({ data, className, isHorizontal }, ref) => {\n    const {\n      title,\n      subtitle,\n      pcImage,\n      mobileImage,\n      padImage,\n      items = [],\n      imagePosition = 'left',\n      theme = 'light',\n    } = data\n\n    const boxRef = useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: subtitle,\n    })\n\n    useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    return (\n      <section\n        ref={boxRef}\n        data-ui-component-id=\"ImageTextFeature\"\n        className={cn(\n          'image-text-feature',\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px] flex flex-col items-center gap-[24px]',\n          className\n        )}\n      >\n        {/* \u56FE\u7247\u533A\u57DF */}\n        <Picture\n          source={`${pcImage?.url}, ${padImage?.url || pcImage?.url} 1024, ${mobileImage?.url || pcImage?.url} 768`}\n          alt={pcImage?.alt}\n          className={cn(\n            'image-text-feature__image tablet:aspect-[704/360] laptop:aspect-[824/560] aspect-[716/720] max-h-[560px] max-w-[824px] shrink-0',\n            {\n              'image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]':\n                imagePosition === 'left',\n              'image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]':\n                imagePosition === 'right',\n            }\n          )}\n        />\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div\n          className={cn('image-text-feature__content laptop:w-fit flex w-full flex-col items-start justify-center', {\n            'order-1 laptop:order-2': imagePosition === 'left',\n            'order-1': imagePosition === 'right',\n          })}\n        >\n          {/* \u6807\u9898 */}\n          <Heading size={4} html={title} as=\"h3\" className=\"image-text-feature__title w-full text-left\" />\n\n          {/* \u526F\u6807\u9898 */}\n          {subtitle && (\n            <Text\n              size={4}\n              html={subtitle}\n              as=\"p\"\n              className=\"image-text-feature__subtitle min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]\"\n            />\n          )}\n\n          {/* \u529F\u80FD\u5217\u8868 */}\n          <div\n            className={cn(\n              'image-text-feature__items tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:justify-around laptop:gap-0 flex w-full justify-around gap-0',\n              {\n                'flex-wrap': isHorizontal,\n                'laptop:flex-col flex-col': !isHorizontal,\n              }\n            )}\n          >\n            {items.map((item: ImageTextFeatureItem, index: number) => (\n              <div key={index} className=\"image-text-feature__item laptop:mt-[32px] desktop:mt-[48px] mt-[24px]\">\n                <div className=\"image-text-feature__item-header flex flex-row items-center gap-[8px]\">\n                  <img\n                    src={item.icon}\n                    alt=\"icon\"\n                    className=\"image-text-feature__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] -translate-y-[12%] md:text-[40px]\"\n                  />\n                  <Heading\n                    size={5}\n                    as=\"h6\"\n                    className=\"image-text-feature__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                  >\n                    {item.text}\n                  </Heading>\n                </div>\n                <Text\n                  size={4}\n                  as=\"p\"\n                  html={item.desc}\n                  className=\"image-text-feature__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] -mt-[2px] text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nImageTextFeature.displayName = 'ImageTextFeature'\n\nexport default withLayout(ImageTextFeature)\n"],
+  "mappings": "aA+CQ,cAAAA,EA8CQ,QAAAC,MA9CR,oBA9CR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAC7B,CAAC,CAAE,KAAAY,EAAM,UAAAC,EAAW,aAAAC,CAAa,EAAGC,IAAQ,CAC1C,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,cAAAC,EAAgB,OAChB,MAAAC,EAAQ,OACV,EAAIX,EAEEY,EAAStB,EAAuB,IAAI,EAE1C,OAAAM,EAAYgB,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAEDhB,EAAoBc,EAAK,IAAMS,EAAO,OAAyB,EAG7DzB,EAAC,WACC,IAAKyB,EACL,uBAAqB,mBACrB,UAAWlB,EACT,qBACAiB,IAAU,OAAS,YAAc,GACjC,qIACAV,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGc,GAAS,GAAG,KAAKE,GAAU,KAAOF,GAAS,GAAG,UAAUC,GAAa,KAAOD,GAAS,GAAG,OACnG,IAAKA,GAAS,IACd,UAAWZ,EACT,kIACA,CACE,gGACEgB,IAAkB,OACpB,kFACEA,IAAkB,OACtB,CACF,EACF,EAGAvB,EAAC,OACC,UAAWO,EAAG,2FAA4F,CACxG,yBAA0BgB,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAxB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMa,EAAO,GAAG,KAAK,UAAU,6CAA6C,EAG7FC,GACCnB,EAACO,EAAA,CACC,KAAM,EACN,KAAMY,EACN,GAAG,IACH,UAAU,yHACZ,EAIFnB,EAAC,OACC,UAAWQ,EACT,oKACA,CACE,YAAaQ,EACb,2BAA4B,CAACA,CAC/B,CACF,EAEC,SAAAO,EAAM,IAAI,CAACI,EAA4BC,IACtC3B,EAAC,OAAgB,UAAU,wEACzB,UAAAA,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,OACC,IAAK2B,EAAK,KACV,IAAI,OACJ,UAAU,4LACZ,EACA3B,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,2GAET,SAAAsB,EAAK,KACR,GACF,EACA3B,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMoB,EAAK,KACX,UAAU,uIACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CACF,EAEAf,EAAiB,YAAc,mBAE/B,IAAOgB,EAAQpB,EAAWI,CAAgB",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageTextFeature", "data", "className", "isHorizontal", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index", "ImageTextFeature_default"]
 }

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

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

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

@@ -36,8 +36,8 @@ export interface KspProps {
     /** 自定义类名 */
     className?: string;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<KspProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<KspProps & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/Listing/components/PaidShipping/index.d.ts

@@ -1,6 +1,6 @@
 import type { Product, ProductVariant } from '../../types/product';
 import type { DeliveryCustom } from './type';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<{
+declare const _default: import("react").ForwardRefExoticComponent<{
     metafields: any;
     productList: Array<Product & {
         variant: ProductVariant;
@@ -8,8 +8,8 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<{
     variant: ProductVariant;
     onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void;
     className?: string;
-}, keyof import("../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../shared/Styles.js").StylesProps & import("../../../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+} & {
+    style?: string | React.CSSProperties;
+    container?: import("../../../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts

@@ -32,8 +32,8 @@ export type ModalData = {
 interface BenefitsTabProps {
     textConfig?: BenefitsTabTextConfig;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<BenefitsTabProps, keyof import("../../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: React.ForwardRefExoticComponent<BenefitsTabProps & {
+    style?: string | React.CSSProperties;
+    container?: import("../../../../../shared/Styles.js").ContainerProps["container"];
 } & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.d.ts

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

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.d.ts

@@ -1,8 +1,8 @@
 export interface ProductGalleryTabRef {
     scrollToTab: (index: number) => void;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<object, keyof import("../../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../../shared/Styles.js").StylesProps & import("../../../../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    style?: string | React.CSSProperties;
+    container?: import("../../../../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.d.ts

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

package/dist/esm/biz-components/Listing/components/PurchaseBar/index.d.ts

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

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

@@ -10,9 +10,9 @@ declare const MarqueeImageContent: {
     displayName: string;
 };
 declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MarqueeProps & React.RefAttributes<SwiperRef>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: React.ForwardRefExoticComponent<Omit<MarqueeProps & React.RefAttributes<SwiperRef> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export { MarqueeItem, MarqueeImageContent, MarqueeTextContent };

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as g,jsx as r,jsxs as v}from"react/jsx-runtime";import l,{useImperativeHandle as f,useRef as w}from"react";import{Picture as d,Text as x}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withLayout as M}from"../../shared/Styles.js";import{Swiper as y,SwiperSlide as q}from"swiper/react";import{Autoplay as N}from"swiper/modules";import{useExposure as C}from"../../hooks/useExposure.js";const S="image",R="marquee",u=l.forwardRef(({data:e,className:t},a)=>{const o=w(null);return f(a,()=>o.current),C(o,{componentType:S,componentName:R}),r(y,{direction:"horizontal",className:s("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:o,id:"Marquee"+e?.key,modules:[N],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((m,c)=>r(q,{children:r(p,{data:m})},m?.id+"SwiperSlide"+c))})});u.displayName="Marquee";const p=({data:e,configuration:t})=>v(g,{children:[e.type==="image"&&r(i,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&r(n,{text:e?.text,textClassName:t?.textClassName})]});p.displayName="MarqueeItem";const i=({image:e,imageClassName:t})=>r("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:r(d,{source:e?.url,alt:e?.alt||"",imgClassName:s("object-cover",t)})});i.displayName="MarqueeImageContent";const n=l.forwardRef(({text:e,textClassName:t},a)=>r(x,{as:"div",ref:a,html:e,className:s("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));n.displayName="MarqueeTextContent";var D=M(u);export{i as MarqueeImageContent,p as MarqueeItem,n as MarqueeTextContent,D as default};
+"use client";import{Fragment as R,jsx as r,jsxs as T}from"react/jsx-runtime";import u,{useImperativeHandle as w,useRef as M}from"react";import{Picture as y,Text as q}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as x}from"../../shared/Styles.js";import{Swiper as N,SwiperSlide as C}from"swiper/react";import{Autoplay as S}from"swiper/modules";import{useExposure as g}from"../../hooks/useExposure.js";const h="image",I="marquee",c=u.forwardRef(({data:e,className:t},o)=>{const s=M(null);w(o,()=>s.current),g(s,{componentType:h,componentName:I});const a=e?.items||[],f=a.length>0?[...a,...a,...a]:[];return r(N,{direction:"horizontal",className:i("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:s,id:"Marquee"+e?.key,modules:[S],autoplay:{delay:0,disableOnInteraction:!1,reverseDirection:e?.reverseDirection,pauseOnMouseEnter:!1},loop:!0,loopAdditionalSlides:a.length,allowTouchMove:!1,simulateTouch:!1,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:24},1025:{spaceBetween:64}},children:f?.map((l,d)=>r(C,{children:r(n,{data:l})},l?.id+"SwiperSlide"+d))})});c.displayName="Marquee";const n=({data:e,configuration:t})=>T(R,{children:[e.type==="image"&&r(p,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&r(m,{text:e?.text,textClassName:t?.textClassName})]});n.displayName="MarqueeItem";const p=({image:e,imageClassName:t})=>r("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:r(y,{source:e?.url,alt:e?.alt||"",imgClassName:i("object-cover",t)})});p.displayName="MarqueeImageContent";const m=u.forwardRef(({text:e,textClassName:t},o)=>r(q,{as:"div",ref:o,html:e,className:i("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));m.displayName="MarqueeTextContent";var O=x(c);export{p as MarqueeImageContent,n as MarqueeItem,m as MarqueeTextContent,O as default};
 //# sourceMappingURL=Marquee.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { 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": "aAsDU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBArDV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAA8B,QACnE,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,YAAAC,MAAgB,iBACzB,OAAS,eAAAC,MAAmB,6BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAUb,EAAM,WAAoC,CAAC,CAAE,KAAAc,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,EAAWf,EAAkB,IAAI,EACvC,OAAAD,EAAoBe,EAAK,IAAMC,EAAS,OAAoB,EAE5DP,EAAYO,EAAkD,CAC5D,cAAeN,EACf,cAAeC,CACjB,CAAC,EAGCd,EAACS,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAU,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAACL,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBK,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACI,EAAMC,IACvBrB,EAACU,EAAA,CACC,SAAAV,EAACsB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDN,EAAQ,YAAc,UAEtB,MAAMO,EAAc,CAAC,CAAE,KAAAN,EAAM,cAAAO,CAAc,IAEvCtB,EAAAF,EAAA,CACG,UAAAiB,EAAK,OAAS,SACbhB,EAACwB,EAAA,CAAoB,MAAOR,GAAM,MAAO,eAAgBO,GAAe,eAAgB,EAEzFP,EAAK,OAAS,QAAUhB,EAACyB,EAAA,CAAmB,KAAMT,GAAM,KAAM,cAAeO,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjD3B,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACK,EAAA,CAAQ,OAAQqB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcnB,EAAG,eAAgBoB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBvB,EAAM,WAAoD,CAAC,CAAE,KAAA0B,EAAM,cAAAC,CAAc,EAAGX,IAE3GlB,EAACM,EAAA,CACC,GAAG,MACH,IAAKY,EACL,KAAMU,EACN,UAAWrB,EAAG,oFAAqFsB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQtB,EAAWO,CAAO",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withLayout", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
+  "sourcesContent": ["'use client'\nimport React, { 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 { 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  // \u590D\u5236 items \u4EE5\u786E\u4FDD\u6709\u8DB3\u591F\u7684\u5185\u5BB9\u8FDB\u884C\u5FAA\u73AF\n  // Swiper loop \u6A21\u5F0F\u9700\u8981\u8DB3\u591F\u591A\u7684 slides\n  const items = data?.items || []\n  const duplicatedItems = items.length > 0 ? [...items, ...items, ...items] : []\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: 0,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n        pauseOnMouseEnter: false,\n      }}\n      loop={true}\n      loopAdditionalSlides={items.length}\n      allowTouchMove={false}\n      simulateTouch={false}\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: 24,\n        },\n        1025: {\n          spaceBetween: 64,\n        },\n      }}\n    >\n      {duplicatedItems?.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": "aA6DU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBA5DV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAA8B,QACnE,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,OAAS,YAAAC,MAAgB,iBACzB,OAAS,eAAAC,MAAmB,6BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAUb,EAAM,WAAoC,CAAC,CAAE,KAAAc,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,EAAWf,EAAkB,IAAI,EACvCD,EAAoBe,EAAK,IAAMC,EAAS,OAAoB,EAE5DP,EAAYO,EAAkD,CAC5D,cAAeN,EACf,cAAeC,CACjB,CAAC,EAID,MAAMM,EAAQJ,GAAM,OAAS,CAAC,EACxBK,EAAkBD,EAAM,OAAS,EAAI,CAAC,GAAGA,EAAO,GAAGA,EAAO,GAAGA,CAAK,EAAI,CAAC,EAE7E,OACEpB,EAACS,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAU,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAACL,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBK,GAAM,iBACxB,kBAAmB,EACrB,EACA,KAAM,GACN,qBAAsBI,EAAM,OAC5B,eAAgB,GAChB,cAAe,GACf,cAAc,OACd,MAAOJ,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,EAChB,EACA,KAAM,CACJ,aAAc,EAChB,CACF,EAEC,SAAAK,GAAiB,IAAI,CAACC,EAAMC,IAC3BvB,EAACU,EAAA,CACC,SAAAV,EAACwB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDR,EAAQ,YAAc,UAEtB,MAAMS,EAAc,CAAC,CAAE,KAAAR,EAAM,cAAAS,CAAc,IAEvCxB,EAAAF,EAAA,CACG,UAAAiB,EAAK,OAAS,SACbhB,EAAC0B,EAAA,CAAoB,MAAOV,GAAM,MAAO,eAAgBS,GAAe,eAAgB,EAEzFT,EAAK,OAAS,QAAUhB,EAAC2B,EAAA,CAAmB,KAAMX,GAAM,KAAM,cAAeS,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjD7B,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACK,EAAA,CAAQ,OAAQuB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcrB,EAAG,eAAgBsB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBzB,EAAM,WAAoD,CAAC,CAAE,KAAA4B,EAAM,cAAAC,CAAc,EAAGb,IAE3GlB,EAACM,EAAA,CACC,GAAG,MACH,IAAKY,EACL,KAAMY,EACN,UAAWvB,EAAG,oFAAqFwB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQxB,EAAWO,CAAO",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withLayout", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "items", "duplicatedItems", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
 }

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

@@ -34,8 +34,8 @@ export interface MarqueeReviewProps {
     /** 自定义类名 */
     className?: string;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MarqueeReviewProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<MarqueeReviewProps & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Media as MediaType } from '../../types/props.js';
+export interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** PC端媒体 */
+    pcImage?: MediaType;
+    /** 平板端媒体 */
+    padImage?: MediaType;
+    /** 移动端媒体 */
+    mobileImage?: MediaType;
+    /** 视频类名 */
+    videoClassName?: string;
+    /** 图片类名 */
+    imgClassName?: string;
+    /** 是否静音播放（仅视频） */
+    muted?: boolean;
+    /** 是否循环播放（仅视频） */
+    loop?: boolean;
+    /** 是否内联播放（仅视频） */
+    playsInline?: boolean;
+    /** 是否自动播放（仅视频） */
+    autoPlay?: boolean;
+    /** 视频预览图 */
+    poster?: string;
+}
+/**
+ * Media - 智能媒体组件
+ *
+ * @description 根据媒体类型自动选择使用 video 标签或 Picture 组件
+ * 支持响应式媒体源，如果任意媒体类型是视频，则使用 video 标签渲染
+ */
+declare const Media: React.ForwardRefExoticComponent<MediaProps & React.RefAttributes<HTMLDivElement>>;
+export default Media;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as a}from"react/jsx-runtime";import h from"react";import{useMediaQuery as s}from"react-responsive";import{Picture as z}from"../../components/index.js";import{cn as t}from"../../helpers/index.js";const l=h.forwardRef(({pcImage:o,padImage:r,mobileImage:e,className:d,videoClassName:p,imgClassName:n,muted:u=!0,loop:m=!0,playsInline:c=!0,autoPlay:y=!0,poster:f,...M},v)=>{const T=s({query:"(max-width: 768px)"}),N=s({query:"(max-width: 1024px)"}),P=[o,r,e].some(w=>w?.mimeType==="video/mp4"),i=T?e:N?r||e:o,b=i?.mimeType==="video/mp4"?i.url:void 0,x=f||(i?.mimeType!=="video/mp4"?i?.url:void 0);return a("div",{ref:v,className:t("media-wrapper",d),...M,children:P?a("video",{src:b,poster:x,className:t("size-full object-cover",p),muted:u,loop:m,playsInline:c,autoPlay:y,"aria-label":i?.alt||""}):a(z,{className:"size-full",imgClassName:t("size-full object-cover",n),alt:o?.alt||"",source:`${o?.url||""} , ${r?.url??(e?.url||"")} 1024, ${e?.url||""} 767`})})});l.displayName="Media";var $=l;export{$ as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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 */\n  pcImage?: MediaType\n  /** \u5E73\u677F\u7AEF\u5A92\u4F53 */\n  padImage?: MediaType\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53 */\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}\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      padImage,\n      mobileImage,\n      className,\n      videoClassName,\n      imgClassName,\n      muted = true,\n      loop = true,\n      playsInline = true,\n      autoPlay = true,\n      poster,\n      ...props\n    },\n    ref\n  ) => {\n    // \u54CD\u5E94\u5F0F\u67E5\u8BE2\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u4EFB\u4F55\u5A92\u4F53\u662F\u89C6\u9891\u7C7B\u578B\n    const hasVideo = [pcImage, padImage, mobileImage].some(media => media?.mimeType === 'video/mp4')\n\n    // \u83B7\u53D6\u5F53\u524D\u8BBE\u5907\u5BF9\u5E94\u7684\u5A92\u4F53\n    const currentMedia = isMobile ? mobileImage : isPad ? padImage || mobileImage : pcImage\n\n    // \u83B7\u53D6\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE\u7247\n    const videoSrc = currentMedia?.mimeType === 'video/mp4' ? currentMedia.url : undefined\n    const imagePoster = poster || (currentMedia?.mimeType !== 'video/mp4' ? currentMedia?.url : undefined)\n\n    return (\n      <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n        {hasVideo ? (\n          <video\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          />\n        ) : (\n          <Picture\n            className=\"size-full\"\n            imgClassName={cn('size-full object-cover', imgClassName)}\n            alt={pcImage?.alt || ''}\n            source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
+  "mappings": "aAwEU,cAAAA,MAAA,oBAtEV,OAAOC,MAAW,QAClB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,MAAe,4BAExB,OAAS,MAAAC,MAAU,yBA+BnB,MAAMC,EAAQJ,EAAM,WAClB,CACE,CACE,QAAAK,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,GAAGC,CACL,EACAC,IACG,CAEH,MAAMC,EAAWjB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDkB,EAAQlB,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAGtDmB,EAAW,CAACf,EAASC,EAAUC,CAAW,EAAE,KAAKc,GAASA,GAAO,WAAa,WAAW,EAGzFC,EAAeJ,EAAWX,EAAcY,EAAQb,GAAYC,EAAcF,EAG1EkB,EAAWD,GAAc,WAAa,YAAcA,EAAa,IAAM,OACvEE,EAAcT,IAAWO,GAAc,WAAa,YAAcA,GAAc,IAAM,QAE5F,OACEvB,EAAC,OAAI,IAAKkB,EAAK,UAAWd,EAAG,gBAAiBK,CAAS,EAAI,GAAGQ,EAC3D,SAAAI,EACCrB,EAAC,SACC,IAAKwB,EACL,OAAQC,EACR,UAAWrB,EAAG,yBAA0BM,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYQ,GAAc,KAAO,GACnC,EAEAvB,EAACG,EAAA,CACC,UAAU,YACV,aAAcC,EAAG,yBAA0BO,CAAY,EACvD,IAAKL,GAAS,KAAO,GACrB,OAAQ,GAAGA,GAAS,KAAO,EAAE,MAAMC,GAAU,MAAQC,GAAa,KAAO,GAAG,UAAUA,GAAa,KAAO,EAAE,OAC9G,EAEJ,CAEJ,CACF,EAEAH,EAAM,YAAc,QAEpB,IAAOqB,EAAQrB",
+  "names": ["jsx", "React", "useMediaQuery", "Picture", "cn", "Media", "pcImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "props", "ref", "isMobile", "isPad", "hasVideo", "media", "currentMedia", "videoSrc", "imagePoster", "Media_default"]
+}