@anker-in/headless-ui 1.1.9-alpha.1764084619241 → 1.1.9-alpha.1764141671439

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { Media, Theme } from '../../types/props.js';
+/**
+ * KSP 卡片项数据结构
+ */
+export interface KspCardItem {
+    /** 标题 */
+    title?: string;
+    /** 描述 */
+    desc?: string;
+    /** 桌面端图片 URL */
+    image?: Media;
+    /** 移动端图片 URL */
+    mobImage?: Media;
+    /** 桌面端视频 URL */
+    video?: Media;
+    /** 移动端视频 URL */
+    mobVideo?: Media;
+}
+/**
+ * KSP 数据结构
+ */
+export interface KspData {
+    /** 主标题 */
+    title?: string;
+    /** KSP 卡片列表（需要 7 个项） */
+    items: KspCardItem[];
+    /** 主题，默认 light */
+    theme?: Theme;
+}
+/**
+ * Ksp 组件 Props
+ */
+export interface KspProps {
+    /** KSP 数据 */
+    data: KspData;
+    /** 自定义类名 */
+    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 | undefined;
+    data?: Record<string, any> | undefined;
+} & import("react").RefAttributes<any>>;
+export default _default;

package/dist/cjs/biz-components/Ksp/index.js

@@ -0,0 +1,2 @@
+"use strict";var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var k=(l,a)=>{for(var o in a)r(l,o,{get:a[o],enumerable:!0})},f=(l,a,o,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of x(a))!b.call(l,s)&&s!==o&&r(l,s,{get:()=>a[s],enumerable:!(t=u(a,s))||t.enumerable});return l};var g=l=>f(r({},"__esModule",{value:!0}),l);var w={};k(w,{default:()=>C});module.exports=g(w);var p=require("react/jsx-runtime"),e=require("../../components/index.js"),i=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const h=({title:l,desc:a,image:o,mobImage:t,video:s,mobVideo:c,className:n,theme:m})=>(0,p.jsxs)("div",{className:(0,i.cn)("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":m==="dark"},n),children:[s&&c?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:s?.url,poster:o?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),(0,p.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block -translate-y-[80px] object-contain object-center"})]}):(o||t)&&(0,p.jsx)(e.Picture,{source:o?.url||t?.url,alt:o?.alt||t?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,p.jsxs)("div",{className:"ksp-card-content desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px] absolute left-[16px] top-[16px]",children:[(0,p.jsx)(e.Heading,{size:3,html:l,className:"ksp-card-title tablet:block hidden w-full"}),(0,p.jsx)(e.Heading,{size:2,html:l,className:"ksp-card-title tablet:hidden tablet:w-[340px] block w-full"}),(0,p.jsx)(e.Text,{size:2,html:a,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]})]}),N={4:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-2 laptop:col-span-6"},5:{0:"col-span-2 laptop:col-span-6",1:"col-span-2 tablet:col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-1 laptop:col-span-4",4:"col-span-2 tablet:col-span-1 laptop:col-span-3"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4"},7:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4",6:"col-span-2 laptop:col-span-6"},8:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-4"},9:{0:"col-span-2 laptop:col-span-3",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-4",3:"col-span-1 tablet:col-span-2 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-3",8:"col-span-2 laptop:col-span-4"}},v=(l,a)=>N[a]?.[l]||"";function y({data:l,className:a}){const{title:o,items:t,theme:s="light"}=l;return(0,p.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,i.cn)("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":s==="dark"},a),children:[(0,p.jsx)(e.Heading,{as:"h1",size:4,html:o,className:"ksp-title laptop:text-center text-left text-white"}),(0,p.jsx)("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:t.map((c,n)=>(0,p.jsx)(h,{...c,className:v(n,t.length)},n))})]})}var C=(0,d.withLayout)(y);
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Ksp/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
+  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u4E3B\u9898 */\n  theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block -translate-y-[80px] object-contain object-center\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image size-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px] absolute left-[16px] top-[16px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full\" />\n        <Heading size={2} html={title} className=\"ksp-card-title tablet:hidden tablet:w-[340px] block w-full\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]\"\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-2 laptop:col-span-6',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-1 laptop:col-span-4',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n    6: 'col-span-2 laptop:col-span-6',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-4',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-3',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-3',\n    8: 'col-span-2 laptop:col-span-4',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n      <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n        {items.map((item, index) => (\n          <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgEQ,IAAAI,EAAA,6BAhERC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAkD3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,CAAM,OAEjF,QAAC,OACC,aAAW,MACT,kEACA,CACE,YAAaA,IAAU,MACzB,EACAD,CACF,EAEC,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,qJACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,gDACL,EACA,EAAG,CACD,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAc,EAAO,MAAAP,EAAQ,OAAQ,EAAIM,EAC1C,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MACT,yGACA,CACE,YAAaN,IAAU,MACzB,EACAD,CACF,EAEA,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAc,EAAM,IAAI,CAACC,EAAML,OAChB,OAACX,EAAA,CAAuB,GAAGgB,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOjB,KAAQ,cAAWmB,CAAG",
+  "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "theme", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item"]
+}

package/dist/cjs/biz-components/Listing/BizProductProvider.d.ts

@@ -131,5 +131,5 @@ export interface ProductContextType {
 }
 export declare const BizProductContext: React.Context<ProductContextType>;
 export declare const useBizProductContext: () => ProductContextType;
