@anker-in/headless-ui 1.0.26-alpha.1762331489014 → 1.0.26-alpha.1762411688784

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        gift: {\n          value: undefined,\n          canOperate: true,\n        },\n        bundle: {\n          value: undefined,\n          canOperate: true,\n        },\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        bundle: {\n          value: undefined,\n          canOperate: true,\n        },\n        gift: {\n          value: undefined,\n          canOperate: true,\n        },\n        exchange: {\n          value,\n          canOperate: false,\n        },\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn('flex items-center gap-2 text-left font-bold px-4 rounded-btn border-[#E4E5E6] border-2', {\n              ['border-brand']: checkedExchangePurchase?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-[#D1D1D1] borer-[1.6px]', {\n                'border-brand': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex py-6 cursor-pointer justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text\n                  className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold 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 ProductExchangePurchase\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEM,IAAAI,EAAA,6BAjENC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIT,GAAoB,CAAC,EAC3DU,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAyB,KAAOc,EAAM,IACxCT,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDC,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,IAE1DL,IAAmB,MAAS,EAC5BG,IAA6BS,CAAK,EAClCX,IAAgC,CAC9B,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAAW,EACA,WAAY,EACd,CACF,CAAC,EAEL,EAEA,OAAKH,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,kFACZ,SAAAG,EAAe,IAAKI,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBf,GAAyB,KAAOe,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,8CAA+C,CAC3D,eAAgBf,GAAyB,KAAOe,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASf,GAAyB,KAAOe,EAAK,GAC9C,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAhB,EACA,aAAcgB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAhB,EACA,aAAcgB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO1B,EAAQS",
+  "names": ["ProductExchangePurchase_exports", "__export", "ProductExchangePurchase_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "ProductExchangePurchase", "locale", "checkedExchangePurchase", "exchangePurchase", "setCheckedBundle", "setJoinedRecommendBuyProducts", "setSavingDetail", "setCheckedExchangePurchase", "joinedRecommendBuyProducts", "savingDetail", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift"]
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\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  } = 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        bundle: {\n          value: undefined,\n          canOperate: true,\n        },\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n        gift: {\n          value: undefined,\n        },\n      })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({\n        bundle: {\n          value: undefined,\n          canOperate: true,\n        },\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n        gift: {\n          value,\n          canOperate: false,\n        },\n      })\n    }\n  }\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\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn('flex items-center gap-2 text-left font-bold px-4 rounded-box border-[#E4E5E6] border-2', {\n              ['border-brand']: checkedGift?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-[#D1D1D1] borer-[1.6px]', {\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 justify-between items-center cursor-pointer gap-4 w-full py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold 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 ProductFreeGift\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgEM,IAAAI,EAAA,6BAhENC,EAA4E,wCAC5EC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,6BAC5BC,EAA+B,uCAG/B,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,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAY,CAAC,EACnDW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDb,GAAa,KAAOa,EAAM,IAC5BZ,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAC9B,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,MACT,CACF,CAAC,IAEDH,IAAmB,MAAS,EAC5BD,IAAiBY,CAAK,EACtBR,IAAgC,CAC9B,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAAQ,EACA,WAAY,EACd,CACF,CAAC,EAEL,EAEA,OAAKH,GAAgB,UAGnB,QAAC,OAAI,UAAU,+BACb,oBAAC,QAAK,KAAM,EAAG,UAAU,YAAY,KAAMH,EAAO,KAClD,OAAC,OAAI,UAAU,kFACZ,SAAAG,EAAe,IAAII,MAClB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBd,GAAa,KAAOc,EAAK,EAC7C,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMF,EAAoBE,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,8CAA+C,CAC3D,eAAgBd,GAAa,KAAOc,EAAK,EAC3C,CAAC,EACD,GAAIA,EAAK,GACT,QAASd,GAAa,KAAOc,EAAK,GAClC,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,wBAAwB,KACpE,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QAAK,UAAU,6DAA6D,KAAML,EAAW,KAC9F,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQK,EAAK,MAAM,OACnB,OAAAhB,EACA,aAAcgB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAlCKA,EAAK,EAmCZ,CACD,EACH,GACF,EA9CkC,IAgDtC,EAEA,IAAO1B,EAAQS",
+  "names": ["ProductFreeGift_exports", "__export", "ProductFreeGift_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var w=(e,o)=>{for(var r in o)g(e,r,{get:o[r],enumerable:!0})},C=(e,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of y(o))!N.call(e,i)&&i!==r&&g(e,i,{get:()=>o[i],enumerable:!(c=k(o,i))||c.enumerable});return e};var D=e=>C(g({},"__esModule",{value:!0}),e);var L={};w(L,{default:()=>H});module.exports=D(L);var t=require("react/jsx-runtime"),a=require("../../../../../../components"),p=require("@radix-ui/react-tabs"),n=require("react"),v=require("../../../../../../helpers"),h=require("../../../../BizProductProvider.js");const T=()=>{const{product:e,variant:o,isMobile:r}=(0,h.useBizProductContext)(),[c,i]=(0,n.useState)(!1),f=(0,n.useMemo)(()=>{const s=o.metafields?.component?.ksp||e.metafields?.component?.ksp;return(r?s?.mobileList:s?.list)?.filter(x=>!!x?.text)},[o.metafields?.component?.ksp,r]),[u,l]=(0,n.useState)(f?.[0]),d=(0,n.useMemo)(()=>e?.payload?.components?.find(s=>s.componentKey==="ProductHighlight")?.data||{},[e?.payload]);return f?.length?(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[d?.title&&(0,t.jsx)(a.Text,{size:3,className:"font-bold",html:d?.title}),(0,t.jsxs)(a.Dialog,{open:c,onOpenChange:i,children:[(0,t.jsx)(a.DialogTrigger,{asChild:!0,children:(0,t.jsx)(a.Button,{variant:"link",className:"font-bold !p-0 text-base",children:d?.view})}),(0,t.jsx)(E,{ksp:f,clickActiveKspItem:u})]})]}),(0,t.jsx)("div",{className:"flex flex-wrap gap-4 mt-3 desktop:mt-4",children:f.map(s=>(0,t.jsx)("div",{className:"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]",children:(0,t.jsx)(a.Text,{size:3,onClick:()=>{l(s),i(!0)},className:"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden",html:s?.text},s?.text)}))})]}):null},E=({ksp:e,clickActiveKspItem:o})=>{const r=(0,n.useRef)([]),c=(0,n.useRef)(null),[i,f]=(0,n.useState)(null),u=(0,n.useCallback)(l=>{const d=e.findIndex(m=>m.text===l?.text),s=r.current[d];if(s&&c.current){const m=c.current,x=s,b=x.offsetLeft-m.offsetWidth/2+x.offsetWidth/2;m.scrollTo({left:b,behavior:"smooth"})}},[o,e]);return(0,n.useEffect)(()=>{o&&(f(o),setTimeout(()=>{u(i)},100))},[o,u]),(0,t.jsx)(a.DialogContent,{overlayClassName:"z-[70]",className:"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0",children:(0,t.jsxs)(p.Root,{defaultValue:i?.text,className:"w-full overflow-hidden",children:[e.map(l=>(0,t.jsx)(p.Content,{value:l.text,children:(0,t.jsx)(a.Picture,{source:l.img,className:"w-full h-[304px] desktop:h-[480px]",alt:l.img.alt,imgClassName:"object-cover h-full"})},l.text)),(0,t.jsx)("div",{className:"py-4 desktop:py-6 w-full overflow-visible",children:(0,t.jsxs)("div",{ref:c,className:"px-4 desktop:px-6 overflow-x-auto",children:[(0,t.jsx)("div",{className:"w-fit rounded-full bg-[#EAEAEC]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,t.jsx)(p.List,{className:"flex p-1 w-max",children:e.map((l,d)=>(0,t.jsx)(p.Trigger,{ref:s=>{s&&(r.current[d]=s)},className:(0,v.cn)("lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]",l.text===i?.text&&"bg-white"),onClick:()=>{u(l),f(l)},value:l.text,children:(0,t.jsx)(a.Text,{html:l.text,className:"font-bold text-[14px] leading-tight"})},d))})}),(0,t.jsx)("div",{className:"mt-4",children:e.map(l=>(0,t.jsx)(p.Content,{value:l.label,className:"font-bold text-base desktop:text-[18px]",children:l.description}))})]})})]})})};var H=T;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
+  "sourcesContent": ["import type { HighlightProps } from '../types'\nimport { Text, Picture, Button, Heading, Dialog, DialogContent, DialogTrigger } from '../../../../../../components'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nconst ProductHighlight = () => {\n  const { product, variant, isMobile } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const ksp = useMemo(() => {\n    const ksp_value = variant.metafields?.component?.ksp || product.metafields?.component?.ksp\n    const result = isMobile ? ksp_value?.mobileList : ksp_value?.list\n    return result?.filter((item: any) => !!item?.text)\n  }, [variant.metafields?.component?.ksp, isMobile])\n\n  const [activeKspItem, setActiveKspItem] = useState(ksp?.[0])\n\n  const ProductHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  if (!ksp?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {ProductHighlightData?.title && <Text size={3} className=\"font-bold\" html={ProductHighlightData?.title} />}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"font-bold !p-0 text-base\">\n              {ProductHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal ksp={ksp} clickActiveKspItem={activeKspItem} />\n        </Dialog>\n      </div>\n      <div className=\"flex flex-wrap gap-4 mt-3 desktop:mt-4\">\n        {ksp.map((item: any) => (\n          <div className=\"px-4 py-2 cursor-pointer hover:bg-[#EAEAEC] rounded-full bg-[#F5F5F7]\">\n            <Text\n              size={3}\n              key={item?.text}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n              }}\n              className=\"font-bold  text-[#1D1D1F] text-[14px] lg-desktop:text-[16px] break-all line-clamp-1 desktop:text-base overflow-hidden\"\n              html={item?.text}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({ ksp, clickActiveKspItem }: { ksp: any[]; clickActiveKspItem: any }) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [activeKspItem, setActiveKspItem] = useState<any>(null)\n\n  const autoScrollToActiveItem = useCallback((activeKspItem: any) => {\n    const curIndex = ksp.findIndex(item => item.text === activeKspItem?.text)\n    const curRef = highlightRef.current[curIndex]\n\n    if (curRef && scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = curRef\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [clickActiveKspItem, ksp])\n\n  useEffect(() => {\n    if (!clickActiveKspItem) return\n    setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [clickActiveKspItem, autoScrollToActiveItem])\n\n  return (\n    <DialogContent\n      overlayClassName=\"z-[70]\"\n      className=\"tablet:max-w-[896px] max-w-[326px] mx-auto w-full border-none z-[80] overflow-hidden p-0\"\n    >\n      <Root defaultValue={activeKspItem?.text} className=\"w-full overflow-hidden\">\n        {ksp.map(item => (\n          <Content value={item.text} key={item.text}>\n            <Picture\n              source={item.img}\n              className=\"w-full h-[304px] desktop:h-[480px]\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"py-4 desktop:py-6 w-full overflow-visible\">\n          <div ref={scrollContainerRef} className=\"px-4 desktop:px-6 overflow-x-auto\">\n            <div\n              className=\"w-fit rounded-full bg-[#EAEAEC]\"\n              style={{\n                scrollbarWidth: 'none',\n                msOverflowStyle: 'none',\n              }}\n            >\n              <List className=\"flex p-1 w-max\">\n                {ksp.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 shrink-0 lg-desktop:pb-[14px] rounded-full  lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px]',\n                      item.text === activeKspItem?.text && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                    }}\n                    key={index}\n                    value={item.text}\n                  >\n                    <Text html={item.text} className=\"font-bold text-[14px] leading-tight\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n            <div className=\"mt-4\">\n              {ksp.map(item => (\n                <Content value={item.label} className=\"font-bold text-base desktop:text-[18px]\">\n                  {item.description}\n                </Content>\n              ))}\n            </div>\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default ProductHighlight\n"],
+  "mappings": "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",
+  "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "ProductHighlight", "product", "variant", "isMobile", "open", "setOpen", "ksp", "ksp_value", "item", "activeKspItem", "setActiveKspItem", "ProductHighlightData", "ProductHighlightModal", "clickActiveKspItem", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var u=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var E=(s,o)=>{for(var n in o)u(s,n,{get:o[n],enumerable:!0})},P=(s,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of _(o))!k.call(s,i)&&i!==n&&u(s,i,{get:()=>o[i],enumerable:!(a=w(o,i))||a.enumerable});return s};var C=s=>P(u({},"__esModule",{value:!0}),s);var O={};E(O,{default:()=>L});module.exports=C(O);var e=require("react/jsx-runtime"),d=require("../../../../../../components"),l=require("../../../../../../helpers/index.js"),p=require("react"),f=require("../../../../BizProductProvider.js"),v=require("../../../../../AiuiProvider/index.js"),g=require("../../../../utils/helper.js");const z=()=>{const{product:s,selectedOptions:o,setSelectedOptions:n,setJoinedRecommendBuyProducts:a}=(0,f.useBizProductContext)(),{storeDomain:i}=(0,v.useAiuiContext)(),[x,y]=(0,p.useState)({});return s.options.length?(0,e.jsx)("div",{className:"flex flex-col gap-12",children:s.options.map(r=>{const N=r.name.toLowerCase();return["color","colour","couleur"].some(t=>N.includes(t))?(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:"Select Color: "+o[r.name]}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4",children:r.values.map(({label:t},c)=>{const b=`https://${i}/cdn/shop/files/${(0,g.handle)(t)}.png`;return(0,e.jsxs)("div",{className:"relative ipc-product-detail-options-value",children:[(0,e.jsx)("button",{"aria-label":`switch to ${t}`,title:t,onClick:()=>{n(m=>({...m,[r.name]:t})),a?.({gift:void 0,bundle:void 0})},className:(0,l.cn)("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":o[r.name]===t}),children:!x[t]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(d.Picture,{className:"w-full",source:b,onError:({currentTarget:m})=>{m.onerror=null,y(h=>({...h,[t]:!0}))}})})}),(0,e.jsx)("div",{className:"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]},t+c)})})]},r.id):(0,e.jsxs)("div",{className:"ipc-product-detail-options",children:[(0,e.jsx)(d.Text,{as:"p",size:3,className:"font-bold",html:r.name}),(0,e.jsx)("div",{className:"flex items-center gap-4 mt-4",children:r.values.map(({label:t})=>(0,e.jsx)("button",{onClick:()=>{n(c=>({...c,[r.name]:t}))},className:(0,l.cn)("w-1/2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2",{"border-brand":o[r.name]===t}),children:t},t))})]},r.id)})}):null};var L=z;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={'Select Color: ' + selectedOptions[option.name]} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"relative ipc-product-detail-options-value\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default ProductOptions\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBc,IAAAI,EAAA,6BAtBdC,EAAsC,wCAEtCC,EAAmB,8CACnBC,EAAyB,iBACzBC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCAEvB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAClF,wBAAqB,EACjB,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,OAAKN,EAAQ,QAAQ,UAEnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAM,iBAAmBR,EAAgBM,EAAO,IAAI,EAAG,KACnG,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,sBAAmB,UAAOM,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DP,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBR,EAAgBO,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBT,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOjB,EAAQS",
+  "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var n=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var B=(o,t)=>{for(var r in t)d(o,r,{get:t[r],enumerable:!0})},m=(o,t,r,f)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of P(t))!g.call(o,i)&&i!==r&&d(o,i,{get:()=>t[i],enumerable:!(f=x(t,i))||f.enumerable});return o};var e=(o,t,r)=>(r=o!=null?n(b(o)):{},m(t||!o||!o.__esModule?d(r,"default",{value:o,enumerable:!0}):r,o)),h=o=>m(d({},"__esModule",{value:!0}),o);var k={};B(k,{default:()=>T});module.exports=h(k);var p=require("react/jsx-runtime"),D=require("./ProductBenefitsTabs/index.js"),l=e(require("./ProductHighlight/index.js")),a=e(require("./ProductFreeGift/index.js")),c=e(require("./ProductOptions/index.js")),u=e(require("./ProductBundle/index.js")),s=e(require("./BenefitsTab"));const v=o=>(0,p.jsxs)("div",{id:"ipc-product-detail",className:"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4",children:[(0,p.jsx)(s.default,{}),(0,p.jsx)(l.default,{}),(0,p.jsx)(c.default,{}),(0,p.jsx)(a.default,{}),(0,p.jsx)(u.default,{})]});var T=v;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/index.tsx"],
+  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab'\n\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAUI,IAAAI,EAAA,6BAVJC,EAAgC,0CAChCC,EAA6B,0CAC7BC,EAA4B,yCAC5BC,EAA2B,wCAC3BC,EAA0B,uCAC1BC,EAAwB,4BAGxB,MAAMC,EAAiBC,MAEnB,QAAC,OAAI,GAAG,qBAAqB,UAAU,kEACrC,oBAAC,EAAAC,QAAA,EAAY,KACb,OAAC,EAAAC,QAAA,EAAiB,KAClB,OAAC,EAAAC,QAAA,EAAe,KAChB,OAAC,EAAAC,QAAA,EAAgB,KACjB,OAAC,EAAAC,QAAA,EAAc,GACjB,EAIJ,IAAOf,EAAQS",
+  "names": ["ProductDetail_exports", "__export", "ProductDetail_default", "__toCommonJS", "import_jsx_runtime", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductOptions", "import_ProductBundle", "import_BenefitsTab", "ProductDetail", "props", "BenefitsTab", "ProductHighlight", "ProductOptions", "ProductFreeGift", "ProductBundle"]
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/types.ts"],
+  "sourcesContent": ["import type {\n  ProductVariant,\n  Product,\n  ProductOption,\n  ProductOptionValues,\n} from '../../../../../cpn-components/CpnProductCard/types.js'\nimport type { Img } from '../../../../../types/props.js'\n\nexport interface ProductDetailProps {}\n\nexport enum BenefitsTabsType {\n  ALL_BENEFITS = 'allBenefits',\n  COUPON = 'coupon',\n  INSTALLMENT = 'installment',\n  MEMBERSHIP = 'membership',\n}\n\nexport interface ProductBenefitsTabsProps {\n  data: {\n    allBenefits: {\n      benefits: {\n        type?: BenefitsTabsType\n        tabName: string\n        tabValue: string\n        collectBgImage?: Img\n        coupons?: BenefitsTabCouponProps[]\n      }[]\n    }\n  }\n}\n\nexport interface BenefitsTabCouponProps {\n  code: string\n  title: string\n  description: string\n  discount: number\n  bgImage: Img\n}\n\nexport interface ProductBenefitsTabCouponProps {\n  coupons?: BenefitsTabCouponProps[]\n}\n\nexport interface HighlightProps {\n  data: any\n}\n\nexport interface ProductOptionsProps {\n  option: ProductOption\n  onOptionChange: (arg0: { id: string; value: string }) => void\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAUO,IAAKE,OACVA,EAAA,aAAe,cACfA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,WAAa,aAJHA,OAAA",
+  "names": ["types_exports", "__export", "BenefitsTabsType", "__toCommonJS"]
+}

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

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

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

@@ -0,0 +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} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = 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>\n        <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[calc(100vh-92px)] z-[110] overflow-y-scroll px-[40px] py-[30px] shadow-lg tablet:min-w-[760px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img\n                  src={product.images[0].url}\n                  alt={product.title}\n                  className=\"h-[200px] w-[200px]\"\n                  role=\"presentation\"\n                />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\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                {/* 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-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] 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                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"h-[16px] w-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{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-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
+  "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", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "Select", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var S=(a,n)=>{for(var s in n)f(a,s,{get:n[s],enumerable:!0})},L=(a,n,s,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of C(n))!D.call(a,i)&&i!==s&&f(a,i,{get:()=>n[i],enumerable:!(o=k(n,i))||o.enumerable});return a};var R=a=>L(f({},"__esModule",{value:!0}),a);var H={};S(H,{default:()=>M});module.exports=R(H);var t=require("react/jsx-runtime"),l=require("../../../../../../helpers"),r=require("react");const _=({label:a="",required:n=!1,list:s=[],value:o="",disabled:i=!1,error:d="",errorClassName:g="",onChange:v=m=>{},placeholder:u="",className:w="",containerClassName:N="",selectListClassName:h="",truncate:E=!1,...F})=>{const m=(0,r.useRef)(null),[b,p]=(0,r.useState)(!1),x=(0,r.useRef)(null),y=s.find(e=>e?.value===o)?.text;return(0,r.useEffect)(()=>{const e=c=>{x.current&&!x.current?.contains(c.target)&&p(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),(0,t.jsxs)("div",{className:(0,l.cn)("relative w-full",N),children:[a&&(0,t.jsxs)("div",{className:"mb-[10px] text-[16px] font-bold",children:[a,n&&(0,t.jsx)("span",{className:"text-[#F84D4F]",children:"*"})]}),(0,t.jsxs)("div",{ref:x,className:"relative block",children:[(0,t.jsx)("div",{className:(0,l.cn)("flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]",u&&!o?"placeholder:text-[#999]":"",i?"pointer-events-none bg-[#F7F8F9]":"bg-white",d?"!border-[#F84D4F]":"border-[#E8E8E8]",s.length<=1&&"cursor-default",w),onClick:()=>{s.length>1&&p(!b)},onChange:e=>{v(e.target.value)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},...F,children:!o&&u?(0,t.jsx)("div",{className:"text-[#999]",children:u}):(0,t.jsx)("div",{className:(0,l.cn)("line-clamp-1",E?"min-w-0 flex-1 truncate":"flex-1"),children:y})}),(0,t.jsx)("div",{ref:m,className:(0,l.cn)("absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300",b?"":"pointer-events-none opacity-0",h),children:s.map(e=>(0,t.jsx)("div",{"data-value":e.value,className:(0,l.cn)("flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]",o===e.value?"!bg-[#E8E8E8]":"",e?.disabled?"pointer-events-none text-[#C8C8C8]":""),onClick:()=>{v(e.value),p(!1)},role:"button",tabIndex:0,onKeyDown:c=>{(c.key==="Enter"||c.key===" ")&&c.preventDefault()},children:e.text},e.value))})]}),d&&(0,t.jsx)("div",{className:(0,l.cn)("mt-[8px] text-[14px] text-[#F84D4F]",g),children:typeof d=="string"?`*${d}`:d})]})};var M=_;
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.tsx"],
+  "sourcesContent": ["import { cn as classNames, cn } from '../../../../../../helpers'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface SelectProps {\n  label?: string\n  required?: boolean\n  list?: { value: string; text: string; disabled?: boolean }[]\n  value?: string\n  disabled?: boolean\n  error?: string\n  errorClassName?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  containerClassName?: string\n  selectListClassName?: string\n  truncate?: boolean\n}\n\nconst Select = ({\n  label = '',\n  required = false,\n  list = [],\n  value = '',\n  disabled = false,\n  error = '',\n  errorClassName = '',\n  onChange = (value: string) => {},\n  placeholder = '',\n  className = '',\n  containerClassName = '',\n  selectListClassName = '',\n  truncate = false,\n  ...props\n}: SelectProps) => {\n  const dropdownRef = useRef(null)\n  const [selecting, setSelecting] = useState(false)\n  const buttonRef = useRef<HTMLDivElement>(null)\n\n  const displayValue = list.find(item => item?.value === value)?.text\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (buttonRef.current && !buttonRef.current?.contains(event.target as Node)) {\n        setSelecting(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  // useEffect(() => {\n  //   // scroll to select item when select is open\n  //   // start_ai_generated\n  //   if (selecting && value) {\n  //     const selectedElement = dropdownRef.current.querySelector(`[data-value=\"${value}\"]`)\n  //     if (selectedElement) {\n  //       scrollParentToChild(dropdownRef.current, selectedElement)\n  //     }\n  //   }\n  //   // end_ai_generated\n  // }, [selecting, value])\n\n  return (\n    <div className={classNames('relative w-full', containerClassName)}>\n      {label && (\n        <div className=\"mb-[10px] text-[16px] font-bold\">\n          {label}\n          {required && <span className=\"text-[#F84D4F]\">*</span>}\n        </div>\n      )}\n      <div ref={buttonRef} className=\"relative block\">\n        <div\n          className={classNames(\n            'flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]',\n            placeholder && !value ? 'placeholder:text-[#999]' : '',\n            disabled ? 'pointer-events-none bg-[#F7F8F9]' : 'bg-white',\n            error ? '!border-[#F84D4F]' : 'border-[#E8E8E8]',\n            list.length <= 1 && 'cursor-default',\n            className\n          )}\n          onClick={() => {\n            if (list.length > 1) {\n              setSelecting(!selecting)\n            }\n          }}\n          onChange={event => {\n            onChange((event.target as HTMLSelectElement).value)\n          }}\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n            }\n          }}\n          {...props}\n        >\n          {!value && placeholder ? (\n            <div className=\"text-[#999]\">{placeholder}</div>\n          ) : (\n            <div className={cn('line-clamp-1', truncate ? 'min-w-0 flex-1 truncate' : 'flex-1')}>{displayValue}</div>\n          )}\n          {/* {list.length > 1 && (\n            <ChevronDownIcon\n              className={classNames(\n                'ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform',\n                selecting && 'rotate-180'\n              )}\n            />\n          )} */}\n        </div>\n        <div\n          ref={dropdownRef}\n          className={classNames(\n            'absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300',\n            selecting ? '' : 'pointer-events-none opacity-0',\n            selectListClassName\n          )}\n        >\n          {list.map(item => (\n            <div\n              key={item.value}\n              data-value={item.value}\n              className={classNames(\n                'flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]',\n                value === item.value ? '!bg-[#E8E8E8]' : '',\n                item?.disabled ? 'pointer-events-none text-[#C8C8C8]' : ''\n              )}\n              onClick={() => {\n                onChange(item.value)\n                setSelecting(false)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {item.text}\n            </div>\n          ))}\n        </div>\n      </div>\n      {error && (\n        <div className={classNames('mt-[8px] text-[14px] text-[#F84D4F]', errorClassName)}>\n          {typeof error === 'string' ? `*${error}` : error}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default Select"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmEQ,IAAAI,EAAA,6BAnERC,EAAqC,qCACrCC,EAAmD,iBAkBnD,MAAMC,EAAS,CAAC,CACd,MAAAC,EAAQ,GACR,SAAAC,EAAW,GACX,KAAAC,EAAO,CAAC,EACR,MAAAC,EAAQ,GACR,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,eAAAC,EAAiB,GACjB,SAAAC,EAAYJ,GAAkB,CAAC,EAC/B,YAAAK,EAAc,GACd,UAAAC,EAAY,GACZ,mBAAAC,EAAqB,GACrB,oBAAAC,EAAsB,GACtB,SAAAC,EAAW,GACX,GAAGC,CACL,IAAmB,CACjB,MAAMC,KAAc,UAAO,IAAI,EACzB,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAY,UAAuB,IAAI,EAEvCC,EAAehB,EAAK,KAAKiB,GAAQA,GAAM,QAAUhB,CAAK,GAAG,KAC/D,sBAAU,IAAM,CACd,MAAMiB,EAAsBC,GAAsB,CAC5CJ,EAAU,SAAW,CAACA,EAAU,SAAS,SAASI,EAAM,MAAc,GACxEL,EAAa,EAAK,CAEtB,EACA,gBAAS,iBAAiB,YAAaI,CAAkB,EAClD,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAAC,CAAC,KAeH,QAAC,OAAI,aAAW,EAAAE,IAAW,kBAAmBZ,CAAkB,EAC7D,UAAAV,MACC,QAAC,OAAI,UAAU,kCACZ,UAAAA,EACAC,MAAY,OAAC,QAAK,UAAU,iBAAiB,aAAC,GACjD,KAEF,QAAC,OAAI,IAAKgB,EAAW,UAAU,iBAC7B,oBAAC,OACC,aAAW,EAAAK,IACT,qJACAd,GAAe,CAACL,EAAQ,0BAA4B,GACpDC,EAAW,mCAAqC,WAChDC,EAAQ,oBAAsB,mBAC9BH,EAAK,QAAU,GAAK,iBACpBO,CACF,EACA,QAAS,IAAM,CACTP,EAAK,OAAS,GAChBc,EAAa,CAACD,CAAS,CAE3B,EACA,SAAUM,GAAS,CACjBd,EAAUc,EAAM,OAA6B,KAAK,CACpD,EACA,KAAK,SACL,SAAU,EACV,UAAW,GAAK,EACV,EAAE,MAAQ,SAAW,EAAE,MAAQ,MACjC,EAAE,eAAe,CAErB,EACC,GAAGR,EAEH,UAACV,GAASK,KACT,OAAC,OAAI,UAAU,cAAe,SAAAA,EAAY,KAE1C,OAAC,OAAI,aAAW,MAAG,eAAgBI,EAAW,0BAA4B,QAAQ,EAAI,SAAAM,EAAa,EAUvG,KACA,OAAC,OACC,IAAKJ,EACL,aAAW,EAAAQ,IACT,4KACAP,EAAY,GAAK,gCACjBJ,CACF,EAEC,SAAAT,EAAK,IAAIiB,MACR,OAAC,OAEC,aAAYA,EAAK,MACjB,aAAW,EAAAG,IACT,0LACAnB,IAAUgB,EAAK,MAAQ,gBAAkB,GACzCA,GAAM,SAAW,qCAAuC,EAC1D,EACA,QAAS,IAAM,CACbZ,EAASY,EAAK,KAAK,EACnBH,EAAa,EAAK,CACpB,EACA,KAAK,SACL,SAAU,EACV,UAAWO,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCA,EAAE,eAAe,CAErB,EAEC,SAAAJ,EAAK,MAnBDA,EAAK,KAoBZ,CACD,EACH,GACF,EACCd,MACC,OAAC,OAAI,aAAW,EAAAiB,IAAW,sCAAuChB,CAAc,EAC7E,gBAAOD,GAAU,SAAW,IAAIA,CAAK,GAAKA,EAC7C,GAEJ,CAEJ,EAEA,IAAOX,EAAQK",
+  "names": ["Select_exports", "__export", "Select_default", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react", "Select", "label", "required", "list", "value", "disabled", "error", "errorClassName", "onChange", "placeholder", "className", "containerClassName", "selectListClassName", "truncate", "props", "dropdownRef", "selecting", "setSelecting", "buttonRef", "displayValue", "item", "handleClickOutside", "event", "classNames", "e"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var x=(t,o)=>{for(var s in o)a(t,s,{get:o[s],enumerable:!0})},y=(t,o,s,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of _(o))!v.call(t,r)&&r!==s&&a(t,r,{get:()=>o[r],enumerable:!(i=h(o,r))||i.enumerable});return t};var b=t=>y(a({},"__esModule",{value:!0}),t);var w={};x(w,{ShopifyColorOption:()=>N});module.exports=b(w);var e=require("react/jsx-runtime"),n=require("../../../../../../components"),l=require("../../../../utils/helper.js"),u=require("react"),c=require("../../../../../../helpers"),m=require("../../../../../AiuiProvider/index.js");const N=({onClick:t,label:o,className:s})=>{const[i,r]=(0,u.useState)({}),{locale:E,storeDomain:f}=(0,m.useAiuiContext)(),d=`https://${f}/cdn/shop/files/${(0,l.handle)(o)}.png`;return(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("button",{className:(0,c.cn)("relative flex h-[36px] w-[36px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",!t&&"cursor-default",s),"aria-label":`switch to ${o}`,onClick:t||(()=>{}),title:o,style:i[o]?{background:o}:{},children:!i[o]&&(0,e.jsx)(e.Fragment,{children:(0,e.jsx)(n.Picture,{className:"w-full",source:d,onError:({currentTarget:p})=>{p.onerror=null,r(g=>({...g,[o]:!0}))}})})}),(0,e.jsx)("div",{className:"absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]})};
+//# sourceMappingURL=ShopifyColorOption.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/ShopifyColorOption.tsx"],
+  "sourcesContent": ["import { Picture } from '../../../../../../components'\nimport { handle } from '../../../../utils/helper.js'\nimport { useState } from 'react'\nimport { cn as classNames } from '../../../../../../helpers'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\n\nexport const ShopifyColorOption = ({\n  onClick,\n  label,\n  className,\n}: {\n  onClick?: () => void\n  label: string\n  className?: string\n}) => {\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const { locale, storeDomain } = useAiuiContext()\n  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n  return (\n    <div className='relative'>\n      <button\n        className={classNames(\n          `relative flex h-[36px] w-[36px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white`,\n          !onClick && 'cursor-default',\n          className,\n        )}\n        aria-label={`switch to ${label}`}\n        onClick={onClick ? onClick : () => {}}\n        title={label}\n        // If the image fails to load, set the background color to the color of the label\n        style={imgLoadError[label as keyof typeof imgLoadError] ? { background: label } : {}}\n      >\n        {!imgLoadError[label as keyof typeof imgLoadError] && (\n          <>\n            <Picture\n              className='w-full'\n              source={imagePath}\n              onError={({ currentTarget }) => {\n                currentTarget.onerror = null // prevents looping\n                setImgLoadError((prev) => ({ ...prev, [label]: true }))\n              }}\n            />\n          </>\n        )}\n      </button>\n      <div className='absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]'></div>\n    </div>\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wBAAAE,IAAA,eAAAC,EAAAH,GAoBI,IAAAI,EAAA,6BApBJC,EAAwB,wCACxBC,EAAuB,uCACvBC,EAAyB,iBACzBC,EAAiC,qCACjCC,EAA+B,gDAExB,MAAMP,EAAqB,CAAC,CACjC,QAAAQ,EACA,MAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EAE7C,CAAE,OAAAC,EAAQ,YAAAC,CAAY,KAAI,kBAAe,EACzCC,EAAY,WAAWD,CAAW,sBAAmB,UAAOL,CAAK,CAAC,OACxE,SACE,QAAC,OAAI,UAAU,WACb,oBAAC,UACC,aAAW,EAAAO,IACT,mJACA,CAACR,GAAW,iBACZE,CACF,EACA,aAAY,aAAaD,CAAK,GAC9B,QAASD,IAAoB,IAAM,CAAC,GACpC,MAAOC,EAEP,MAAOE,EAAaF,CAAkC,EAAI,CAAE,WAAYA,CAAM,EAAI,CAAC,EAElF,UAACE,EAAaF,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQM,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBL,EAAiBM,IAAU,CAAE,GAAGA,EAAM,CAACT,CAAK,EAAG,EAAK,EAAE,CACxD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,yGAAyG,GAC1H,CAEJ",
+  "names": ["ShopifyColorOption_exports", "__export", "ShopifyColorOption", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helper", "import_react", "import_helpers", "import_AiuiProvider", "onClick", "label", "className", "imgLoadError", "setImgLoadError", "locale", "storeDomain", "imagePath", "classNames", "currentTarget", "prev"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var c=(a,o)=>{for(var l in o)s(a,l,{get:o[l],enumerable:!0})},x=(a,o,l,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of n(o))!g.call(a,r)&&r!==l&&s(a,r,{get:()=>o[r],enumerable:!(i=d(o,r))||i.enumerable});return a};var p=a=>x(s({},"__esModule",{value:!0}),a);var f={};c(f,{SpecsModal:()=>b});module.exports=p(f);var t=require("react/jsx-runtime"),e=require("../../../../../../components"),m=require("../../../../BizProductProvider");const b=()=>{const{product:a}=(0,m.useBizProductContext)();return(0,t.jsxs)(e.Dialog,{children:[(0,t.jsx)(e.DialogTrigger,{children:(0,t.jsx)("button",{className:"text-base leading-[1.4] font-bold",children:"Specs"})}),(0,t.jsxs)(e.DialogContent,{overlayClassName:"z-[100]",className:"max-h-[80vh] z-[110] overflow-y-scroll tablet:min-w-[600px] min-w-[90vw]",children:[(0,t.jsx)(e.DialogHeader,{className:"border-b border-[#E8E8E8]",children:(0,t.jsx)(e.DialogTitle,{children:"Specs"})}),(0,t.jsx)(e.Grid,{className:"gap-[40px]",children:a.metafields?.global?.specifications?.map(({key:o,value:l})=>(0,t.jsxs)(e.GridItem,{span:12,className:"flex w-full py-[24px] border-b border-[#E8E8E8]",children:[(0,t.jsx)(e.Text,{className:"flex-1 text-[16px] font-bold text-[#595959]",children:o}),(0,t.jsx)("div",{className:"flex-1 flex items-center",children:(0,t.jsx)(e.Text,{className:"text-[16px] font-semibold text-[#595959]",html:l?.trim().toLowerCase()==="true"?"\u2714\uFE0F":l?.trim().toLowerCase()==="false"?"\u274C":l})})]}))})]})]})};
+//# sourceMappingURL=SpecsModal.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
+  "sourcesContent": ["import {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Specs</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[80vh] z-[110] overflow-y-scroll tablet:min-w-[600px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Specs</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px]\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={12} className=\"flex w-full py-[24px] border-b border-[#E8E8E8]\">\n              <Text className=\"flex-1 text-[16px] font-bold text-[#595959]\">{key}</Text>\n              <div className=\"flex-1 flex items-center\">\n                <Text\n                  className=\"text-[16px] font-semibold text-[#595959]\"\n                  html={\n                    value?.trim().toLowerCase() === 'true'\n                      ? '\u2714\uFE0F'\n                      : value?.trim().toLowerCase() === 'false'\n                        ? '\u274C'\n                        : value\n                  }\n                />\n              </div>\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAkBQ,IAAAI,EAAA,6BAlBRC,EASO,wCACPC,EAAqC,0CAE9B,MAAMJ,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAK,CAAQ,KAAI,wBAAqB,EAEzC,SACE,QAAC,UACC,oBAAC,iBACC,mBAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,KACA,QAAC,iBACC,iBAAiB,UACjB,UAAU,2EAEV,oBAAC,gBAAa,UAAU,4BACtB,mBAAC,eAAY,iBAAK,EACpB,KACA,OAAC,QAAK,UAAU,aACb,SAAAA,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,OAC7D,QAAC,YAAS,KAAM,GAAI,UAAU,kDAC5B,oBAAC,QAAK,UAAU,8CAA+C,SAAAD,EAAI,KACnE,OAAC,OAAI,UAAU,2BACb,mBAAC,QACC,UAAU,2CACV,KACEC,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,EACF,GACF,CACD,EACH,GACF,GACF,CAEJ",
+  "names": ["SpecsModal_exports", "__export", "SpecsModal", "__toCommonJS", "import_jsx_runtime", "import_components", "import_BizProductProvider", "product", "key", "value"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var O=Object.create;var M=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var q=(t,a)=>{for(var i in a)M(t,i,{get:a[i],enumerable:!0})},_=(t,a,i,b)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of U(a))!K.call(t,r)&&r!==i&&M(t,r,{get:()=>a[r],enumerable:!(b=H(a,r))||b.enumerable});return t};var J=(t,a,i)=>(i=t!=null?O(Z(t)):{},_(a||!t||!t.__esModule?M(i,"default",{value:t,enumerable:!0}):i,t)),Q=t=>_(M({},"__esModule",{value:!0}),t);var ae={};q(ae,{default:()=>le});module.exports=Q(ae);var e=require("react/jsx-runtime"),R=require("../../../../AiuiProvider/index.js"),T=require("../../../../../components"),l=require("react"),k=require("swiper/react"),c=require("swiper/modules"),h=require("../../../../../helpers/index.js"),S=require("./types.js"),N=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),F=require("../../../hooks/use-variant-media.js"),j=require("./components/SpecsModal.js"),Y=J(require("./components/CompareModal.js")),$=require("../../../utils/index.js");const B=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"})]}),D=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"})]}),X=()=>{const{copyWriting:t}=(0,R.useAiuiContext)(),{product:a,variant:i,selectedOptions:b}=(0,z.useBizProductContext)(),r=(0,F.useVariantMedia)({product:a,variant:i}),[m,g]=(0,l.useState)(null),s=i?.metafields?.component?.custom_media_list;let f,y,x,v;s&&s?.available?(f=s?.product||[],y=s?.scenarios||[],x=s?.keyFeatures||[],v=s?.video||[]):(f=r?.productList,y=r?.sceneList,x=r?.keyFeaturesList,v=r?.videoList);const L=(0,l.useMemo)(()=>[...f,...y,...v],[f,y,v]),p={productList:f,sceneList:y,keyFeaturesList:x,videoList:v},n=(0,l.useMemo)(()=>(a?.payload?.components?.find(d=>d.componentKey==="ProductGallery")?.data||[])?.map(d=>({...d,galleries:p[d?.galleries]||[]})).filter(d=>d.galleries.length>0),[a?.payload,p]),[P,G]=(0,l.useState)(n?.[0]),[I,u]=(0,l.useState)(0),[w,C]=(0,l.useState)(null),E=(0,l.useCallback)(()=>{const o=(I+1)%n.length;u(o),G(n[o]),C(0)},[I,n]),A=(0,l.useCallback)(()=>{const o=I===0?n.length-1:I-1;u(o),G(n[o]);const d=n[o]?.galleries||[];C(d.length-1)},[I,n]);(0,l.useEffect)(()=>{G(n[0])},[i?.id]);const W=(o,d)=>{switch(o?.galleryTabType){case S.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(V,{...o,index:d,onNextTab:E,onPrevTab:A,targetSlideIndex:w,onSlideChange:()=>C(null)});case S.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(V,{...o,index:d,onNextTab:E,onPrevTab:A,targetSlideIndex:w,onSlideChange:()=>C(null)});case S.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(V,{...o,index:d,onNextTab:E,onPrevTab:A,targetSlideIndex:w,onSlideChange:()=>C(null)});case S.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(te,{...o,onNextTab:E,onPrevTab:A,targetSlideIndex:w,onSlideChange:()=>C(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(N.Root,{className:"relative",value:P?.tabValue,defaultValue:n?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:n.map((o,d)=>(0,e.jsx)(N.Content,{className:"h-full",value:o.tabValue,children:W(o,d)},o.tabValue))}),(0,e.jsx)(ee,{galleryTabs:n,activeGalleryTab:P,setActiveGalleryTab:G,setActiveTabIndex:u,setTargetSlideIndex:C})]})})},ee=({galleryTabs:t,activeGalleryTab:a,setActiveGalleryTab:i,setActiveTabIndex:b,setTargetSlideIndex:r})=>{const{product:m}=(0,z.useBizProductContext)(),g=(0,l.useRef)(null);return(0,e.jsxs)("div",{className:"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static",children:[(0,e.jsx)(N.List,{ref:g,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:t?.map((s,f)=>(0,e.jsx)(N.Trigger,{className:(0,h.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",s.tabValue===a?.tabValue&&"bg-white"),onClick:y=>{if(i(s),b(f),r(0),g.current){const x=g.current,v=y.currentTarget,L=v.offsetLeft-x.offsetWidth/2+v.offsetWidth/2;x.scrollTo({left:L,behavior:"smooth"})}},value:s.tabValue,children:s.tabLabel},s.tabValue))})}),(0,e.jsx)("div",{className:"laptop:gap-2 hidden laptop:flex",children:m.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(j.SpecsModal,{})," | ",(0,e.jsx)(Y.default,{})]})})]})},V=(0,l.forwardRef)((t,a)=>{const{locale:i="us",copyWriting:b}=(0,R.useAiuiContext)(),{variant:r,totalSavings:m}=(0,z.useBizProductContext)(),g=(0,l.useRef)(null),[s,f]=(0,l.useState)(null),[y,x]=(0,l.useState)(!0),[v,L]=(0,l.useState)(!1),[p,n]=(0,l.useState)(null),P=(0,l.useMemo)(()=>{if(t?.galleryTabType===S.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===S.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,S.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),G=(0,l.useCallback)(()=>{p?.isBeginning?t.onPrevTab?.():p?.slidePrev()},[p,t]),I=(0,l.useCallback)(()=>{p?.isEnd?t.onNextTab?.():p?.slideNext()},[p,t]);return(0,l.useEffect)(()=>{p&&t.targetSlideIndex&&(p.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[p,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(k.Swiper,{ref:a,className:"h-full",onSwiper:n,onProgress:u=>{x(u.isBeginning),L(u.isEnd)},pagination:{clickable:!0,el:g.current},thumbs:{swiper:s},modules:[c.Mousewheel,c.Thumbs,c.Navigation,c.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((u,w)=>(0,e.jsx)(k.SwiperSlide,{className:"h-full",children:(0,e.jsx)(T.Picture,{source:u?.image?.url,alt:u?.image?.altText,className:(0,h.cn)("h-full",P),imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideItem"+w))}),r.availableForSale&&!!m&&!t.index&&(0,e.jsx)(T.Badge,{size:"lg",className:"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6",children:`${(0,$.formatPrice)({amount:m,currencyCode:r?.price?.currencyCode,locale:i})} ${b?.off}`}),(0,e.jsx)("div",{className:(0,h.cn)("hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:G,children:(0,e.jsx)(B,{className:(0,h.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,h.cn)("hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer","swiper-button"),onClick:I,children:(0,e.jsx)(D,{className:(0,h.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6",children:[(0,e.jsx)("div",{className:"hidden tablet:block",children:(0,e.jsx)(k.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[c.Navigation,c.Thumbs],children:t?.galleries?.map((u,w)=>(0,e.jsx)(k.SwiperSlide,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:(0,e.jsx)(T.Picture,{source:u.image?.url,alt:u.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+w))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(T.Picture,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),(0,e.jsx)(T.Text,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2"})]})]}),(0,e.jsx)("div",{ref:g,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),te=t=>{const[a,i]=(0,l.useState)(null),b=(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)(k.Swiper,{className:"h-full",onSwiper:i,modules:[c.Mousewheel,c.Thumbs,c.Navigation,c.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((m,g)=>(0,e.jsx)(k.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full",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"+g))}),(0,e.jsx)("div",{className:(0,h.cn)("hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:b,children:(0,e.jsx)(B,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,h.cn)("hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(D,{className:"tablet:size-10 lg-desktop:size-12"})})]})},oe=t=>(0,e.jsx)("div",{children:"3D View"});var le=X;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Button, Badge } from '../../../../../components'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  type RefObject,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        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\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => ({\n        ...item,\n        galleries: galleryMap[item?.galleries] || [],\n      }))\n      .filter((item: any) => item.galleries.length > 0)\n  }, [product?.payload, galleryMap])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n  setActiveTabIndex,\n  setTargetSlideIndex,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n  setActiveTabIndex: Dispatch<SetStateAction<number>>\n  setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n}) => {\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"absolute z-[2] bottom-4 left-4 right-4 laptop:left-16 laptop:right-16 flex justify-between items-center tablet:mt-3 desktop:static\">\n      <List\n        ref={scrollContainerRef}\n        className=\"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] rounded-full font-bold lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => {\n                  setActiveGalleryTab(item)\n                  setActiveTabIndex(index)\n                  setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n                  if (scrollContainerRef.current) {\n                    const container = scrollContainerRef.current\n                    const button = el.currentTarget\n                    const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n                    container.scrollTo({\n                      left: scrollLeft,\n                      behavior: 'smooth',\n                    })\n                  }\n                }}\n                key={item.tabValue}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 hidden laptop:flex\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onProgress={swiper => {\n          setStart(swiper.isBeginning)\n          setEnd(swiper.isEnd)\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <Picture\n                source={item?.image?.url}\n                alt={item?.image?.altText}\n                className={cn('h-full', imageClassName)}\n                imgClassName=\"object-cover h-full\"\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"absolute bg-brand text-white top-3 laptop:left-16 laptop:top-5 left-4 z-[2] desktop:left-6 desktop:top-6\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'hidden tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 z-10 desktop:right-6 -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"absolute bottom-[94px] tablet:bottom-[70px] left-4 right-4 z-10 items-center tablet:flex justify-between laptop:left-16 laptop:right-16 desktop:bottom-[20px] desktop:right-6 desktop:left-6\">\n        <div className=\"hidden tablet:block\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded\"\n                  imgClassName=\"object-contain h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"size-8 laptop:size-10 rounded-full shrink-0\"\n              imgClassName=\"object-cover \"\n            />\n            <Text\n              html={props?.comment?.content}\n              className=\"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2\"\n            />\n          </div>\n        )}\n      </div>\n      <div ref={paginationRef} className=\"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10\" />\n    </div>\n  )\n})\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'hidden swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'hidden tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default ProductGallery\n"],
+  "mappings": "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",
+  "names": ["ProductGallery_exports", "__export", "ProductGallery_default", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_react", "import_modules", "import_helpers", "import_types", "import_react_tabs", "import_BizProductProvider", "import_use_variant_media", "import_SpecsModal", "import_CompareModal", "import_utils", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "CompareModal", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "imageClassName", "handlePrevClick", "handleNextClick", "jIndex", "ProductGalleryTab3DView"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var s=(a,e)=>{for(var t in e)n(a,t,{get:e[t],enumerable:!0})},b=(a,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!m.call(a,i)&&i!==t&&n(a,i,{get:()=>e[i],enumerable:!(o=l(e,i))||o.enumerable});return a};var p=a=>b(n({},"__esModule",{value:!0}),a);var u={};s(u,{GalleryTabType:()=>d});module.exports=p(u);var d=(r=>(r.GALLERY_IMAGE_MAIN="ipc-gallery-tab-image-main",r.GALLERY_IMAGE_FEATURES="ipc-gallery-tab-image-features",r.GALLERY_IMAGE_SCENE="ipc-gallery-tab-image-scene",r.GALLERY_VIDEO="ipc-gallery-tab-video",r.GALLERY_3D_VIEW="ipc-gallery-tab-3d-view",r))(d||{});
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/types.ts"],
+  "sourcesContent": ["import type { Img, Video } from '../../../../../types/props.js'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\n\nexport interface ProductGalleryProps {\n  data: {\n    gallerySections: {\n      title: string\n    }[]\n  }\n}\n\nexport interface ProductGalleryTabItemProps {\n  index?: number\n  realIndex?: number\n  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n  onCurrentTabLoopStart?: (index: number) => void\n  onCurrentTabLoopEnd?: (index: number) => void\n  onNextTab?: () => void\n  onPrevTab?: () => void\n  targetSlideIndex?: number | null\n  onSlideChange?: () => void\n  id: string\n  comment?: {\n    content: string\n    avatar: Img\n  }\n  tabLabel: string\n  tabValue: string\n  // galleryImgs?: Img[]\n  // galleryVideo?: Video\n  // gallery3DView?: Video\n}\n\nexport interface GalleryTabItemProps {\n  tabLabel: string\n  tabValue: string\n  id: string\n  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n}[]\n\nexport enum GalleryTabType {\n  GALLERY_IMAGE_MAIN = 'ipc-gallery-tab-image-main',\n  GALLERY_IMAGE_FEATURES = 'ipc-gallery-tab-image-features',\n  GALLERY_IMAGE_SCENE = 'ipc-gallery-tab-image-scene',\n  GALLERY_VIDEO = 'ipc-gallery-tab-video',\n  GALLERY_3D_VIEW = 'ipc-gallery-tab-3d-view',\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GA0CO,IAAKE,OACVA,EAAA,mBAAqB,6BACrBA,EAAA,uBAAyB,iCACzBA,EAAA,oBAAsB,8BACtBA,EAAA,cAAgB,wBAChBA,EAAA,gBAAkB,0BALRA,OAAA",
+  "names": ["types_exports", "__export", "GalleryTabType", "__toCommonJS"]
+}

package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGridBox.js

@@ -0,0 +1,2 @@
+"use strict";var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(o,t)=>{for(var e in t)s(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of r(t))!i.call(o,a)&&a!==e&&s(o,a,{get:()=>t[a],enumerable:!(c=l(t,a))||c.enumerable});return o};var x=o=>m(s({},"__esModule",{value:!0}),o);var R={};k(R,{default:()=>N});module.exports=x(R);var p=require("react/jsx-runtime"),d=require("../../../../components");const G=({BoxLeftGallery:o,BoxRightDetail:t,BoxBottomSummary:e})=>(0,p.jsxs)("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[(0,p.jsxs)(d.Grid,{className:"desktop:gap-4 lg-desktop:gap-8 gap-8",children:[(0,p.jsx)(d.GridItem,{className:"col-span-12 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:o}),(0,p.jsx)(d.GridItem,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:t})]}),e]});var N=G;
+//# sourceMappingURL=ProductGridBox.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/biz-components/Listing/components/ProductCard/ProductGridBox.tsx"],
+  "sourcesContent": ["import { Grid, GridItem } from '../../../../components'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"desktop:gap-4 lg-desktop:gap-8 gap-8\">\n        <GridItem className=\"col-span-12 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"col-span-12 desktop:col-start-9 desktop:col-span-4\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaM,IAAAI,EAAA,6BAbNC,EAA+B,kCAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,OAMI,QAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,qBAAC,QAAK,UAAU,uCACd,oBAAC,YAAS,UAAU,0GACjB,SAAAF,EACH,KACA,OAAC,YAAS,UAAU,qDAAsD,SAAAC,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOP,EAAQI",
+  "names": ["ProductGridBox_exports", "__export", "ProductGridBox_default", "__toCommonJS", "import_jsx_runtime", "import_components", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary"]
+}

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

@@ -0,0 +1,2 @@
+"use strict";var J=Object.create;var w=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var K=(n,t)=>{for(var o in t)w(n,o,{get:t[o],enumerable:!0})},j=(n,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of M(t))!q.call(n,r)&&r!==o&&w(n,r,{get:()=>t[r],enumerable:!(i=H(t,r))||i.enumerable});return n};var Q=(n,t,o)=>(o=n!=null?J(W(n)):{},j(t||!n||!n.__esModule?w(o,"default",{value:n,enumerable:!0}):o,n)),U=n=>j(w({},"__esModule",{value:!0}),n);var _={};K(_,{default:()=>Z});module.exports=U(_);var e=require("react/jsx-runtime"),a=require("../../../../../components"),k=require("../../../BizProductProvider"),g=require("react"),x=require("../../../utils"),P=require("../../../../AiuiProvider"),ne=require("../../../../../helpers"),B=Q(require("decimal.js"));const X=({})=>{const{locale:n="us",copyWriting:t}=(0,P.useAiuiContext)(),{product:o,variant:i,finalPrice:r,comparePrice:p,coupon:b,selectedOptions:s,selectedVariants:u,totalSavings:h,onAddToCart:z,onBuyNow:D,savingDetail:N,checkedBundle:C,joinedRecommendBuyProducts:l,setJoinedRecommendBuyProducts:f,setCheckedGift:O,setCheckedExchangePurchase:m,setCheckedBundle:y,setSavingDetail:R}=(0,k.useBizProductContext)(),[E]=u,I=(0,g.useMemo)(()=>{const[d]=C?.variants||[],T=new B.default(E?.price?.amount||0).minus(d?.price||E?.price?.amount).toNumber();return new B.default(E?.price?.amount||0).minus(N?.coupon).minus(T).toNumber()},[E,h,C]);if(!i.availableForSale)return null;const{bundleVariant:A,giftVariant:F,exchangeVariant:V}=Y()||{},[c,v]=(0,g.useState)();(0,g.useEffect)(()=>{v({bundle:l.bundle?.value?void 0:A,gift:l.gift?.value?void 0:F,exchange:l.exchange?.value?void 0:V})},[A,F,V,l]);const $=(0,g.useMemo)(()=>new B.default(p).minus(N.freeGift).toNumber(),[p,N]);return(0,e.jsx)("div",{className:"ipc-product-summary laptop:px-16 desktop:px-0 mt-16 desktop:mt-[96px] lg-desktop:mt-[128px]",children:(0,e.jsx)("div",{className:"bg-[#F5F5F7] laptop:rounded-2xl",children:(0,e.jsxs)(a.Grid,{className:"px-4 py-6 tablet:p-8",children:[(0,e.jsxs)(a.GridItem,{className:"col-span-12 laptop:col-start-1 laptop:col-span-5",children:[(0,e.jsx)(a.Heading,{className:"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]",html:`${o.title} is ready <br/><span>Just the way you want it.</span>`}),(0,e.jsx)("div",{className:"aspect-[644/320]",children:(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"h-full w-full",imgClassName:"object-cover h-full"})})]}),(0,e.jsxs)(a.GridItem,{className:"col-span-12 mt-8 laptop:col-start-7 laptop:mt-0 laptop:col-span-6 flex flex-col gap-6 justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"shrink-0 flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:i.image?.url||o?.images?.[0]?.url,className:"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:o.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x1 | ${s.color||s.colour||s.couleur}`})]})]}),(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:I,currencyCode:i.price.currencyCode,locale:n})}),h>0&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:i?.price?.amount,currencyCode:i.price.currencyCode,locale:n})})]})]}),l?.gift?.value&&(0,e.jsx)(S,{giftOperation:d=>{O?.(void 0),f?.({...l,gift:{value:void 0,canOperate:!0}}),v?.({...c,gift:d})},status:!!l?.gift,gift:l?.gift?.value,canOperate:l?.gift?.canOperate}),l?.bundle?.value&&(0,e.jsx)(G,{bundleOperation:d=>{y?.(void 0),f?.({...l,bundle:{value:void 0,canOperate:!0}}),v?.({...c,bundle:d})},status:!!l?.bundle,bundleListItem:l?.bundle?.value,canOperate:l?.bundle?.canOperate}),l?.exchange?.value&&(0,e.jsx)(L,{exchangeOperation:d=>{m?.(void 0),f?.({...l,exchange:{value:void 0,canOperate:!0}}),v?.({...c,exchange:d})},status:!!l?.exchange,canOperate:l?.exchange?.canOperate,exchange:l?.exchange?.value})]}),(c?.bundle||c?.gift||c?.exchange)&&(0,e.jsxs)("div",{className:"mt-6",children:[(0,e.jsx)(a.Text,{className:"text-sm desktop:text-[18px] font-bold",html:"Recommend Buy"}),(0,e.jsxs)("div",{className:"flex flex-col gap-6 mt-6",children:[c?.exchange&&(0,e.jsx)(L,{exchangeOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},gift:{value:l?.gift?.value,canOperate:!0},exchange:{value:d,canOperate:!0}}),v?.({...c,exchange:void 0})},canOperate:l?.exchange?.canOperate,status:!c?.exchange,exchange:c?.exchange}),c?.bundle&&(0,e.jsx)(G,{bundleOperation:d=>{O?.(void 0),m?.(void 0),R?.({...N,exchangePurchase:0}),f?.({gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0},bundle:{value:d,canOperate:!0}}),v?.({...c,bundle:void 0})},canOperate:l?.bundle?.canOperate,status:!c?.bundle,bundleListItem:c?.bundle}),c?.gift&&(0,e.jsx)(S,{giftOperation:d=>{y?.(void 0),f?.({bundle:{value:void 0,canOperate:!0},exchange:{value:l?.exchange?.value,canOperate:!0},gift:{value:d,canOperate:!0}}),v?.({...c,gift:void 0})},canOperate:l?.gift?.canOperate,status:!c?.gift,gift:c?.gift})]})]})]}),(0,e.jsxs)("div",{className:"text-right",children:[(0,e.jsx)(a.Text,{className:"laptop:text-xl desktop:text-2xl font-bold text-right",html:`${t?.totalPrice} ${(0,x.formatPrice)({amount:r,currencyCode:i.price.currencyCode,locale:n})}`}),h>0&&(0,e.jsx)(a.Text,{className:"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:$,currencyCode:i.price.currencyCode,locale:n})}),(0,e.jsxs)("div",{className:"flex gap-3 mt-2 justify-end",children:[(0,e.jsx)(a.Button,{size:"lg",variant:"secondary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>z?.(),children:t?.addToCart}),(0,e.jsx)(a.Button,{size:"lg",variant:"primary",className:"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto",onClick:()=>D?.(),children:t?.shopNow})]})]})]})]})})})},Y=()=>{const{bundle:n,variant:t,checkedBundle:o,freeGift:i,checkedGift:r,exchangePurchase:p,checkedExchangePurchase:b}=(0,k.useBizProductContext)();let s,u,h;const{bundleList:z}=n||{},{giftList:D=[]}=i||{},{giftList:N=[]}=p||{},C=z?.filter(m=>m.variants.slice(1,m.variants.length).every(y=>y.variant.availableForSale))||[],[l]=C;s=o||l;const[f]=D?.filter(m=>m.availableForSale);u=r||f;const[O]=N?.filter(m=>m.availableForSale);return h=b||O,{bundleVariant:s,giftVariant:u,exchangeVariant:h}},G=({bundleOperation:n,bundleListItem:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,P.useAiuiContext)(),{variant:p,setCheckedBundle:b}=(0,k.useBizProductContext)(),s=t?.variants.filter(u=>u.variant.sku!==p.sku);return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[s?.map(u=>(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:u?.variant?.image?.url,className:"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsx)("div",{className:"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none",children:(0,e.jsx)(a.Text,{className:"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",html:u.variant.product.title})})]},u.variant.id)),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-1 justify-center",children:[!!t&&(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:s?.[0]?.price||0,locale:r,currencyCode:s?.[0]?.variant?.price?.currencyCode||""})}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(i?void 0:t),n?.(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})},S=({giftOperation:n,gift:t,status:o,canOperate:i})=>{const{locale:r="us"}=(0,P.useAiuiContext)(),{freeGift:p,setCheckedGift:b}=(0,k.useBizProductContext)(),{freeLabel:s,count:u}=p||{};return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]",html:`x${u} | ${s}`})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:s}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:t.price.amount,locale:r,currencyCode:t.price.currencyCode})})]}),i&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{b?.(o?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:o?"Remove":"Add"})]})]})},L=({exchangeOperation:n,exchange:t,canOperate:o,status:i})=>{const{locale:r="us"}=(0,P.useAiuiContext)(),{setCheckedExchangePurchase:p}=(0,k.useBizProductContext)();return(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(a.Picture,{source:t?.image?.url,className:"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] bg-[#EAEAEC] rounded-[5px] rounded-lg"}),(0,e.jsxs)("div",{className:"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none",children:[(0,e.jsx)(a.Text,{className:"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]",html:t?.product?.title}),(0,e.jsx)(a.Text,{className:"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]"})]})]}),(0,e.jsxs)("div",{className:"flex flex-col items-end gap-2 justify-center",children:[!!t&&(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold",html:(0,x.formatPrice)({amount:t.finalPrice?.amount||0,locale:r,currencyCode:t.price.currencyCode})}),(0,e.jsx)(a.Text,{className:"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:(0,x.formatPrice)({amount:t.price?.amount||0,locale:r,currencyCode:t.price.currencyCode})})]}),o&&(0,e.jsx)(a.Button,{size:"icon",variant:"link",onClick:()=>{p?.(i?void 0:t),n(t)},className:"shrink-0 size-auto underline",children:i?"Remove":"Add"})]})]})};var Z=X;
+//# sourceMappingURL=index.js.map