@anker-in/headless-ui 1.0.26-alpha.1762236947129 → 1.0.26-alpha.1762243303200

package/dist/esm/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": "AAsBc,OAqBY,YAAAA,EArBZ,OAAAC,EAKM,QAAAC,MALN,oBAtBd,OAAS,QAAAC,EAAM,WAAAC,MAAuB,+BAEtC,OAAS,MAAAC,MAAU,qCACnB,OAAS,YAAAC,MAAgB,QACzB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,UAAAC,MAAc,8BAEvB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,EAClFP,EAAqB,EACjB,CAAE,YAAAQ,CAAY,EAAIP,EAAe,EACjC,CAACQ,EAAcC,CAAe,EAAIX,EAAS,CAAC,CAAC,EACnD,OAAKK,EAAQ,QAAQ,OAEnBV,EAAC,OAAI,UAAU,uBACZ,SAAAU,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,EAE9DlB,EAAC,OAAoB,UAAU,6BAC7B,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAM,iBAAmBS,EAAgBM,EAAO,IAAI,EAAG,EACnGjB,EAAC,OAAI,UAAU,+BACZ,SAAAiB,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,mBAAmBN,EAAOY,CAAK,CAAC,OACxE,OACEnB,EAAC,OAAwB,UAAU,4CACjC,UAAAD,EAAC,UACC,aAAY,aAAaoB,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,UAAWT,EACT,oIACA,CACE,gBAAiBO,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,GAC/CpB,EAAAD,EAAA,CACE,SAAAC,EAACG,EAAA,CACC,UAAU,SACV,OAAQmB,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,EACApB,EAAC,OAAI,UAAU,6HAA6H,IA5BpIoB,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,EAIAhB,EAAC,OAAoB,UAAU,6BAC7B,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMe,EAAO,KAAM,EAC/DjB,EAAC,OAAI,UAAU,+BACZ,SAAAiB,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,IAC1BpB,EAAC,UAEC,QAAS,IAAM,CACbY,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,UAAWhB,EAAG,4EAA6E,CACzF,eAAgBO,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOQ,EAAQhB",
+  "names": ["Fragment", "jsx", "jsxs", "Text", "Picture", "cn", "useState", "useBizProductContext", "useAiuiContext", "handle", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "ProductOptions_default"]
+}

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

@@ -0,0 +1,2 @@
+declare const ProductDetail: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default ProductDetail;

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

@@ -0,0 +1,2 @@
+import{jsx as o,jsxs as f}from"react/jsx-runtime";import"./ProductBenefitsTabs/index.js";import t from"./ProductHighlight/index.js";import r from"./ProductFreeGift/index.js";import p from"./ProductOptions/index.js";import i from"./ProductBundle/index.js";import e from"./BenefitsTab";const d=m=>f("div",{id:"ipc-product-detail",className:"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4",children:[o(e,{}),o(t,{}),o(p,{}),o(r,{}),o(i,{})]});var P=d;export{P as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/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": "AAUI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAVJ,MAAgC,iCAChC,OAAOC,MAAsB,8BAC7B,OAAOC,MAAqB,6BAC5B,OAAOC,MAAoB,4BAC3B,OAAOC,MAAmB,2BAC1B,OAAOC,MAAiB,gBAGxB,MAAMC,EAAiBC,GAEnBP,EAAC,OAAI,GAAG,qBAAqB,UAAU,kEACrC,UAAAD,EAACM,EAAA,EAAY,EACbN,EAACE,EAAA,EAAiB,EAClBF,EAACI,EAAA,EAAe,EAChBJ,EAACG,EAAA,EAAgB,EACjBH,EAACK,EAAA,EAAc,GACjB,EAIJ,IAAOI,EAAQF",
+  "names": ["jsx", "jsxs", "ProductHighlight", "ProductFreeGift", "ProductOptions", "ProductBundle", "BenefitsTab", "ProductDetail", "props", "ProductDetail_default"]
+}

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

@@ -0,0 +1,43 @@
+import type { ProductOption } from '../../../../../cpn-components/CpnProductCard/types.js';
+import type { Img } from '../../../../../types/props.js';
+export interface ProductDetailProps {
+}
+export declare enum BenefitsTabsType {
+    ALL_BENEFITS = "allBenefits",
+    COUPON = "coupon",
+    INSTALLMENT = "installment",
+    MEMBERSHIP = "membership"
+}
+export interface ProductBenefitsTabsProps {
+    data: {
+        allBenefits: {
+            benefits: {
+                type?: BenefitsTabsType;
+                tabName: string;
+                tabValue: string;
+                collectBgImage?: Img;
+                coupons?: BenefitsTabCouponProps[];
+            }[];
+        };
+    };
+}
+export interface BenefitsTabCouponProps {
+    code: string;
+    title: string;
+    description: string;
+    discount: number;
+    bgImage: Img;
+}
+export interface ProductBenefitsTabCouponProps {
+    coupons?: BenefitsTabCouponProps[];
+}
+export interface HighlightProps {
+    data: any;
+}
+export interface ProductOptionsProps {
+    option: ProductOption;
+    onOptionChange: (arg0: {
+        id: string;
+        value: string;
+    }) => void;
+}

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

@@ -0,0 +1,2 @@
+var o=(t=>(t.ALL_BENEFITS="allBenefits",t.COUPON="coupon",t.INSTALLMENT="installment",t.MEMBERSHIP="membership",t))(o||{});export{o as BenefitsTabsType};
+//# sourceMappingURL=types.js.map

package/dist/esm/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": "AAUO,IAAKA,OACVA,EAAA,aAAe,cACfA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,WAAa,aAJHA,OAAA",
+  "names": ["BenefitsTabsType"]
+}

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