-declare const ProductProvider: ({ product, isLogin, profile, isMobile, isDesktop, children, renderRating, freeGift, exchangePurchase, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, checkedExchangePurchase, setCheckedExchangePurchase, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, setSavingDetail, selectedVariants, onAddToCart, onBuyNow, creditsRedemption, memberFunctionResult, openModal, openSignInPopup, openAuthCodePopup, openSignUpPopup, renderInstallments, onUseCouponChange, onUseMemberDiscountChange, discount, buyNowLoading, addToCartLoading, }: PropsWithChildren<Omit<ProductContextType, "joinedRecommendBuyProducts" | "setJoinedRecommendBuyProducts" | "addOrder" | "setAddOrder">>) => import("react/jsx-runtime").JSX.Element;
+declare const ProductProvider: ({ product, isLogin, profile, isMobile, isDesktop, children, renderRating, freeGift, exchangePurchase, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, checkedExchangePurchase, setCheckedExchangePurchase, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, setSavingDetail, selectedVariants, onAddToCart, onBuyNow, creditsRedemption, memberFunctionResult, openModal, openSignInPopup, openAuthCodePopup, openSignUpPopup, renderInstallments, onUseCouponChange, onUseMemberDiscountChange, discount, buyNowLoading, addToCartLoading, }: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts' | 'addOrder' | 'setAddOrder'>>) => import("react/jsx-runtime").JSX.Element;
 export default ProductProvider;

package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var x=(e,l)=>{for(var s in l)n(e,s,{get:l[s],enumerable:!0})},f=(e,l,s,p)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of d(l))!c.call(e,a)&&a!==s&&n(e,a,{get:()=>l[a],enumerable:!(p=g(l,a))||p.enumerable});return e};var v=e=>f(n({},"__esModule",{value:!0}),e);var b={};x(b,{ShippingPolicyModal:()=>h});module.exports=v(b);var t=require("react/jsx-runtime"),o=require("../../../../components/index.js"),i=require("../../../../components/index.js");const h=({data:e,onClose:l,open:s})=>(0,t.jsx)(i.Dialog,{open:s,onOpenChange:l,children:(0,t.jsxs)(i.DialogContent,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,t.jsx)(i.DialogHeader,{className:"laptop:pt-4 laptop:pb-3  pb-2 pt-4",children:(0,t.jsx)(i.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),(0,t.jsxs)("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[(0,t.jsx)(o.Text,{className:"text-[20px] font-bold leading-[1.2] md:text-[16px]",html:e?.shippingCoupon?.title}),(0,t.jsx)("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((p,a)=>(0,t.jsxs)("li",{className:"text-[18px]",children:[(0,t.jsxs)("span",{className:"text-[#86868C]",children:[a+1,"."]}),(0,t.jsx)("span",{className:"ml-[4px] font-bold text-[#86868C]",children:p})]},a))}),(0,t.jsxs)("div",{className:"mt-[24px] md:mt-[16px]",children:[(0,t.jsx)(o.Text,{className:"text-[18px] font-bold leading-[1.2]",html:e?.shippingService?.title}),(0,t.jsx)("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((p,a)=>(0,t.jsxs)("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[(0,t.jsx)(o.Text,{as:"p",className:"text-base font-bold leading-[1.2]",html:p.title}),(0,t.jsx)("div",{className:"mt-3 grid grid-flow-row gap-[4px]",children:p.list.map((r,m)=>(0,t.jsx)(o.Text,{as:"p",className:"text-base font-bold text-[#86868C]",children:r},m))})]},a))})]}),(0,t.jsx)(o.Link,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});
+"use strict";var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var c=(e,l)=>{for(var s in l)n(e,s,{get:l[s],enumerable:!0})},f=(e,l,s,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of g(l))!x.call(e,i)&&i!==s&&n(e,i,{get:()=>l[i],enumerable:!(o=d(l,i))||o.enumerable});return e};var v=e=>f(n({},"__esModule",{value:!0}),e);var N={};c(N,{ShippingPolicyModal:()=>h});module.exports=v(N);var t=require("react/jsx-runtime"),p=require("../../../../components/index.js"),a=require("../../../../components/index.js");const h=({data:e,onClose:l,open:s})=>(0,t.jsx)(a.Dialog,{open:s,onOpenChange:l,children:(0,t.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,t.jsx)(a.DialogHeader,{className:"laptop:pt-4 pb-2 pt-4",children:(0,t.jsx)(a.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),(0,t.jsxs)("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[(0,t.jsx)(p.Text,{className:"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]",html:e?.shippingCoupon?.title}),(0,t.jsx)("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((o,i)=>(0,t.jsxs)("li",{className:"flex text-[18px]",children:[(0,t.jsxs)("span",{className:"text-[#86868C]",children:[i+1,"."]}),(0,t.jsx)("span",{className:"ml-[4px] font-bold text-[#86868C]",children:o})]},i))}),(0,t.jsxs)("div",{className:"mt-[24px] md:mt-[16px]",children:[(0,t.jsx)(p.Text,{className:"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]",html:e?.shippingService?.title}),(0,t.jsx)("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((o,i)=>(0,t.jsxs)("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[(0,t.jsx)(p.Text,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:o.title}),(0,t.jsx)("div",{className:"mt-3 grid grid-flow-row",children:o.list.map((r,m)=>(0,t.jsx)(p.Text,{as:"p",className:"text-base font-bold text-[#86868C]",children:r},m))})]},i))})]}),(0,t.jsx)(p.Link,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});
 //# sourceMappingURL=ShippingPolicyModal.js.map