@@ -0,0 +1,2 @@
+declare const CompareModal: () => import("react/jsx-runtime").JSX.Element | null;
+export default CompareModal;

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

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useEffect as g,useState as b}from"react";import{Dialog as v,DialogTrigger as N,DialogContent as C,DialogHeader as E,DialogTitle as y,Grid as p,GridItem as s,Text as h}from"../../../../../../components";import{useBizProductContext as D}from"../../../../BizProductProvider";import G from"./Select";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{formatPrice as I}from"../../../../utils";import{ShopifyColorOption as k}from"./ShopifyColorOption";const P=()=>{const{locale:f="us"}=w(),{compareData:o,product:u}=D(),[d,x]=b();g(()=>{x(o?.availableCompareList[0]?.handle)},[o?.availableCompareList]);const m=[o?.currentProductCompareData?.product,o?.availableCompareList.find(t=>t.handle===d)?.product].filter(Boolean);return o?.specificationKeys?r(v,{children:[e(N,{children:e("button",{className:"text-base leading-[1.4] font-bold",children:"Compare"})}),r(C,{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:[e(E,{className:"border-b border-[#E8E8E8]",children:e(y,{children:"Compare"})}),r(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1}),m.map((t,i)=>e(s,{span:1,className:"flex items-center",children:e("img",{src:t.images[0].url,alt:t.title,className:"h-[200px] w-[200px]",role:"presentation"})},i))]}),r(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Product"})}),e(s,{span:1,children:e(h,{as:"div",className:"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold",html:o.currentProductCompareData?.shortName||u.title})}),d&&e(s,{span:1,children:e(G,{value:d,onChange:t=>{x(t)},list:o.options})})]}),r(p,{className:"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e(s,{span:1,children:e("div",{className:"text-[16px] font-bold text-[#595959]",children:"Basic Information"})}),m.map((t,i)=>{const l=t.variants[0],c=t.options?.find(a=>["color","colour","couleur"].find(n=>a.name.toLowerCase().includes(n)))?.values.map(a=>a.label);return e(s,{span:1,className:"flex h-full",children:r("div",{className:"flex flex-col gap-[8px]",children:[l.price.amount<9999999&&r("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Price:"}),e("div",{className:"flex items-center gap-[6px]",children:e("span",{className:"text-[16px] font-bold",children:I({locale:f,amount:l.price.amount,currencyCode:l.price.currencyCode})})})]}),c?.length&&r("div",{className:"flex items-center gap-[8px]",children:[e("div",{className:"text-[16px] font-semibold text-[#595959]",children:"Color:"}),e("div",{className:"flex items-center gap-[16px]",children:c.map(a=>e(k,{label:a,className:"h-[16px] w-[16px]"},a))})]})]})},i)})]}),e(p,{className:"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]",children:o.specificationKeys?.map(t=>r(s,{span:12,className:"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]",children:[e("div",{className:"text-[16px] font-bold text-[#595959]",children:t}),m.map((i,l)=>{let a=i.metafields?.global?.specifications?.find(n=>n?.key===t)?.value||"";switch(a.trim().toLowerCase()){case"true":a="\u2714\uFE0F";break;case"false":a="\u274C";break;default:break}return e("div",{className:"flex items-center",children:e("div",{className:"text-[16px] font-semibold text-[#595959]",children:a})},l)})]},t))})]})]}):null};var A=P;export{A as default};
+//# sourceMappingURL=CompareModal.js.map

package/dist/esm/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": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
+}

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