package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
-  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3  pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n          <Text className=\"text-[20px] font-bold leading-[1.2] md:text-[16px]\" html={data?.shippingCoupon?.title} />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"text-[18px]\" key={index}>\n                <span className=\"text-[#86868C]\">{index + 1}.</span>\n                <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[18px] font-bold leading-[1.2]\" html={data?.shippingService?.title} />\n            <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n                  <Text as=\"p\" className=\"text-base font-bold leading-[1.2]\" html={item.title} />\n                  <div className=\"mt-3 grid grid-flow-row gap-[4px]\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAuCU,IAAAI,EAAA,6BAvCVC,EAA2B,2CAC3BA,EAAiE,2CA8B1D,MAAMH,EAAsB,CAAC,CAAE,KAAAI,EAAM,QAAAC,EAAS,KAAAC,CAAK,OAEtD,OAAC,UAAO,KAAMA,EAAM,aAAcD,EAChC,oBAAC,iBACC,iBAAiB,UACjB,UAAU,oWAEV,oBAAC,gBAAa,UAAU,qCACtB,mBAAC,eAAY,UAAU,qDAAsD,SAAAD,GAAM,MAAM,EAC3F,KACA,QAAC,OAAI,UAAU,gCACb,oBAAC,QAAK,UAAU,qDAAqD,KAAMA,GAAM,gBAAgB,MAAO,KACxG,OAAC,MAAG,UAAU,4DACX,SAAAA,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,OACrC,QAAC,MAAG,UAAU,cACZ,qBAAC,QAAK,UAAU,iBAAkB,UAAAA,EAAQ,EAAE,KAAC,KAC7C,OAAC,QAAK,UAAU,oCAAqC,SAAAD,EAAK,IAF3BC,CAGjC,CACD,EACH,KACA,QAAC,OAAI,UAAU,yBACb,oBAAC,QAAK,UAAU,sCAAsC,KAAMJ,GAAM,iBAAiB,MAAO,KAC1F,OAAC,OAAI,UAAU,yDACZ,SAAAA,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,OACtC,QAAC,OAAI,UAAU,kCACb,oBAAC,QAAK,GAAG,IAAI,UAAU,oCAAoC,KAAMD,EAAK,MAAO,KAC7E,OAAC,OAAI,UAAU,oCACZ,SAAAA,EAAK,KAAK,IAAI,CAACE,EAASC,OACvB,OAAC,QAAK,GAAG,IAAI,UAAU,qCACpB,SAAAD,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,KAEA,OAAC,QACC,UAAU,0EACV,KAAM,GAAGJ,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
+  "sourcesContent": ["import { Text, Link } from '../../../../components/index.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n          <Text\n            className=\"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]\"\n            html={data?.shippingCoupon?.title}\n          />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"flex text-[18px]\" key={index}>\n                <span className=\"text-[#86868C]\">{index + 1}.</span>\n                <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]\" html={data?.shippingService?.title} />\n            <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n                  <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n                  <div className=\"mt-3 grid grid-flow-row\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAuCU,IAAAI,EAAA,6BAvCVC,EAA2B,2CAC3BA,EAAiE,2CA8B1D,MAAMH,EAAsB,CAAC,CAAE,KAAAI,EAAM,QAAAC,EAAS,KAAAC,CAAK,OAEtD,OAAC,UAAO,KAAMA,EAAM,aAAcD,EAChC,oBAAC,iBACC,iBAAiB,UACjB,UAAU,oWAEV,oBAAC,gBAAa,UAAU,wBACtB,mBAAC,eAAY,UAAU,qDAAsD,SAAAD,GAAM,MAAM,EAC3F,KACA,QAAC,OAAI,UAAU,gCACb,oBAAC,QACC,UAAU,oEACV,KAAMA,GAAM,gBAAgB,MAC9B,KACA,OAAC,MAAG,UAAU,4DACX,SAAAA,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,OACrC,QAAC,MAAG,UAAU,mBACZ,qBAAC,QAAK,UAAU,iBAAkB,UAAAA,EAAQ,EAAE,KAAC,KAC7C,OAAC,QAAK,UAAU,oCAAqC,SAAAD,EAAK,IAFtBC,CAGtC,CACD,EACH,KACA,QAAC,OAAI,UAAU,yBACb,oBAAC,QAAK,UAAU,sDAAsD,KAAMJ,GAAM,iBAAiB,MAAO,KAC1G,OAAC,OAAI,UAAU,yDACZ,SAAAA,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,OACtC,QAAC,OAAI,UAAU,kCACb,oBAAC,QAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMD,EAAK,MAAO,KAC7F,OAAC,OAAI,UAAU,0BACZ,SAAAA,EAAK,KAAK,IAAI,CAACE,EAASC,OACvB,OAAC,QAAK,GAAG,IAAI,UAAU,qCACpB,SAAAD,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,KAEA,OAAC,QACC,UAAU,0EACV,KAAM,GAAGJ,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
   "names": ["ShippingPolicyModal_exports", "__export", "ShippingPolicyModal", "__toCommonJS", "import_jsx_runtime", "import_components", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
 }

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

@@ -1,15 +1,28 @@
-import type { Product, ProductVariant } from '../../types/product';
+/// <reference types="react" />
+import type { ProductVariant } from '../../types/product';
 import type { DeliveryCustom } from './type';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<{
     metafields: any;
-    productList: Array<Product & {
+    productList: ({
+        path?: string | undefined;
+        images: import("../../types/graphql.js").Image[];
+        media: import("../../types/product").ProductMedia[];
+        variants: ProductVariant[];
+        price: import("../../types/product").ProductPrice;
+        options: import("../../types/product").ProductOption[];
+        metafields?: {
+            [key: string]: any;
+        } | undefined;
+        slug: string;
+        payload?: any;
+    } & Omit<import("../../types/graphql.js").Product, "media" | "metafields" | "price" | "options" | "images" | "variants"> & {
         variant: ProductVariant;
-    }>;
+    })[];
     variant: ProductVariant;
     onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void;
-    className?: string;
+    className?: string | undefined;
 }, keyof import("../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../shared/Styles.js").StylesProps & import("../../../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -33,7 +33,7 @@ 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js

@@ -1,2 +1,2 @@
-"use strict";var m=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var l in r)m(o,l,{get:r[l],enumerable:!0})},L=(o,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of B(r))!D.call(o,d)&&d!==l&&m(o,d,{get:()=>r[d],enumerable:!(a=z(r,d))||a.enumerable});return o};var O=o=>L(m({},"__esModule",{value:!0}),o);var S={};F(S,{default:()=>R});module.exports=O(S);var t=require("react/jsx-runtime"),i=require("../../../../../../components/index.js"),p=require("../../../../../../helpers/index.js"),c=require("react"),k=require("../../../../BizProductProvider.js"),v=require("../../../../utils/index.js"),C=require("../../../../../AiuiProvider/index.js"),N=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:o="us"}=(0,C.useAiuiContext)(),{freeGift:r,checkedGift:l,setCheckedGift:a,setCheckedBundle:d,setSavingDetail:y,savingDetail:P,setJoinedRecommendBuyProducts:f,joinedRecommendBuyProducts:u,setAddOrder:x}=(0,k.useBizProductContext)(),{title:E,giftList:b=[],freeLabel:G}=r||{},s=(0,c.useMemo)(()=>b?.filter(e=>e.availableForSale),[b]),h=e=>{l?.id===e.id?(a?.(void 0),y?.({...P,freeGift:0}),f?.({...u,gift:{value:void 0,canOperate:!0}}),x?.(n=>n.filter(g=>g!=="gift"))):(a?.(e),f?.({...u,gift:{value:e,canOperate:!1}}),x?.(n=>[...n.filter(w=>w!=="gift"),"gift"]))};return(0,c.useEffect)(()=>{s?.[0]&&h(s?.[0])},[s]),s?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-free-gift",children:[(0,t.jsx)(i.Text,{size:3,className:"font-bold leading-[1.2]",html:E}),(0,t.jsx)("div",{className:"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:s.map(e=>(0,t.jsxs)("div",{className:(0,p.cn)("rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":l?.id===e.id}),children:[(0,t.jsx)(i.Checkbox,{onCheckedChange:()=>h(e),size:"lg",className:(0,p.cn)("rounded-full border-2 border-[#E4E5E6]",{"border-brand":l?.id===e.id}),id:e.id,checked:l?.id===e.id,value:e.id}),(0,t.jsxs)("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(i.Picture,{source:e.image?.url,className:"size-12 shrink-0"}),(0,t.jsx)(i.Text,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),(0,t.jsxs)("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[(0,t.jsx)(i.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:G}),(0,t.jsx)(i.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,v.formatPrice)({amount:e.price.amount,locale:o,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var R=(0,N.withLayout)(A);
+"use strict";var c=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var F=(o,r)=>{for(var l in r)c(o,l,{get:r[l],enumerable:!0})},L=(o,r,l,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of B(r))!D.call(o,d)&&d!==l&&c(o,d,{get:()=>r[d],enumerable:!(a=z(r,d))||a.enumerable});return o};var O=o=>L(c({},"__esModule",{value:!0}),o);var S={};F(S,{default:()=>R});module.exports=O(S);var t=require("react/jsx-runtime"),i=require("../../../../../../components/index.js"),n=require("../../../../../../helpers/index.js"),h=require("react"),g=require("../../../../BizProductProvider.js"),k=require("../../../../utils/index.js"),v=require("../../../../../AiuiProvider/index.js"),C=require("../../../../../../shared/Styles.js");const A=()=>{const{locale:o="us"}=(0,v.useAiuiContext)(),{freeGift:r,checkedGift:l,setCheckedGift:a,setCheckedBundle:d,setSavingDetail:N,savingDetail:y,setJoinedRecommendBuyProducts:m,joinedRecommendBuyProducts:p,setAddOrder:f}=(0,g.useBizProductContext)(),{title:P,giftList:u=[],freeLabel:E}=r||{},x=(0,h.useMemo)(()=>u?.filter(e=>e.availableForSale),[u]),G=e=>{l?.id===e.id?(a?.(void 0),N?.({...y,freeGift:0}),m?.({...p,gift:{value:void 0,canOperate:!0}}),f?.(s=>s.filter(b=>b!=="gift"))):(a?.(e),m?.({...p,gift:{value:e,canOperate:!1}}),f?.(s=>[...s.filter(w=>w!=="gift"),"gift"]))};return x?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-free-gift",children:[(0,t.jsx)(i.Text,{size:3,className:"font-bold leading-[1.2]",html:P}),(0,t.jsx)("div",{className:"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3",children:x.map(e=>(0,t.jsxs)("div",{className:(0,n.cn)("rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold",{"border-brand":l?.id===e.id}),children:[(0,t.jsx)(i.Checkbox,{onCheckedChange:()=>G(e),size:"lg",className:(0,n.cn)("rounded-full border-2 border-[#E4E5E6]",{"border-brand":l?.id===e.id}),id:e.id,checked:l?.id===e.id,value:e.id}),(0,t.jsxs)("label",{htmlFor:e.id,className:"flex w-full cursor-pointer items-center justify-between gap-4 py-6",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)(i.Picture,{source:e.image?.url,className:"size-12 shrink-0"}),(0,t.jsx)(i.Text,{className:"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold",html:e.product.title})]}),(0,t.jsxs)("div",{className:"tablet:flex-row flex shrink-0 flex-col items-center gap-1",children:[(0,t.jsx)(i.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold",html:E}),(0,t.jsx)(i.Text,{className:"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through",html:(0,k.formatPrice)({amount:e.price.amount,locale:o,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var R=(0,C.withLayout)(A);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useEffect, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setSavingDetail,\n    savingDetail,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = freeGift || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedGift?.id === value.id) {\n      setCheckedGift?.(undefined)\n      setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n    } else {\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'gift')\n        return [...filtered, 'gift']\n      })\n    }\n  }\n\n  useEffect(() => {\n    // \u5982\u679C\u7B2C\u4E00\u4E2A\u793C\u7269\u53EF\u7528\uFF0C\u5219\u9009\u4E2D\u5B83\n    availableGifts?.[0] && handleCheckboxClick(availableGifts?.[0])\n  }, [availableGifts])\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn('rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold', {\n              ['border-brand']: checkedGift?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-2 border-[#E4E5E6]', {\n                'border-brand': checkedGift?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedGift?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 shrink-0\" />\n                <Text\n                  className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n                <Text className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\" html={freeLabel} />\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductFreeGift)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEM,IAAAI,EAAA,6BAjENC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAmC,iBACnCC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAOA,SALA,aAAU,IAAM,CAEdL,IAAiB,CAAC,GAAKE,EAAoBF,IAAiB,CAAC,CAAC,CAChE,EAAG,CAACA,CAAc,CAAC,EAEdA,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAIM,MAClB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBjB,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBjB,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,mBAAmB,KAC/D,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAMP,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQO,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAe",
+  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useEffect, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setSavingDetail,\n    savingDetail,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = freeGift || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedGift?.id === value.id) {\n      setCheckedGift?.(undefined)\n      setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'gift'))\n    } else {\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        gift: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'gift')\n        return [...filtered, 'gift']\n      })\n    }\n  }\n\n  // useEffect(() => {\n  //   // \u5982\u679C\u7B2C\u4E00\u4E2A\u793C\u7269\u53EF\u7528\uFF0C\u5219\u9009\u4E2D\u5B83\n  //   availableGifts?.[0] && handleCheckboxClick(availableGifts?.[0])\n  // }, [availableGifts])\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn('rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold', {\n              ['border-brand']: checkedGift?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-2 border-[#E4E5E6]', {\n                'border-brand': checkedGift?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedGift?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 shrink-0\" />\n                <Text\n                  className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n                <Text className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\" html={freeLabel} />\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductFreeGift)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEM,IAAAI,EAAA,6BAjENC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAmC,iBACnCC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIX,GAAY,CAAC,EACnDY,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAa,KAAOc,EAAM,IAC5Bb,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAEDC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,MAAM,CAAC,IAEpDf,IAAiBa,CAAK,EACtBT,IAAgC,CAC9B,GAAGC,EACH,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,MAAM,EACzB,MAAM,CAC5B,EAEL,EAOA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAIM,MAClB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBjB,GAAa,KAAOiB,EAAK,EAC7C,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBjB,GAAa,KAAOiB,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASjB,GAAa,KAAOiB,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,mBAAmB,KAC/D,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAMP,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQO,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAe",
   "names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "import_Styles", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift"]
 }

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js

@@ -1,2 +1,2 @@
-"use strict";var h=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(t,r)=>{for(var o in r)u(t,o,{get:r[o],enumerable:!0})},b=(t,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of G(r))!I.call(t,s)&&s!==o&&u(t,s,{get:()=>r[s],enumerable:!(d=E(r,s))||d.enumerable});return t};var z=(t,r,o)=>(o=t!=null?h(w(t)):{},b(r||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),P=t=>b(u({},"__esModule",{value:!0}),t);var F={};k(F,{default:()=>_});module.exports=P(F);var e=require("react/jsx-runtime"),x=require("react"),a=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const T=()=>{const{locale:t="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[s,g]=(0,x.useState)();(0,x.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(l=>l.handle===s)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(a.Dialog,{children:[(0,e.jsx)(a.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(a.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(a.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:r?.compare})}),(0,e.jsxs)("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[(0,e.jsxs)(a.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(a.Text,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),s&&(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"rounded-btn h-[48px] px-4",value:s,onChange:l=>{g(l)},list:o.options})})]}),(0,e.jsxs)(a.Grid,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>(0,e.jsx)(a.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:l.images[0].url,alt:l.title,className:"size-[100px]",role:"presentation"})},i))]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>{const p=l.variants[0];return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:p.price.amount<9999999&&(0,e.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)("span",{className:"text-[18px] font-bold",children:(0,f.formatPrice)({locale:t,amount:p?.coupons?.[0]?.variant_price4wscode||p.price.amount,currencyCode:p.price.currencyCode})}),Number(p?.coupons?.[0]?.variant_price4wscode)>0&&(0,e.jsx)("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:(0,f.formatPrice)({locale:t,amount:p.price.amount,currencyCode:p.price.currencyCode})})]})})})},i)})]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:r?.color||"Color"})}),m.map((l,i)=>{const p=l.options?.find(c=>["color","colour","couleur"].find(n=>c.name.toLowerCase().includes(n)))?.values.map(c=>c.label);return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:p?.length&&(0,e.jsx)("div",{className:"flex items-center gap-4",children:p.map(c=>(0,e.jsx)(D.ShopifyColorOption,{label:c,className:"size-6"},c))})},i)})]}),(0,e.jsx)(a.Grid,{className:"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]",children:o.specificationKeys?.map(l=>(0,e.jsxs)(a.GridItem,{span:12,className:"laptop:py-3 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:l}),m.map((i,p)=>{let n=i.metafields?.global?.specifications?.find(C=>C?.key===l)?.value||"";switch(n.trim().toLowerCase()){case"true":n="\u2714\uFE0F";break;case"false":n="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#1D1D1F]",children:n})},p)})]},l))})]})]})]}):null};var _=T;
+"use strict";var h=Object.create;var u=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var k=(t,r)=>{for(var o in r)u(t,o,{get:r[o],enumerable:!0})},b=(t,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of G(r))!I.call(t,s)&&s!==o&&u(t,s,{get:()=>r[s],enumerable:!(d=E(r,s))||d.enumerable});return t};var z=(t,r,o)=>(o=t!=null?h(w(t)):{},b(r||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),P=t=>b(u({},"__esModule",{value:!0}),t);var F={};k(F,{default:()=>_});module.exports=P(F);var e=require("react/jsx-runtime"),x=require("react"),a=require("../../../../../../components/index.js"),v=require("../../../../BizProductProvider.js"),N=z(require("./Select.js")),y=require("../../../../../AiuiProvider/index.js"),f=require("../../../../utils/index.js"),D=require("./ShopifyColorOption.js");const T=()=>{const{locale:t="us",copyWriting:r}=(0,y.useAiuiContext)(),{compareData:o,product:d}=(0,v.useBizProductContext)(),[s,g]=(0,x.useState)();(0,x.useEffect)(()=>{g(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(l=>l.handle===s)?.product].filter(Boolean);return o?.specificationKeys?(0,e.jsxs)(a.Dialog,{children:[(0,e.jsx)(a.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:r?.compare}),(0,e.jsxs)(a.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(a.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(a.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:r?.compare})}),(0,e.jsxs)("div",{className:"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4",children:[(0,e.jsxs)(a.Grid,{className:"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#595959]",children:r?.product||"Product"})}),(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(a.Text,{as:"div",className:"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold",html:o.currentProductCompareData?.shortName||d.title})}),s&&(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)(N.default,{className:"rounded-btn h-[48px] px-4",value:s,onChange:l=>{g(l)},list:o.options})})]}),(0,e.jsxs)(a.Grid,{className:"laptop:gap-8 laptop:py-3 grid-cols-3 py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>(0,e.jsx)(a.GridItem,{span:1,className:"flex items-center",children:(0,e.jsx)("img",{src:l.images[0].url,alt:l.title,className:"size-[100px]",role:"presentation"})},i))]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(a.GridItem,{span:1}),m.map((l,i)=>{const p=l.variants[0];return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:(0,e.jsx)("div",{className:"flex flex-col gap-[8px]",children:p.price.amount<9999999&&(0,e.jsx)("div",{className:"flex items-center gap-[8px]",children:(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)("span",{className:"text-[18px] font-bold",children:(0,f.formatPrice)({locale:t,amount:p?.coupons?.[0]?.variant_price4wscode||p.price.amount,currencyCode:p.price.currencyCode})}),Number(p?.coupons?.[0]?.variant_price4wscode)>0&&(0,e.jsx)("span",{className:"text-[18px] font-bold text-[#6D6D6F] line-through",children:(0,f.formatPrice)({locale:t,amount:p.price.amount,currencyCode:p.price.currencyCode})})]})})})},i)})]}),(0,e.jsxs)(a.Grid,{className:"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)(a.GridItem,{span:1,children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:r?.color||"Color"})}),m.map((l,i)=>{const p=l.options?.find(c=>["color","colour","couleur"].find(n=>c.name.toLowerCase().includes(n)))?.values.map(c=>c.label);return(0,e.jsx)(a.GridItem,{span:1,className:"flex h-full",children:p?.length&&(0,e.jsx)("div",{className:"flex items-center gap-4",children:p.map(c=>(0,e.jsx)(D.ShopifyColorOption,{label:c,className:"size-6"},c))})},i)})]}),(0,e.jsx)(a.Grid,{className:"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]",children:o.specificationKeys?.map(l=>(0,e.jsxs)(a.GridItem,{span:12,className:"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4",children:[(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#6D6D6F]",children:l}),m.map((i,p)=>{let n=i.metafields?.global?.specifications?.find(C=>C?.key===l)?.value||"";switch(n.trim().toLowerCase()){case"true":n="\u2714\uFE0F";break;case"false":n="\u274C";break;default:break}return(0,e.jsx)("div",{className:"flex items-center",children:(0,e.jsx)("div",{className:"text-[16px] font-bold text-[#1D1D1F]",children:n})},p)})]},l))})]})]})]}):null};var _=T;
 //# sourceMappingURL=CompareModal.js.map

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n  Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n            {copyWriting?.compare}\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n            </GridItem>\n            <GridItem span={1}>\n              <Text\n                as=\"div\"\n                className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n                html={compareData.currentProductCompareData?.shortName || product.title}\n              ></Text>\n            </GridItem>\n            {selectedProductHandle && (\n              <GridItem span={1}>\n                <Select\n                  className=\"rounded-btn h-[48px] px-4\"\n                  value={selectedProductHandle}\n                  onChange={value => {\n                    setSelectedProductHandle(value)\n                  }}\n                  list={compareData.options!}\n                />\n              </GridItem>\n            )}\n          </Grid>\n          <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              return (\n                <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                  <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              const variant = product.variants[0]\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {/* Price with original price */}\n                  <div className=\"flex flex-col gap-[8px]\">\n                    {variant.price.amount < 9999999 && (\n                      <div className=\"flex items-center gap-[8px]\">\n                        {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n                        <div className=\"flex items-center gap-[6px]\">\n                          <span className=\"text-[18px] font-bold\">\n                            {formatPrice({\n                              locale,\n                              amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n                              currencyCode: variant.price.currencyCode,\n                            })}\n                          </span>\n                          {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n                            <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n                              {formatPrice({\n                                locale,\n                                amount: variant.price.amount,\n                                currencyCode: variant.price.currencyCode,\n                              })}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    )}\n                    {/* <Button variant=\"primary\" size=\"lg\">\n                    {copyWriting?.shopNow || 'Shop Now'}\n                  </Button> */}\n                  </div>\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n            </GridItem>\n            {products.map((product, productIndex) => {\n              const colors = product.options\n                ?.find(option =>\n                  ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n                )\n                ?.values.map(value => value.label)\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-4\">\n                      {colors.map(label => (\n                        <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n                      ))}\n                    </div>\n                  )}\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n            {compareData.specificationKeys?.map((key: string) => {\n              return (\n                <GridItem\n                  span={12}\n                  className=\"laptop:py-3 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n                  key={key}\n                >\n                  {/* Detail value */}\n                  <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n                  {/* Product Values */}\n                  {products.map((product, productIndex) => {\n                    const value =\n                      product.metafields?.global?.specifications?.find(\n                        (specification: { key: string }) => specification?.key === key\n                      )?.value || ''\n                    let text = value\n                    switch (text.trim().toLowerCase()) {\n                      case 'true':\n                        text = '\u2714\uFE0F'\n                        break\n                      case 'false':\n                        text = '\u274C'\n                        break\n                      default:\n                        break\n                    }\n                    return (\n                      <div key={productIndex} className=\"flex items-center\">\n                        {/* Other details */}\n                        <div className=\"text-[16px] font-bold text-[#1D1D1F]\">{text}</div>\n                      </div>\n                    )\n                  })}\n                </GridItem>\n              )\n            })}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n  Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n            {copyWriting?.compare}\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n            </GridItem>\n            <GridItem span={1}>\n              <Text\n                as=\"div\"\n                className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n                html={compareData.currentProductCompareData?.shortName || product.title}\n              ></Text>\n            </GridItem>\n            {selectedProductHandle && (\n              <GridItem span={1}>\n                <Select\n                  className=\"rounded-btn h-[48px] px-4\"\n                  value={selectedProductHandle}\n                  onChange={value => {\n                    setSelectedProductHandle(value)\n                  }}\n                  list={compareData.options!}\n                />\n              </GridItem>\n            )}\n          </Grid>\n          <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              return (\n                <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                  <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              const variant = product.variants[0]\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {/* Price with original price */}\n                  <div className=\"flex flex-col gap-[8px]\">\n                    {variant.price.amount < 9999999 && (\n                      <div className=\"flex items-center gap-[8px]\">\n                        {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n                        <div className=\"flex items-center gap-[6px]\">\n                          <span className=\"text-[18px] font-bold\">\n                            {formatPrice({\n                              locale,\n                              amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n                              currencyCode: variant.price.currencyCode,\n                            })}\n                          </span>\n                          {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n                            <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n                              {formatPrice({\n                                locale,\n                                amount: variant.price.amount,\n                                currencyCode: variant.price.currencyCode,\n                              })}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    )}\n                    {/* <Button variant=\"primary\" size=\"lg\">\n                    {copyWriting?.shopNow || 'Shop Now'}\n                  </Button> */}\n                  </div>\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n            </GridItem>\n            {products.map((product, productIndex) => {\n              const colors = product.options\n                ?.find(option =>\n                  ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n                )\n                ?.values.map(value => value.label)\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-4\">\n                      {colors.map(label => (\n                        <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n                      ))}\n                    </div>\n                  )}\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n            {compareData.specificationKeys?.map((key: string) => {\n              return (\n                <GridItem\n                  span={12}\n                  className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n                  key={key}\n                >\n                  {/* Detail value */}\n                  <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n                  {/* Product Values */}\n                  {products.map((product, productIndex) => {\n                    const value =\n                      product.metafields?.global?.specifications?.find(\n                        (specification: { key: string }) => specification?.key === key\n                      )?.value || ''\n                    let text = value\n                    switch (text.trim().toLowerCase()) {\n                      case 'true':\n                        text = '\u2714\uFE0F'\n                        break\n                      case 'false':\n                        text = '\u274C'\n                        break\n                      default:\n                        break\n                    }\n                    return (\n                      <div key={productIndex} className=\"flex items-center\">\n                        {/* Other details */}\n                        <div className=\"text-[16px] font-bold text-[#1D1D1F]\">{text}</div>\n                      </div>\n                    )\n                  })}\n                </GridItem>\n              )\n            })}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
   "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCM,IAAAI,EAAA,6BArCNC,EAAoC,iBACpCC,EAUO,iDACPC,EAAqC,6CAErCC,EAAmB,0BACnBC,EAA+B,gDAC/BC,EAA4B,sCAC5BC,EAAmC,mCAEnC,MAAMC,EAAe,IAAM,CACzB,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChD,CAAE,YAAAC,EAAa,QAAAC,CAAQ,KAAI,wBAAqB,EAChD,CAACC,EAAuBC,CAAwB,KAAI,YAAiB,KAE3E,aAAU,IAAM,CACdA,EAAyBH,GAAa,qBAAqB,CAAC,GAAG,MAAM,CACvE,EAAG,CAACA,GAAa,oBAAoB,CAAC,EAEtC,MAAMI,EAAW,CACfJ,GAAa,2BAA4B,QACzCA,GAAa,qBAAqB,KAAKC,GAAWA,EAAQ,SAAWC,CAAqB,GAAG,OAC/F,EAAE,OAAO,OAAO,EAEhB,OAAKF,GAAa,qBAGhB,QAAC,UACC,oBAAC,iBAAc,UAAU,oCAAqC,SAAAD,GAAa,QAAQ,KACnF,QAAC,iBACC,iBAAiB,UACjB,UAAU,wPAEV,oBAAC,gBAAa,UAAU,qDACtB,mBAAC,eAAY,UAAU,qDACpB,SAAAA,GAAa,QAChB,EACF,KACA,QAAC,OAAI,UAAU,uDACb,qBAAC,QAAK,UAAU,uDACd,oBAAC,YAAS,KAAM,EACd,mBAAC,OAAI,UAAU,uCAAwC,SAAAA,GAAa,SAAW,UAAU,EAC3F,KACA,OAAC,YAAS,KAAM,EACd,mBAAC,QACC,GAAG,MACH,UAAU,mGACV,KAAMC,EAAY,2BAA2B,WAAaC,EAAQ,MACnE,EACH,EACCC,MACC,OAAC,YAAS,KAAM,EACd,mBAAC,EAAAG,QAAA,CACC,UAAU,4BACV,MAAOH,EACP,SAAUI,GAAS,CACjBH,EAAyBG,CAAK,CAChC,EACA,KAAMN,EAAY,QACpB,EACF,GAEJ,KACA,QAAC,QAAK,UAAU,4CACd,oBAAC,YAAS,KAAM,EAAG,EAClBI,EAAS,IAAI,CAACH,EAASM,OAEpB,OAAC,YAA4B,KAAM,EAAG,UAAU,oBAC9C,mBAAC,OAAI,IAAKN,EAAQ,OAAO,CAAC,EAAE,IAAK,IAAKA,EAAQ,MAAO,UAAU,eAAe,KAAK,eAAe,GADrFM,CAEf,CAEH,GACH,KACA,QAAC,QAAK,UAAU,iFACd,oBAAC,YAAS,KAAM,EAAG,EAClBH,EAAS,IAAI,CAACH,EAASM,IAAiB,CACvC,MAAMC,EAAUP,EAAQ,SAAS,CAAC,EAClC,SACE,OAAC,YAAS,KAAM,EAAsB,UAAU,cAE9C,mBAAC,OAAI,UAAU,0BACZ,SAAAO,EAAQ,MAAM,OAAS,YACtB,OAAC,OAAI,UAAU,8BAEb,oBAAC,OAAI,UAAU,8BACb,oBAAC,QAAK,UAAU,wBACb,2BAAY,CACX,OAAAV,EACA,OAAQU,GAAS,UAAU,CAAC,GAAG,sBAAwBA,EAAQ,MAAM,OACrE,aAAcA,EAAQ,MAAM,YAC9B,CAAC,EACH,EACC,OAAOA,GAAS,UAAU,CAAC,GAAG,oBAAoB,EAAI,MACrD,OAAC,QAAK,UAAU,oDACb,2BAAY,CACX,OAAAV,EACA,OAAQU,EAAQ,MAAM,OACtB,aAAcA,EAAQ,MAAM,YAC9B,CAAC,EACH,GAEJ,EACF,EAKJ,GA7BsBD,CA8BxB,CAEJ,CAAC,GACH,KACA,QAAC,QAAK,UAAU,iFACd,oBAAC,YAAS,KAAM,EACd,mBAAC,OAAI,UAAU,uCAAwC,SAAAR,GAAa,OAAS,QAAQ,EACvF,EACCK,EAAS,IAAI,CAACH,EAASM,IAAiB,CACvC,MAAME,EAASR,EAAQ,SACnB,KAAKS,GACL,CAAC,QAAS,SAAU,SAAS,EAAE,KAAKC,GAAaD,EAAO,KAAK,YAAY,EAAE,SAASC,CAAS,CAAC,CAChG,GACE,OAAO,IAAIL,GAASA,EAAM,KAAK,EACnC,SACE,OAAC,YAAS,KAAM,EAAsB,UAAU,cAC7C,SAAAG,GAAQ,WACP,OAAC,OAAI,UAAU,0BACZ,SAAAA,EAAO,IAAIG,MACV,OAAC,sBAA+B,MAAOA,EAAO,UAAU,UAA/BA,CAAwC,CAClE,EACH,GANoBL,CAQxB,CAEJ,CAAC,GACH,KACA,OAAC,QAAK,UAAU,yEACb,SAAAP,EAAY,mBAAmB,IAAKa,MAEjC,QAAC,YACC,KAAM,GACN,UAAU,mGAIV,oBAAC,OAAI,UAAU,uCAAwC,SAAAA,EAAI,EAE1DT,EAAS,IAAI,CAACH,EAASM,IAAiB,CAKvC,IAAIO,EAHFb,EAAQ,YAAY,QAAQ,gBAAgB,KACzCc,GAAmCA,GAAe,MAAQF,CAC7D,GAAG,OAAS,GAEd,OAAQC,EAAK,KAAK,EAAE,YAAY,EAAG,CACjC,IAAK,OACHA,EAAO,eACP,MACF,IAAK,QACHA,EAAO,SACP,MACF,QACE,KACJ,CACA,SACE,OAAC,OAAuB,UAAU,oBAEhC,mBAAC,OAAI,UAAU,uCAAwC,SAAAA,EAAK,GAFpDP,CAGV,CAEJ,CAAC,IA3BIM,CA4BP,CAEH,EACH,GACF,GACF,GACF,EAvJ0C,IAyJ9C,EAEA,IAAO1B,EAAQU",
   "names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "Select", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
 }

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js

@@ -1,2 +1,2 @@
-"use strict";var ae=Object.create;var B=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(t,l)=>{for(var o in l)B(t,o,{get:l[o],enumerable:!0})},Y=(t,l,o,y)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of ie(l))!re.call(t,r)&&r!==o&&B(t,r,{get:()=>l[r],enumerable:!(y=le(l,r))||y.enumerable});return t};var ne=(t,l,o)=>(o=t!=null?ae(oe(t)):{},Y(l||!t||!t.__esModule?B(o,"default",{value:t,enumerable:!0}):o,t)),ce=t=>Y(B({},"__esModule",{value:!0}),t);var be={};se(be,{default:()=>me});module.exports=ce(be);var e=require("react/jsx-runtime"),j=require("../../../../AiuiProvider/index.js"),E=require("../../../../../components/index.js"),a=require("react"),P=require("swiper/react"),f=require("swiper/modules"),x=require("../../../../../helpers/index.js"),N=require("./types.js"),L=require("@radix-ui/react-tabs"),$=require("../../../BizProductProvider.js"),U=require("../../../hooks/use-variant-media.js"),Z=require("./components/SpecsModal.js"),q=ne(require("./components/CompareModal.js")),J=require("../../../utils/index.js"),Q=require("../../../../../shared/Styles.js"),X=require("../../../../../shared/track.js"),ee=require("../../../../../components/index.js");const K=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),de=()=>{const{copyWriting:t}=(0,j.useAiuiContext)(),{product:l,variant:o,selectedOptions:y}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:l,variant:o}),[m,w]=(0,a.useState)(null),I=(0,a.useRef)(null),g=o?.metafields?.component?.custom_media_list;let s,h,_,G;g&&g?.available?(s=g?.product||[],h=g?.scenarios||[],_=g?.keyFeatures||[],G=g?.video||[]):(s=r?.productList,h=r?.sceneList,_=r?.keyFeaturesList,G=r?.videoList);const u=(0,a.useMemo)(()=>[...s,...h,...G],[s,h,G]),b={productList:s,sceneList:h,keyFeaturesList:_,videoList:G},i=(0,a.useMemo)(()=>{const c=l?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[],k=o?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[];return c?.map(T=>{const z=k?.find(D=>T?.galleries===D?.galleries);let H=b[T?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(d=>{const C=[];if(d.image_1920&&d.image_1920.trim()&&C.push(`${d.image_1920} 1920`),d.image_1440&&d.image_1440.trim()&&C.push(`${d.image_1440} 1440`),d.image_1024&&d.image_1024.trim()&&C.push(`${d.image_1024} 1024`),d.image_768&&d.image_768.trim()&&C.push(`${d.image_768} 767`),d.image_390&&d.image_390.trim()&&C.push(`${d.image_390} 390`),C.length>0){const W=C.join(", ");return{image:{url:W,altText:T.comment?.content||""},_fromImages:!0,_responsiveSource:W}}return null}).filter(d=>d!==null);D.length>0&&(H=D)}return{...T,galleries:H}}).filter(T=>T.galleries.length>0)},[o?.payload,b,l?.payload]),[v,n]=(0,a.useState)(i?.[0]),[p,M]=(0,a.useState)(0),[A,S]=(0,a.useState)(null),R=(0,a.useCallback)(()=>{const c=(p+1)%i.length;M(c),n(i[c]),S(0)},[p,i]),V=(0,a.useCallback)(()=>{const c=p===0?i.length-1:p-1;M(c),n(i[c]);const k=i[c]?.galleries||[];S(k.length-1)},[p,i]);(0,a.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{I.current?.scrollToTab(p)})},[p]),(0,a.useEffect)(()=>{n(i[0]),M(0)},[o?.id]);const te=(c,k)=>{switch(c?.galleryTabType){case N.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(pe,{...c,onNextTab:R,onPrevTab:V,targetSlideIndex:A,onSlideChange:()=>S(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(L.Root,{className:"relative",value:v?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((c,k)=>(0,e.jsx)(L.Content,{className:"h-full",value:c.tabValue,children:te(c,k)},c.tabValue))}),(0,e.jsx)(ue,{ref:I,galleryTabs:i,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:M,setTargetSlideIndex:S})]})})},ue=(0,a.forwardRef)((t,l)=>{const{galleryTabs:o,activeGalleryTab:y,setActiveGalleryTab:r,setActiveTabIndex:m,setTargetSlideIndex:w}=t,{product:I}=(0,$.useBizProductContext)(),g=(0,a.useRef)(null),s=(0,a.useRef)(new Map),h=(0,a.useCallback)(u=>{if(g.current){const b=g.current,i=u.currentTarget,v=i.offsetLeft-b.offsetWidth/2+i.offsetWidth/2;b.scrollTo({left:v,behavior:"smooth"})}},[]),_=(0,a.useCallback)((u,b,i)=>{r(b),m(i),w(0),h(u)},[r,m,w,h]),G=(0,a.useCallback)(u=>{if(g.current&&o[u]){const b=g.current,i=o[u],v=s.current.get(i.tabValue);if(v){const n=v.offsetLeft-b.offsetWidth/2+v.offsetWidth/2;b.scrollTo({left:n,behavior:"smooth"})}}},[o]);return(0,a.useImperativeHandle)(l,()=>({scrollToTab:G})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(L.List,{ref:g,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:o?.map((u,b)=>(0,e.jsx)(L.Trigger,{ref:i=>{i?s.current.set(u.tabValue,i):s.current.delete(u.tabValue)},className:(0,x.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===y?.tabValue&&"bg-white"),onClick:i=>_(i,u,b),value:u.tabValue,children:u.tabLabel},u.tabValue+b))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:I.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z.SpecsModal,{})," | ",(0,e.jsx)(q.default,{})]})})]})}),F=(0,a.forwardRef)((t,l)=>{const{locale:o="us",copyWriting:y}=(0,j.useAiuiContext)(),{variant:r,totalSavings:m}=(0,$.useBizProductContext)(),w=(0,a.useRef)(null),[I,g]=(0,a.useState)(null),[s,h]=(0,a.useState)(null),_=(0,a.useRef)(null),[G,u]=(0,a.useState)(!1),b=(0,a.useMemo)(()=>{if(t?.galleryTabType===N.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===N.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,N.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),i=(0,a.useCallback)(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),v=(0,a.useCallback)(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return(0,a.useEffect)(()=>{s&&t.targetSlideIndex&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(P.Swiper,{ref:l,className:"h-full",onSwiper:h,onTouchEnd:(n,p)=>{n.isBeginning&&n.swipeDirection==="prev"?i():n.isEnd&&n.swipeDirection==="next"&&v()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:I},modules:[f.Mousewheel,f.Thumbs,f.Navigation,f.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((n,p)=>{const M=`${t.tabValue}-${p}`,A=()=>{(0,X.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:p+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},S=n?._responsiveSource||n?.image?.url||"";return(0,e.jsx)(P.SwiperSlide,{className:"h-full",children:(0,e.jsx)(ee.ExposureDetector,{onExposure:A,exposureKey:M,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(E.Picture,{source:S,alt:n?.image?.altText,className:(0,x.cn)("h-full",b),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+p)})}),r.availableForSale&&!!m&&!t.index&&(0,e.jsx)(E.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,J.formatPrice)({amount:m,currencyCode:r?.price?.currencyCode,locale:o})} ${y?.off}`}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,children:(0,e.jsx)(K,{className:(0,x.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:(0,e.jsx)(O,{className:(0,x.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(P.Swiper,{className:"flex items-center justify-between",onSwiper:g,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[f.Navigation,f.Thumbs],children:t?.galleries?.map((n,p)=>(0,e.jsx)(P.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(E.Picture,{source:n.image?.url,alt:n.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+p))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(E.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative  max-w-[528px] overflow-hidden",children:(0,e.jsx)("div",{ref:_,className:(0,x.cn)("line-clamp-2"),style:{},children:(0,e.jsx)(E.Text,{html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),pe=t=>{const[l,o]=(0,a.useState)(null),y=(0,a.useCallback)(()=>{l?.isBeginning?t.onPrevTab?.():l?.slidePrev()},[l,t]),r=(0,a.useCallback)(()=>{l?.isEnd?t.onNextTab?.():l?.slideNext()},[l,t]);return(0,a.useEffect)(()=>{l&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(l.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[l,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(P.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(m,w)=>{m.isBeginning&&m.swipeDirection==="prev"?y():m.isEnd&&m.swipeDirection==="next"&&r()},modules:[f.Mousewheel,f.Thumbs,f.Navigation,f.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((m,w)=>(0,e.jsx)(P.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),(0,e.jsx)("div",{className:(0,x.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:y,children:(0,e.jsx)(K,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ve=t=>(0,e.jsx)("div",{children:"3D View"});var me=(0,Q.withLayout)(de);
+"use strict";var le=Object.create;var B=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(t,a)=>{for(var i in a)B(t,i,{get:a[i],enumerable:!0})},Y=(t,a,i,h)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of oe(a))!re.call(t,r)&&r!==i&&B(t,r,{get:()=>a[r],enumerable:!(h=ae(a,r))||h.enumerable});return t};var ne=(t,a,i)=>(i=t!=null?le(ie(t)):{},Y(a||!t||!t.__esModule?B(i,"default",{value:t,enumerable:!0}):i,t)),ce=t=>Y(B({},"__esModule",{value:!0}),t);var be={};se(be,{default:()=>me});module.exports=ce(be);var e=require("react/jsx-runtime"),j=require("../../../../AiuiProvider/index.js"),G=require("../../../../../components/index.js"),l=require("react"),y=require("swiper/react"),m=require("swiper/modules"),N=require("../../../../../helpers/index.js"),P=require("./types.js"),L=require("@radix-ui/react-tabs"),$=require("../../../BizProductProvider.js"),U=require("../../../hooks/use-variant-media.js"),Z=require("./components/SpecsModal.js"),q=ne(require("./components/CompareModal.js")),J=require("../../../utils/index.js"),Q=require("../../../../../shared/Styles.js"),X=require("../../../../../shared/track.js"),ee=require("../../../../../components/index.js");const O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),K=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),de=()=>{const{copyWriting:t}=(0,j.useAiuiContext)(),{product:a,variant:i,selectedOptions:h}=(0,$.useBizProductContext)(),r=(0,U.useVariantMedia)({product:a,variant:i}),[b,w]=(0,l.useState)(null),C=(0,l.useRef)(null),f=i?.metafields?.component?.custom_media_list;let s,x,I,E;f&&f?.available?(s=f?.product||[],x=f?.scenarios||[],I=f?.keyFeatures||[],E=f?.video||[]):(s=r?.productList,x=r?.sceneList,I=r?.keyFeaturesList,E=r?.videoList);const u=(0,l.useMemo)(()=>[...s,...x,...E],[s,x,E]),g={productList:s,sceneList:x,keyFeaturesList:I,videoList:E},o=(0,l.useMemo)(()=>{const c=a?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[],k=i?.payload?.components?.find(T=>T.componentKey==="ProductGallery")?.data||[];return c?.map(T=>{const z=k?.find(D=>T?.galleries===D?.galleries);let H=g[T?.galleries]||[];if(z?.images&&Array.isArray(z.images)&&z.images.length>0){const D=z.images.map(d=>{const _=[];if(d.image_1920&&d.image_1920.trim()&&_.push(`${d.image_1920} 1920`),d.image_1440&&d.image_1440.trim()&&_.push(`${d.image_1440} 1440`),d.image_1024&&d.image_1024.trim()&&_.push(`${d.image_1024} 1024`),d.image_768&&d.image_768.trim()&&_.push(`${d.image_768} 767`),d.image_390&&d.image_390.trim()&&_.push(`${d.image_390} 390`),_.length>0){const W=_.join(", ");return{image:{url:W,altText:T.comment?.content||""},_fromImages:!0,_responsiveSource:W}}return null}).filter(d=>d!==null);D.length>0&&(H=D)}return{...T,galleries:H}}).filter(T=>T.galleries.length>0)},[i?.payload,g,a?.payload]),[v,n]=(0,l.useState)(o?.[0]),[p,A]=(0,l.useState)(0),[M,S]=(0,l.useState)(null),R=(0,l.useCallback)(()=>{const c=(p+1)%o.length;A(c),n(o[c]),S(0)},[p,o]),V=(0,l.useCallback)(()=>{const c=p===0?o.length-1:p-1;A(c),n(o[c]);const k=o[c]?.galleries||[];S(k.length-1)},[p,o]);(0,l.useEffect)(()=>{p!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(p)})},[p]),(0,l.useEffect)(()=>{n(o[0]),A(0)},[i?.id]);const te=(c,k)=>{switch(c?.galleryTabType){case P.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(F,{...c,index:k,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});case P.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(pe,{...c,onNextTab:R,onPrevTab:V,targetSlideIndex:M,onSlideChange:()=>S(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(L.Root,{className:"relative",value:v?.tabValue,defaultValue:o?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:o.map((c,k)=>(0,e.jsx)(L.Content,{className:"h-full",value:c.tabValue,children:te(c,k)},c.tabValue))}),(0,e.jsx)(ue,{ref:C,galleryTabs:o,activeGalleryTab:v,setActiveGalleryTab:n,setActiveTabIndex:A,setTargetSlideIndex:S})]})})},ue=(0,l.forwardRef)((t,a)=>{const{galleryTabs:i,activeGalleryTab:h,setActiveGalleryTab:r,setActiveTabIndex:b,setTargetSlideIndex:w}=t,{product:C}=(0,$.useBizProductContext)(),f=(0,l.useRef)(null),s=(0,l.useRef)(new Map),x=(0,l.useCallback)(u=>{if(f.current){const g=f.current,o=u.currentTarget,v=o.offsetLeft-g.offsetWidth/2+o.offsetWidth/2;g.scrollTo({left:v,behavior:"smooth"})}},[]),I=(0,l.useCallback)((u,g,o)=>{r(g),b(o),w(0),x(u)},[r,b,w,x]),E=(0,l.useCallback)(u=>{if(f.current&&i[u]){const g=f.current,o=i[u],v=s.current.get(o.tabValue);if(v){const n=v.offsetLeft-g.offsetWidth/2+v.offsetWidth/2;g.scrollTo({left:n,behavior:"smooth"})}}},[i]);return(0,l.useImperativeHandle)(a,()=>({scrollToTab:E})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(L.List,{ref:f,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:i?.map((u,g)=>(0,e.jsx)(L.Trigger,{ref:o=>{o?s.current.set(u.tabValue,o):s.current.delete(u.tabValue)},className:(0,N.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",u.tabValue===h?.tabValue&&"bg-white"),onClick:o=>I(o,u,g),value:u.tabValue,children:u.tabLabel},u.tabValue+g))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:C.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(Z.SpecsModal,{})," | ",(0,e.jsx)(q.default,{})]})})]})}),F=(0,l.forwardRef)((t,a)=>{const{locale:i="us",copyWriting:h}=(0,j.useAiuiContext)(),{variant:r,totalSavings:b}=(0,$.useBizProductContext)(),w=(0,l.useRef)(null),[C,f]=(0,l.useState)(null),[s,x]=(0,l.useState)(null),I=(0,l.useRef)(null),[E,u]=(0,l.useState)(!1),g=(0,l.useMemo)(()=>{if(t?.galleryTabType===P.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===P.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,P.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),o=(0,l.useCallback)(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),v=(0,l.useCallback)(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return(0,l.useEffect)(()=>{s&&t.targetSlideIndex&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{ref:a,className:"h-full",onSwiper:x,onTouchEnd:(n,p)=>{n.isBeginning&&n.swipeDirection==="prev"?o():n.isEnd&&n.swipeDirection==="next"&&v()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:C},modules:[m.Mousewheel,m.Thumbs,m.Navigation,m.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((n,p)=>{const A=`${t.tabValue}-${p}`,M=()=>{(0,X.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:p+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},S=n?._responsiveSource||n?.image?.url||"";return(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsx)(ee.ExposureDetector,{onExposure:M,exposureKey:A,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(G.Picture,{source:S,alt:n?.image?.altText,className:(0,N.cn)("h-full",g),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+p)})}),r.availableForSale&&!!b&&!t.index&&(0,e.jsx)(G.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,J.formatPrice)({amount:b,currencyCode:r?.price?.currencyCode,locale:i})} ${h?.off}`}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:o,children:(0,e.jsx)(O,{className:(0,N.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:v,children:(0,e.jsx)(K,{className:(0,N.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(y.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[m.Navigation,m.Thumbs],children:t?.galleries?.map((n,p)=>(0,e.jsx)(y.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(G.Picture,{source:n.image?.url,alt:n.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+p))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(G.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative  max-w-[528px] overflow-hidden",children:(0,e.jsxs)(y.Swiper,{modules:[m.Autoplay],loop:!0,className:"lg-desktop:h-11 h-10",direction:"vertical",autoplay:{delay:2e3,disableOnInteraction:!1},children:[(0,e.jsx)(y.SwiperSlide,{children:(0,e.jsx)(G.Text,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})}),(0,e.jsx)(y.SwiperSlide,{children:(0,e.jsx)(G.Text,{html:t?.comment?.content,className:"lg-desktop:text-base line-clamp-2 text-sm font-bold text-[#1D1D1F]"})})]})})]})]}),(0,e.jsx)("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),pe=t=>{const[a,i]=(0,l.useState)(null),h=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),r=(0,l.useCallback)(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return(0,l.useEffect)(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(y.Swiper,{className:"h-full",onSwiper:i,onTouchEnd:(b,w)=>{b.isBeginning&&b.swipeDirection==="prev"?h():b.isEnd&&b.swipeDirection==="next"&&r()},modules:[m.Mousewheel,m.Thumbs,m.Navigation,m.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((b,w)=>(0,e.jsx)(y.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:b?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),(0,e.jsx)("div",{className:(0,N.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:h,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,N.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(K,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ve=t=>(0,e.jsx)("div",{children:"3D View"});var me=(0,Q.withLayout)(de);
 //# sourceMappingURL=index.js.map