@@ -0,0 +1,21 @@
+interface SelectProps {
+    label?: string;
+    required?: boolean;
+    list?: {
+        value: string;
+        text: string;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    disabled?: boolean;
+    error?: string;
+    errorClassName?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    containerClassName?: string;
+    selectListClassName?: string;
+    truncate?: boolean;
+}
+declare const Select: ({ label, required, list, value, disabled, error, errorClassName, onChange, placeholder, className, containerClassName, selectListClassName, truncate, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as r}from"react/jsx-runtime";import{ChevronDownIcon as y}from"@heroicons/react/24/outline";import{cn as n,cn as C}from"../../../../../../helpers";import{useEffect as D,useRef as v,useState as S}from"react";const L=({label:x="",required:m=!1,list:a=[],value:l="",disabled:b=!1,error:s="",errorClassName:g="",onChange:u=f=>{},placeholder:i="",className:h="",containerClassName:w="",selectListClassName:N="",truncate:E=!1,...F})=>{const f=v(null),[d,c]=S(!1),p=v(null),k=a.find(e=>e?.value===l)?.text;return D(()=>{const e=o=>{p.current&&!p.current?.contains(o.target)&&c(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),r("div",{className:n("relative w-full",w),children:[x&&r("div",{className:"mb-[10px] text-[16px] font-bold",children:[x,m&&t("span",{className:"text-[#F84D4F]",children:"*"})]}),r("div",{ref:p,className:"relative block",children:[r("div",{className: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]",i&&!l?"placeholder:text-[#999]":"",b?"pointer-events-none bg-[#F7F8F9]":"bg-white",s?"!border-[#F84D4F]":"border-[#E8E8E8]",a.length<=1&&"cursor-default",h),onClick:()=>{a.length>1&&c(!d)},onChange:e=>{u(e.target.value)},role:"button",tabIndex:0,onKeyDown:e=>{(e.key==="Enter"||e.key===" ")&&e.preventDefault()},...F,children:[!l&&i?t("div",{className:"text-[#999]",children:i}):t("div",{className:C("line-clamp-1",E?"min-w-0 flex-1 truncate":"flex-1"),children:k}),a.length>1&&t(y,{className:n("ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform",d&&"rotate-180")})]}),t("div",{ref:f,className: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",d?"":"pointer-events-none opacity-0",N),children:a.map(e=>t("div",{"data-value":e.value,className: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]",l===e.value?"!bg-[#E8E8E8]":"",e?.disabled?"pointer-events-none text-[#C8C8C8]":""),onClick:()=>{u(e.value),c(!1)},role:"button",tabIndex:0,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&o.preventDefault()},children:e.text},e.value))})]}),s&&t("div",{className:n("mt-[8px] text-[14px] text-[#F84D4F]",g),children:typeof s=="string"?`*${s}`:s})]})};var H=L;export{H as default};
+//# sourceMappingURL=Select.js.map

package/dist/esm/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 { ChevronDownIcon } from '@heroicons/react/24/outline'\nimport { 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": "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",
+  "names": ["jsx", "jsxs", "ChevronDownIcon", "classNames", "cn", "useEffect", "useRef", "useState", "Select", "label", "required", "list", "value", "disabled", "error", "errorClassName", "onChange", "placeholder", "className", "containerClassName", "selectListClassName", "truncate", "props", "dropdownRef", "selecting", "setSelecting", "buttonRef", "displayValue", "item", "handleClickOutside", "event", "e", "Select_default"]
+}

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

@@ -0,0 +1,5 @@
+export declare const ShopifyColorOption: ({ onClick, label, className, }: {
+    onClick?: () => void;
+    label: string;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import{Fragment as g,jsx as t,jsxs as h}from"react/jsx-runtime";import{Picture as c}from"../../../../../../components";import{handle as m}from"../../../../utils/helper.js";import{useState as f}from"react";import{cn as d}from"../../../../../../helpers";import{useAiuiContext as p}from"../../../../../AiuiProvider/index.js";const w=({onClick:e,label:o,className:s})=>{const[r,i]=f({}),{locale:_,storeDomain:a}=p(),n=`https://${a}/cdn/shop/files/${m(o)}.png`;return h("div",{className:"relative",children:[t("button",{className:d("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",!e&&"cursor-default",s),"aria-label":`switch to ${o}`,onClick:e||(()=>{}),title:o,style:r[o]?{background:o}:{},children:!r[o]&&t(g,{children:t(c,{className:"w-full",source:n,onError:({currentTarget:l})=>{l.onerror=null,i(u=>({...u,[o]:!0}))}})})}),t("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)]"})]})};export{w as ShopifyColorOption};
+//# sourceMappingURL=ShopifyColorOption.js.map

package/dist/esm/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": "AAoBI,OAcM,YAAAA,EACE,OAAAC,EAfR,QAAAC,MAAA,oBApBJ,OAAS,WAAAC,MAAe,+BACxB,OAAS,UAAAC,MAAc,8BACvB,OAAS,YAAAC,MAAgB,QACzB,OAAS,MAAMC,MAAkB,4BACjC,OAAS,kBAAAC,MAAsB,uCAExB,MAAMC,EAAqB,CAAC,CACjC,QAAAC,EACA,MAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIR,EAAS,CAAC,CAAC,EAE7C,CAAE,OAAAS,EAAQ,YAAAC,CAAY,EAAIR,EAAe,EACzCS,EAAY,WAAWD,CAAW,mBAAmBX,EAAOM,CAAK,CAAC,OACxE,OACER,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,UACC,UAAWK,EACT,mJACA,CAACG,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,GAC/CT,EAAAD,EAAA,CACE,SAAAC,EAACE,EAAA,CACC,UAAU,SACV,OAAQa,EACR,QAAS,CAAC,CAAE,cAAAC,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBJ,EAAiBK,IAAU,CAAE,GAAGA,EAAM,CAACR,CAAK,EAAG,EAAK,EAAE,CACxD,EACF,EACF,EAEJ,EACAT,EAAC,OAAI,UAAU,yGAAyG,GAC1H,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "Picture", "handle", "useState", "classNames", "useAiuiContext", "ShopifyColorOption", "onClick", "label", "className", "imgLoadError", "setImgLoadError", "locale", "storeDomain", "imagePath", "currentTarget", "prev"]
+}

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

@@ -0,0 +1 @@
+export declare const SpecsModal: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Dialog as s,DialogTrigger as i,DialogContent as m,DialogHeader as d,DialogTitle as n,Grid as g,GridItem as c,Text as a}from"../../../../../../components";import{useBizProductContext as x}from"../../../../BizProductProvider";const f=()=>{const{product:l}=x();return o(s,{children:[e(i,{children:e("button",{className:"text-base leading-[1.4] font-bold",children:"Specs"})}),o(m,{overlayClassName:"z-[100]",className:"max-h-[80vh] z-[110] overflow-y-scroll tablet:min-w-[600px] min-w-[90vw]",children:[e(d,{className:"border-b border-[#E8E8E8]",children:e(n,{children:"Specs"})}),e(g,{className:"gap-[40px]",children:l.metafields?.global?.specifications?.map(({key:r,value:t})=>o(c,{span:12,className:"flex w-full py-[24px] border-b border-[#E8E8E8]",children:[e(a,{className:"flex-1 text-[16px] font-bold text-[#595959]",children:r}),e("div",{className:"flex-1 flex items-center",children:e(a,{className:"text-[16px] font-semibold text-[#595959]",html:t?.trim().toLowerCase()==="true"?"\u2714\uFE0F":t?.trim().toLowerCase()==="false"?"\u274C":t})})]}))})]})]})};export{f as SpecsModal};
+//# sourceMappingURL=SpecsModal.js.map

package/dist/esm/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": "AAkBQ,cAAAA,EAWI,QAAAC,MAXJ,oBAlBR,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,+BACP,OAAS,wBAAAC,MAA4B,iCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EAEzC,OACET,EAACC,EAAA,CACC,UAAAF,EAACG,EAAA,CACC,SAAAH,EAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,EACAC,EAACG,EAAA,CACC,iBAAiB,UACjB,UAAU,2EAEV,UAAAJ,EAACK,EAAA,CAAa,UAAU,4BACtB,SAAAL,EAACM,EAAA,CAAY,iBAAK,EACpB,EACAN,EAACO,EAAA,CAAK,UAAU,aACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,IAC7Db,EAACO,EAAA,CAAS,KAAM,GAAI,UAAU,kDAC5B,UAAAR,EAACS,EAAA,CAAK,UAAU,8CAA+C,SAAAI,EAAI,EACnEb,EAAC,OAAI,UAAU,2BACb,SAAAA,EAACS,EAAA,CACC,UAAU,2CACV,KACEK,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,EACF,GACF,CACD,EACH,GACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "key", "value"]
+}

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

@@ -0,0 +1,2 @@
+declare const ProductGallery: () => import("react/jsx-runtime").JSX.Element;
+export default ProductGallery;

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

@@ -0,0 +1,2 @@
+import{Fragment as ee,jsx as e,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as z}from"../../../../AiuiProvider/index.js";import{Text as $,Picture as T,Badge as F}from"../../../../../components";import{useMemo as k,useState as y,forwardRef as j,useRef as L}from"react";import{Swiper as G,SwiperSlide as N}from"swiper/react";import{Navigation as E,Mousewheel as V,Thumbs as C,Pagination as R}from"swiper/modules";import{cn as m}from"../../../../../helpers/index.js";import{GalleryTabType as b}from"./types.js";import{Content as Y,List as W,Root as O,Trigger as H}from"@radix-ui/react-tabs";import{useBizProductContext as M}from"../../../BizProductProvider.js";import{useVariantMedia as U}from"../../../hooks/use-variant-media.js";import{SpecsModal as Z}from"./components/SpecsModal.js";import K from"./components/CompareModal.js";import{formatPrice as q}from"../../../utils/index.js";const _=t=>c("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),e("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"})]}),B=t=>c("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[e("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),e("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"})]}),J=()=>{const{copyWriting:t}=z(),{product:r,variant:p,selectedOptions:x}=M(),o=U({product:r,variant:p}),[d,w]=y(null),i=p?.metafields?.component?.custom_media_list;let s,u,v,f;i&&i?.available?(s=i?.product||[],u=i?.scenarios||[],v=i?.keyFeatures||[],f=i?.video||[]):(s=o?.productList,u=o?.sceneList,v=o?.keyFeaturesList,f=o?.videoList);const A=k(()=>[...s,...u,...f],[s,u,f]),S={productList:s,sceneList:u,keyFeaturesList:v,videoList:f},g=k(()=>(r?.payload?.components?.find(a=>a.componentKey==="ProductGallery")?.data||[])?.map(a=>({...a,galleries:S[a?.galleries]||[]})).filter(a=>a.galleries.length>0),[r?.payload,S]),I=L({}),[l,h]=y(g?.[0]),D=(n,a)=>{switch(n?.galleryTabType){case b.GALLERY_IMAGE_MAIN:return e(P,{...n,index:a});case b.GALLERY_IMAGE_FEATURES:return e(P,{...n,index:a});case b.GALLERY_IMAGE_SCENE:return e(P,{...n,index:a});case b.GALLERY_VIDEO:return e(X,{...n});default:return null}};return e("div",{id:"ipc-product-gallery",children:c(O,{className:"relative",defaultValue:g?.[0]?.tabValue,children:[e("div",{className:"h-[420px] overflow-hidden tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] bg-[#EAEAEC] desktop:relative ",children:g.map((n,a)=>e(Y,{className:"h-full",value:n.tabValue,children:D(n,a)},n.tabValue))}),e(Q,{galleryTabs:g,activeGalleryTab:l,setActiveGalleryTab:h})]})})},Q=({galleryTabs:t,activeGalleryTab:r,setActiveGalleryTab:p})=>{const{product:x}=M(),o=L(null);return c("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:[e(W,{ref:o,className:"rounded-full bg-[#EAEAEC] p-1 laptop:p-0 desktop:p-1 overflow-x-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e("div",{className:"whitespace-nowrap",children:t?.map(d=>e(H,{className:m("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",d.tabValue===r?.tabValue&&"bg-white"),onClick:w=>{if(p(d),o.current){const i=o.current,s=w.currentTarget,u=s.offsetLeft-i.offsetWidth/2+s.offsetWidth/2;i.scrollTo({left:u,behavior:"smooth"})}},value:d.tabValue,children:d.tabLabel},d.tabValue))})}),e("div",{className:"laptop:gap-2 hidden laptop:flex",children:x.metafields?.global?.specifications&&c(ee,{children:[e(Z,{})," | ",e(K,{})]})})]})},P=j((t,r)=>{const{locale:p="us",copyWriting:x}=z(),{variant:o,totalSavings:d}=M(),w=L(null),[i,s]=y(null),[u,v]=y(!0),[f,A]=y(!1),[S,g]=y(null),I=k(()=>{if(t?.galleryTabType===b.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===b.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,b.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]);return c("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(G,{ref:r,className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},onSwiper:g,onProgress:l=>{v(l.isBeginning),A(l.isEnd)},pagination:{clickable:!0,el:w.current},onSlideChange:l=>{l&&(l.isEnd?t?.onCurrentTabLoopEnd?.():l.isBeginning&&t?.onCurrentTabLoopStart?.())},thumbs:{swiper:i},modules:[V,C,E,R],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((l,h)=>e(N,{className:"h-full",children:e(T,{source:l?.image?.url,alt:l?.image?.altText,className:m("h-full",I),imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideItem"+h))}),o.availableForSale&&!!d&&!t.index&&e(F,{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:`${q({amount:d,currencyCode:o?.price?.currencyCode,locale:p})} ${x?.off}`}),e("div",{className:m("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`,"swiper-button"),children:e(_,{className:m("tablet:size-10 lg-desktop:size-12")})}),e("div",{className:m("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`,"swiper-button"),children:e(B,{className:m("tablet:size-10 lg-desktop:size-12")})}),c("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:[e("div",{className:"hidden tablet:block",children:e(G,{className:"flex items-center justify-between",onSwiper:s,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[E,C],children:t?.galleries?.map((l,h)=>e(N,{className:"!w-auto [&.swiper-slide-thumb-active]:border [&.swiper-slide-thumb-active]:rounded [&.swiper-slide-thumb-active]:border-brand",children:e(T,{source:l.image?.url,alt:l.image?.altText,className:"size-10 lg-desktop:size-12 overflow-hidden bg-white rounded",imgClassName:"object-contain h-full"})},t?.id+"SwiperSlideThumbItem"+h))})}),!t?.index&&c("div",{className:"flex items-center gap-2",children:[e(T,{source:t?.comment?.avatar?.url,className:"size-8 laptop:size-10 rounded-full shrink-0",imgClassName:"object-cover "}),e($,{html:t?.comment?.content,className:"text-sm lg-desktop:text-base max-w-[528px] font-bold text-[#1D1D1F] line-clamp-2"})]})]}),e("div",{ref:w,className:"tablet:hidden text-center absolute !bottom-[70px] left-4 right-4 z-10"})]})}),X=t=>c("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[e(G,{className:"h-full",navigation:{nextEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-next`,prevEl:`.ipc-product-gallery-${t?.id}-custom-swiper-button-prev`},modules:[V,C,E,R],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((r,p)=>e(N,{className:"h-full",children:c("video",{controls:!0,className:"size-full",children:[e("track",{kind:"captions"}),e("source",{src:r?.sources?.[0]?.url,type:"video/mp4"}),e("source",{src:r?.sources?.[0]?.url,type:"video/webm"}),e("source",{src:r?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+p))}),e("div",{className:m("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-prev`),children:e(_,{className:"tablet:size-10 lg-desktop:size-12"})}),e("div",{className:m("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",`ipc-product-gallery-${t?.id}-custom-swiper-button-next`),children:e(B,{className:"tablet:size-10 lg-desktop:size-12"})})]}),ye=t=>e("div",{children:"3D View"});var we=J;export{we as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/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  // \u4E3A\u6BCF\u4E2A galleryTab \u521B\u5EFA\u5BF9\u5E94\u7684 ref\n  const gallerySwiperRefs = useRef<{ [key: string]: SwiperRef | null }>({})\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n\n\n  // useEffect(() => {\n  //   if (selectedOptions?.color) {\n  //     setActiveGalleryTab(galleryTabs?.find((item: any) => item.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN))\n  //   }\n  // }, [selectedOptions, galleryTabs])\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      //   GalleryTabType.GALLERY_IMAGE_FEATURES ||\n      //   GalleryTabType.GALLERY_IMAGE_SCENE:\n      //   return (\n      //     <ProductGalleryTabImage\n      //       {...tab}\n      //       // onCurrentTabLoopEnd={() => {\n      //       //   setActiveGalleryTab(galleryTabs?.[index])\n      //       // }}\n      //       // onCurrentTabLoopStart={() => {\n      //       //   setActiveGalleryTab(galleryTabs?.[index])\n      //       // }}\n      //       index={index}\n      //     />\n      //   )\n\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return <ProductGalleryTabImage {...tab} index={index} />\n      case GalleryTabType.GALLERY_VIDEO:\n        return <ProductGalleryTabVideo {...tab} />\n      // case GalleryTabType.GALLERY_3D_VIEW:\n      //   return <ProductGalleryTab3DView {...item} />\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" defaultValue={galleryTabs?.[0]?.tabValue}>\n        {/* <Swiper\n          className=\"h-[420px] laptop:h-[700px] bg-[#EAEAEC] rounded-2xl\"\n          onSwiper={setSwiper}\n          loop={true}\n          // onProgress={swiper => {\n          //   setStart(swiper.isBeginning)\n          //   setEnd(swiper.isEnd)\n          // }}\n          modules={[Mousewheel]}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n        >\n          {galleryTabs.map((item, index) => {\n            return (\n              <Content forceMount key={item.tabValue} value={item.tabValue}>\n                <SwiperSlide key={index}>{renderGalleryForTab(activeGalleryTab)}</SwiperSlide>\n              </Content>\n            )\n          })}\n        </Swiper>\n        <div\n          className={cn(\n            'absolute top-1/2 left-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-prev`\n          )}\n        >\n          <SwiperLeftButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slidePrev()\n              }\n            }}\n          />\n        </div>\n        <div\n          className={cn(\n            'absolute top-1/2 right-6 z-10 -translate-y-1/2 cursor-pointer',\n            `ipc-product-gallery-custom-swiper-button-next`\n          )}\n        >\n          <SwiperRightButtonIcon\n            className=\"size-12\"\n            onClick={() => {\n              if (activeGalleryTab?.tabValue) {\n                const currentRef = gallerySwiperRefs.current[activeGalleryTab.tabValue]\n                currentRef?.swiper?.slideNext()\n              }\n            }}\n          />\n        </div> */}\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        />\n      </Root>\n    </div>\n  )\n}\n\nconst ProductGalleryTab = ({\n  galleryTabs,\n  activeGalleryTab,\n  setActiveGalleryTab,\n}: {\n  galleryTabs: GalleryTabItemProps[]\n  activeGalleryTab: GalleryTabItemProps\n  setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\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 => {\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                  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  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        onSlideChange={swiper => {\n          if (swiper) {\n            if (swiper.isEnd) {\n              props?.onCurrentTabLoopEnd?.()\n            } else if (swiper.isBeginning) {\n              props?.onCurrentTabLoopStart?.()\n            }\n          }\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-contain 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      >\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      >\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  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\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        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      >\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      >\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": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useMemo", "useState", "forwardRef", "useRef", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "item", "gallerySwiperRefs", "activeGalleryTab", "setActiveGalleryTab", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "scrollContainerRef", "el", "container", "button", "scrollLeft", "ref", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "isStart", "setStart", "isEnd", "setEnd", "imageClassName", "jIndex", "ProductGalleryTab3DView", "ProductGallery_default"]
+}

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

@@ -0,0 +1,37 @@
+import type { Img } from '../../../../../types/props.js';
+import type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js';
+export interface ProductGalleryProps {
+    data: {
+        gallerySections: {
+            title: string;
+        }[];
+    };
+}
+export interface ProductGalleryTabItemProps {
+    index: number;
+    galleryTabType: GalleryTabType;
+    galleries: ImageMedia[] | VideoMedia[];
+    onCurrentTabLoopStart?: () => void;
+    onCurrentTabLoopEnd?: () => void;
+    id: string;
+    comment?: {
+        content: string;
+        avatar: Img;
+    };
+    tabLabel: string;
+    tabValue: string;
+}
+export interface GalleryTabItemProps {
+    tabLabel: string;
+    tabValue: string;
+    id: string;
+    galleryTabType: GalleryTabType;
+    galleries: ImageMedia[] | VideoMedia[];
+}
+export declare enum GalleryTabType {
+    GALLERY_IMAGE_MAIN = "ipc-gallery-tab-image-main",
+    GALLERY_IMAGE_FEATURES = "ipc-gallery-tab-image-features",
+    GALLERY_IMAGE_SCENE = "ipc-gallery-tab-image-scene",
+    GALLERY_VIDEO = "ipc-gallery-tab-video",
+    GALLERY_3D_VIEW = "ipc-gallery-tab-3d-view"
+}

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

@@ -0,0 +1,2 @@
+var a=(e=>(e.GALLERY_IMAGE_MAIN="ipc-gallery-tab-image-main",e.GALLERY_IMAGE_FEATURES="ipc-gallery-tab-image-features",e.GALLERY_IMAGE_SCENE="ipc-gallery-tab-image-scene",e.GALLERY_VIDEO="ipc-gallery-tab-video",e.GALLERY_3D_VIEW="ipc-gallery-tab-3d-view",e))(a||{});export{a as GalleryTabType};
+//# sourceMappingURL=types.js.map

package/dist/esm/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  galleryTabType: GalleryTabType\n  galleries: ImageMedia[] | VideoMedia[]\n  onCurrentTabLoopStart?: () => void\n  onCurrentTabLoopEnd?: () => 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": "AAqCO,IAAKA,OACVA,EAAA,mBAAqB,6BACrBA,EAAA,uBAAyB,iCACzBA,EAAA,oBAAsB,8BACtBA,EAAA,cAAgB,wBAChBA,EAAA,gBAAkB,0BALRA,OAAA",
+  "names": ["GalleryTabType"]
+}

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

@@ -0,0 +1,6 @@
+declare const ProductGridBox: ({ BoxLeftGallery, BoxRightDetail, BoxBottomSummary, }: {
+    BoxLeftGallery: React.ReactNode;
+    BoxRightDetail: React.ReactNode;
+    BoxBottomSummary: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ProductGridBox;

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

@@ -0,0 +1,2 @@
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import{Grid as s,GridItem as t}from"../../../../components";const c=({BoxLeftGallery:p,BoxRightDetail:a,BoxBottomSummary:d})=>e("div",{id:"ipc-product-card",className:"desktop:mt-6 desktop:px-16 lg-desktop:px-[calc(50%-832px)]",children:[e(s,{className:"desktop:gap-4 lg-desktop:gap-8 gap-8",children:[o(t,{className:"col-span-12 laptop:px-0 desktop:col-start-1 desktop:col-span-8 desktop:sticky desktop:top-[124px] h-fit",children:p}),o(t,{className:"col-span-12 desktop:col-start-9 desktop:col-span-4",children:a})]}),d]});var r=c;export{r as default};
+//# sourceMappingURL=ProductGridBox.js.map

package/dist/esm/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": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,yBAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,6DACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,uCACd,UAAAF,EAACG,EAAA,CAAS,UAAU,0GACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,qDAAsD,SAAAG,EAAe,GAC3F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
+  "names": ["jsx", "jsxs", "Grid", "GridItem", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary", "ProductGridBox_default"]
+}

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

@@ -0,0 +1,3 @@
+import type { ProductSummaryProps } from './types';
+declare const ProductSummary: ({}: ProductSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ProductSummary;

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductSummary/index.tsx"],
+  "sourcesContent": ["import { Text, Button, Container, Grid, GridItem, Picture, Heading } from '../../../../../components'\nimport type { ProductSummaryProps } from './types'\nimport { useBizProductContext } from '../../../BizProductProvider'\nimport { useEffect, useMemo, useState } from 'react'\nimport { formatPrice } from '../../../utils'\nimport { useAiuiContext } from '../../../../AiuiProvider'\nimport type { BundleListItem, ProductVariant, ProductPrice } from '../../../types/product'\nimport { cn } from '../../../../../helpers'\nimport Decimal from 'decimal.js'\n\nconst ProductSummary = ({}: ProductSummaryProps) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const {\n    product,\n    variant,\n    finalPrice,\n    comparePrice,\n    coupon,\n    selectedOptions,\n    selectedVariants,\n    totalSavings,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    checkedBundle,\n    joinedRecommendBuyProducts,\n    setJoinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const [currentJoinedRecommendBuyProducts, setCurrentJoinedRecommendBuyProducts] = useState<{\n    bundle?: boolean\n    gift?: boolean\n    exchange?: boolean\n  }>({\n    bundle: false,\n    gift: false,\n    exchange: false,\n  })\n\n  const [currentProductVariant] = selectedVariants\n\n  const summaryFinalPrice = useMemo(() => {\n    const [currentBundleVariant] = checkedBundle?.variants || []\n    const currentBundlePrice = new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(currentBundleVariant?.price || currentProductVariant?.price?.amount)\n      .toNumber()\n    return new Decimal(currentProductVariant?.price?.amount || 0)\n      .minus(savingDetail?.coupon)\n      .minus(currentBundlePrice)\n      .toNumber()\n  }, [currentProductVariant, totalSavings, checkedBundle])\n\n  const isAvailable = variant.availableForSale\n  if (!isAvailable) return null\n\n  const { bundleVariant, giftVariant, exchangeVariant } = useRecommendBuyProducts() || {}\n  const [initialRecommendBuyProducts, setInitialRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n    exchange?: ProductVariant\n  }>()\n\n  useEffect(() => {\n    setInitialRecommendBuyProducts({\n      bundle: joinedRecommendBuyProducts.bundle ? undefined : bundleVariant,\n      gift: joinedRecommendBuyProducts.gift ? undefined : giftVariant,\n      exchange: joinedRecommendBuyProducts.exchange ? undefined : exchangeVariant,\n    })\n  }, [bundleVariant, giftVariant, joinedRecommendBuyProducts])\n\n  const comparePriceRemovedFreeGift = useMemo(\n    () => new Decimal(comparePrice).minus(savingDetail.freeGift).toNumber(),\n    [comparePrice, savingDetail]\n  )\n\n  return (\n    <div className=\"ipc-product-summary laptop:px-16 desktop:px-0 mt-8 desktop:mt-16\">\n      <div className=\"bg-[#F5F5F7] laptop:rounded-2xl\">\n        <Grid className=\"px-4 py-6 tablet:p-8\">\n          <GridItem className=\"col-span-12 laptop:col-start-1 laptop:col-span-5\">\n            <Heading\n              className=\"font-bold text-[24px] lg-desktop:text-[48px] laptop:text-[32px] desktop:text-[40px] leading-[1] mb-4 [&>span]:text-[#D1D1D1]\"\n              html={`${product.title} is ready <br/><span>Just the way you want it.</span>`}\n            />\n            <div className=\"aspect-[644/320]\">\n              <Picture\n                source={variant.image?.url || product?.images?.[0]?.url}\n                className=\"h-full w-full\"\n                imgClassName=\"object-contain h-full\"\n              />\n            </div>\n          </GridItem>\n          <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\">\n            <div>\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"shrink-0 flex items-center gap-4\">\n                    <Picture\n                      source={variant.image?.url || product?.images?.[0]?.url}\n                      className=\"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] rounded-[5px] rounded-lg\"\n                    />\n                    <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n                      <Text\n                        className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n                        html={product.title}\n                      />\n                      <Text\n                        className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n                        html={`x1 | ${selectedOptions.color || selectedOptions.colour || selectedOptions.couleur}`}\n                      />\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Text\n                      className=\"text-base desktop:text-2xl font-bold\"\n                      html={formatPrice({\n                        amount: summaryFinalPrice,\n                        currencyCode: variant.price.currencyCode,\n                        locale,\n                      })}\n                    />\n                    {totalSavings > 0 && (\n                      <Text\n                        className=\"text-base desktop:text-2xl laptop:text-xl font-bold line-through text-[#6D6D6F]\"\n                        html={formatPrice({\n                          amount: variant?.price?.amount,\n                          currencyCode: variant.price.currencyCode,\n                          locale,\n                        })}\n                      />\n                    )}\n                  </div>\n                </div>\n                {joinedRecommendBuyProducts?.gift && (\n                  <ProductGiftSummary\n                    giftOperation={gift => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.gift}\n                    gift={joinedRecommendBuyProducts?.gift}\n                    currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.gift}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.bundle && (\n                  <ProductBundleSummary\n                    bundleOperation={bundle => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.bundle}\n                    bundleListItem={joinedRecommendBuyProducts?.bundle}\n                    currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.bundle}\n                  />\n                )}\n                {joinedRecommendBuyProducts?.exchange && (\n                  <ProductExchangeSummary\n                    exchangeOperation={exchange => {\n                      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, exchange: undefined })\n                      setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange })\n                    }}\n                    status={!!joinedRecommendBuyProducts?.exchange}\n                    currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.exchange}\n                    exchange={joinedRecommendBuyProducts?.exchange}\n                  />\n                )}\n              </div>\n              {(initialRecommendBuyProducts?.bundle ||\n                initialRecommendBuyProducts?.gift ||\n                initialRecommendBuyProducts?.exchange) && (\n                <div className=\"mt-6\">\n                  <Text className=\"text-sm desktop:text-[18px] font-bold\" html={'Recommend Buy'} />\n                  <div className=\"flex flex-col gap-6 mt-6\">\n                    {initialRecommendBuyProducts?.exchange && (\n                      <ProductExchangeSummary\n                        exchangeOperation={exchange => {\n                          setJoinedRecommendBuyProducts?.({ exchange })\n                          setCurrentJoinedRecommendBuyProducts({ ...currentJoinedRecommendBuyProducts, exchange: false })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, exchange: undefined })\n                        }}\n                        currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.exchange}\n                        status={!initialRecommendBuyProducts?.exchange}\n                        exchange={initialRecommendBuyProducts?.exchange}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.bundle && (\n                      <ProductBundleSummary\n                        bundleOperation={bundle => {\n                          setJoinedRecommendBuyProducts?.({ bundle })\n                          setCurrentJoinedRecommendBuyProducts({ ...currentJoinedRecommendBuyProducts, bundle: false })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, bundle: undefined })\n                        }}\n                        currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.bundle}\n                        status={!initialRecommendBuyProducts?.bundle}\n                        bundleListItem={initialRecommendBuyProducts?.bundle}\n                      />\n                    )}\n                    {initialRecommendBuyProducts?.gift && (\n                      <ProductGiftSummary\n                        giftOperation={gift => {\n                          setJoinedRecommendBuyProducts?.({ gift })\n                          setCurrentJoinedRecommendBuyProducts({ ...currentJoinedRecommendBuyProducts, gift: false })\n                          setInitialRecommendBuyProducts?.({ ...initialRecommendBuyProducts, gift: undefined })\n                        }}\n                        currentJoinedRecommendBuyProducts={currentJoinedRecommendBuyProducts?.gift}\n                        status={!initialRecommendBuyProducts?.gift}\n                        gift={initialRecommendBuyProducts?.gift}\n                      />\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n            <div className=\"text-right\">\n              <Text\n                className=\"laptop:text-xl desktop:text-2xl font-bold text-right\"\n                html={`${copyWriting?.totalPrice} ${formatPrice({ amount: finalPrice, currencyCode: variant.price.currencyCode, locale })}`}\n              />\n\n              {totalSavings > 0 && (\n                <Text\n                  className=\"text-base laptop:text-xl desktop:text-2xl ml-1 font-bold line-through text-[#6D6D6F]\"\n                  html={formatPrice({\n                    amount: comparePriceRemovedFreeGift,\n                    currencyCode: variant.price.currencyCode,\n                    locale,\n                  })}\n                />\n              )}\n              <div className=\"flex gap-3 mt-2 justify-end\">\n                <Button\n                  size=\"lg\"\n                  variant=\"secondary\"\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onAddToCart?.()}\n                >\n                  {copyWriting?.addToCart}\n                </Button>\n                <Button\n                  size=\"lg\"\n                  variant=\"primary\"\n                  className=\"w-1/2 tablet:w-auto laptop:w-1/2 desktop:w-auto\"\n                  onClick={() => onBuyNow?.()}\n                >\n                  {copyWriting?.shopNow}\n                </Button>\n              </div>\n            </div>\n          </GridItem>\n        </Grid>\n      </div>\n    </div>\n  )\n}\n\nconst useRecommendBuyProducts = () => {\n  const { bundle, variant, checkedBundle, freeGift, checkedGift, exchangePurchase, checkedExchangePurchase } =\n    useBizProductContext()\n  let bundleVariant = undefined\n  let giftVariant = undefined\n  let exchangeVariant = undefined\n  const { bundleList } = bundle || {}\n\n  const { giftList = [] } = freeGift || {}\n  const { giftList: exchangeList = [] } = exchangePurchase || {}\n\n  const availableBundleList =\n    bundleList?.filter(bundle =>\n      bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n    ) || []\n\n  const [firstAvailableBundle] = availableBundleList\n  bundleVariant = checkedBundle || firstAvailableBundle\n\n  const [firstAvailableGift] = giftList?.filter(gift => gift.availableForSale)\n  giftVariant = checkedGift || firstAvailableGift\n\n  const [firstAvailableExchange] = exchangeList?.filter(exchange => exchange.availableForSale)\n  exchangeVariant = checkedExchangePurchase || firstAvailableExchange\n\n  return { bundleVariant, giftVariant, exchangeVariant }\n}\n\nconst ProductBundleSummary = ({\n  bundleOperation,\n  bundleListItem,\n  currentJoinedRecommendBuyProducts,\n  status,\n}: {\n  bundleOperation: (bundle: BundleListItem) => void\n  bundleListItem: BundleListItem\n  currentJoinedRecommendBuyProducts?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { variant, setCheckedBundle } = useBizProductContext()\n  const bundleVariants = bundleListItem?.variants.filter(v => v.variant.sku !== variant.sku)\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      {bundleVariants?.map(bundleVariant => {\n        return (\n          <div className=\"flex items-center gap-4\" key={bundleVariant.variant.id}>\n            <Picture\n              source={bundleVariant?.variant?.image?.url}\n              className=\"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] rounded-[5px] rounded-lg\"\n            />\n            <div className=\"flex flex-col gap-[6px] line-clamp-2 max-w-[178px] tablet:max-w-none\">\n              <Text\n                className=\"font-bold text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                html={bundleVariant.variant.product.title}\n              />\n            </div>\n          </div>\n        )\n      })}\n      <div className=\"flex flex-col items-end gap-1 justify-center\">\n        {!!bundleListItem && (\n          <Text\n            className=\"text-base desktop:text-2xl font-bold\"\n            html={formatPrice({\n              amount: bundleVariants[0]?.price,\n              locale,\n              currencyCode: bundleVariants[0]?.variant?.price?.currencyCode,\n            })}\n          />\n        )}\n        {!currentJoinedRecommendBuyProducts && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedBundle?.(status ? undefined : bundleListItem)\n              bundleOperation(bundleListItem)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {!!status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductGiftSummary = ({\n  giftOperation,\n  gift,\n  currentJoinedRecommendBuyProducts,\n  status,\n}: {\n  giftOperation: (gift: ProductVariant) => void\n  gift: ProductVariant\n  currentJoinedRecommendBuyProducts?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, setCheckedGift } = useBizProductContext()\n  const { freeLabel, count } = freeGift || {}\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={gift?.image?.url}\n          className=\"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={gift?.product?.title}\n          />\n          <Text\n            className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\"\n            html={`x${count} | ${freeLabel}`}\n          />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!gift && (\n          <div className=\"flex items-center gap-1\">\n            <Text className=\"text-base desktop:text-2xl font-bold\" html={freeLabel} />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: gift.price.amount,\n                locale,\n                currencyCode: gift.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {currentJoinedRecommendBuyProducts && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedGift?.(status ? undefined : gift)\n              giftOperation(gift)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst ProductExchangeSummary = ({\n  exchangeOperation,\n  exchange,\n  currentJoinedRecommendBuyProducts,\n  status,\n}: {\n  exchangeOperation: (exchange: ProductVariant) => void\n  exchange: ProductVariant & { finalPrice?: ProductPrice }\n  currentJoinedRecommendBuyProducts?: boolean\n  status?: boolean\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { setCheckedExchangePurchase } = useBizProductContext()\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex items-center gap-4\">\n        <Picture\n          source={exchange?.image?.url}\n          className=\"size-10 laptop:size-12 lg-desktop:size-16 object-cover border-1 border-[#E4E5E6] rounded-[5px] rounded-lg\"\n        />\n        <div className=\"flex flex-col gap-[6px] max-w-[178px] tablet:max-w-none\">\n          <Text\n            className=\"font-bold text-[14px] line-clamp-2 desktop:text-[16px] lg-desktop:text-[18px]\"\n            html={exchange?.product?.title}\n          />\n          <Text className=\"text-[12px] laptop:text-[14px] desktop:text-[18px] font-bold text-[#6D6D6F]\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col items-end gap-2 justify-center\">\n        {!!exchange && (\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"text-base desktop:text-2xl font-bold\"\n              html={formatPrice({\n                amount: exchange.finalPrice?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n            <Text\n              className=\"text-base desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n              html={formatPrice({\n                amount: exchange.price?.amount || 0,\n                locale,\n                currencyCode: exchange.price.currencyCode,\n              })}\n            />\n          </div>\n        )}\n        {currentJoinedRecommendBuyProducts && (\n          <Button\n            size=\"icon\"\n            variant=\"link\"\n            onClick={() => {\n              setCheckedExchangePurchase?.(status ? undefined : exchange)\n              exchangeOperation(exchange)\n            }}\n            className=\"shrink-0 size-auto underline\"\n          >\n            {status ? 'Remove' : 'Add'}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductSummary\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "Text", "Button", "Grid", "GridItem", "Picture", "Heading", "useBizProductContext", "useEffect", "useMemo", "useState", "formatPrice", "useAiuiContext", "Decimal", "ProductSummary", "locale", "copyWriting", "product", "variant", "finalPrice", "comparePrice", "coupon", "selectedOptions", "selectedVariants", "totalSavings", "onAddToCart", "onBuyNow", "savingDetail", "checkedBundle", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "currentJoinedRecommendBuyProducts", "setCurrentJoinedRecommendBuyProducts", "currentProductVariant", "summaryFinalPrice", "currentBundleVariant", "currentBundlePrice", "bundleVariant", "giftVariant", "exchangeVariant", "useRecommendBuyProducts", "initialRecommendBuyProducts", "setInitialRecommendBuyProducts", "comparePriceRemovedFreeGift", "ProductGiftSummary", "gift", "ProductBundleSummary", "bundle", "ProductExchangeSummary", "exchange", "freeGift", "checkedGift", "exchangePurchase", "checkedExchangePurchase", "bundleList", "giftList", "exchangeList", "availableBundleList", "v", "firstAvailableBundle", "firstAvailableGift", "firstAvailableExchange", "bundleOperation", "bundleListItem", "status", "setCheckedBundle", "bundleVariants", "giftOperation", "setCheckedGift", "freeLabel", "count", "exchangeOperation", "setCheckedExchangePurchase", "ProductSummary_default"]
+}

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

@@ -0,0 +1,2 @@
+export interface ProductSummaryProps {
+}

package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/types.js

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