@anker-in/headless-ui 1.1.9-temp.120302 → 1.1.9-tmp-01

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n    } else {\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'exchange')\n        return [...filtered, 'exchange']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"laptop:grid-cols-2 laptop-md:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn('rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold', {\n              ['border-brand']: checkedExchangePurchase?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-2 border-[#E4E5E6]', {\n                'border-brand': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 shrink-0\" />\n                <Text\n                  className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductExchangePurchase)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAoB,CAAC,EAC3DW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDf,GAAyB,KAAOe,EAAM,IACxCV,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDF,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,EAE1DC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,IAExDZ,IAA6BU,CAAK,EAClCZ,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAAS,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,UAAU,EAC7B,UAAU,CAChC,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,uFACZ,SAAAG,EAAe,IAAKM,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBlB,GAAyB,KAAOkB,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBlB,GAAyB,KAAOkB,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASlB,GAAyB,KAAOkB,EAAK,GAC9C,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,mBAAmB,KAC/D,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAnB,EACA,aAAcmB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAuB",
+  "sourcesContent": ["import { Text, Picture, Checkbox } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n    setAddOrder,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value: undefined,\n          canOperate: true,\n        },\n      })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      // \u4ECE\u6DFB\u52A0\u987A\u5E8F\u4E2D\u79FB\u9664\n      setAddOrder?.(prev => prev.filter(t => t !== 'exchange'))\n    } else {\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({\n        ...joinedRecommendBuyProducts,\n        exchange: {\n          value,\n          canOperate: false,\n        },\n      })\n      // \u6DFB\u52A0\u5230\u987A\u5E8F\u6570\u7EC4\u7684\u672B\u5C3E\n      setAddOrder?.(prev => {\n        // \u5982\u679C\u5DF2\u7ECF\u5B58\u5728\uFF0C\u5148\u79FB\u9664\u518D\u6DFB\u52A0\u5230\u672B\u5C3E\n        const filtered = prev.filter(t => t !== 'exchange')\n        return [...filtered, 'exchange']\n      })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-exchange-purchase\">\n      <Text size={3} className=\"font-bold leading-[1.2]\" html={title} />\n      <div className=\"laptop:grid-cols-2 desktop:grid-cols-1 lg-desktop:mt-4 mt-3 grid grid-cols-1 gap-3\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn('rounded-box flex items-center gap-2 border-2 border-[#E4E5E6] px-4 text-left font-bold', {\n              ['border-brand']: checkedExchangePurchase?.id === gift.id,\n            })}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className={cn('rounded-full border-2 border-[#E4E5E6]', {\n                'border-brand': checkedExchangePurchase?.id === gift.id,\n              })}\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex w-full cursor-pointer items-center justify-between gap-4 py-6\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 shrink-0\" />\n                <Text\n                  className=\"laptop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-sm font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"tablet:flex-row flex shrink-0 flex-col items-center gap-1\">\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"laptop:text-[20px] lg-desktop:text-2xl text-base font-bold text-[#6D6D6F] line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(ProductExchangePurchase)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4DM,IAAAI,EAAA,6BA5DNC,EAAwC,iDACxCC,EAAmB,8CACnBC,EAAwB,iBACxBC,EAAqC,6CACrCC,EAA4B,sCAC5BC,EAA+B,gDAE/BC,EAA2B,8CAE3B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EACnC,CACJ,wBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,EACA,YAAAC,CACF,KAAI,wBAAqB,EACnB,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAoB,CAAC,EAC3DW,KAAiB,WAAQ,IAAMF,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDf,GAAyB,KAAOe,EAAM,IACxCV,IAA6B,MAAS,EACtCF,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EACDF,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,EAE1DC,IAAcQ,GAAQA,EAAK,OAAOC,GAAKA,IAAM,UAAU,CAAC,IAExDZ,IAA6BU,CAAK,EAClCZ,IAAgC,CAC9B,GAAGG,EACH,SAAU,CACR,MAAAS,EACA,WAAY,EACd,CACF,CAAC,EAEDP,IAAcQ,GAGL,CAAC,GADSA,EAAK,OAAOC,GAAKA,IAAM,UAAU,EAC7B,UAAU,CAChC,EAEL,EAEA,OAAKL,GAAgB,UAGnB,QAAC,OAAI,UAAU,uCACb,oBAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMH,EAAO,KAChE,OAAC,OAAI,UAAU,qFACZ,SAAAG,EAAe,IAAKM,MACnB,QAAC,OAEC,aAAW,MAAG,yFAA0F,CACrG,eAAiBlB,GAAyB,KAAOkB,EAAK,EACzD,CAAC,EAED,oBAAC,YACC,gBAAiB,IAAMJ,EAAoBI,CAAI,EAC/C,KAAK,KACL,aAAW,MAAG,yCAA0C,CACtD,eAAgBlB,GAAyB,KAAOkB,EAAK,EACvD,CAAC,EACD,GAAIA,EAAK,GACT,QAASlB,GAAyB,KAAOkB,EAAK,GAC9C,MAAOA,EAAK,GACb,KACD,QAAC,SAAM,QAASA,EAAK,GAAI,UAAU,qEACjC,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,OAAQA,EAAK,OAAO,IAAK,UAAU,mBAAmB,KAC/D,OAAC,QACC,UAAU,2EACV,KAAMA,EAAK,QAAQ,MACrB,GACF,KACA,QAAC,OAAI,UAAU,4DACb,oBAAC,QACC,UAAU,6DACV,QAAM,eAAY,CAChB,OAAQA,GAAM,YAAY,QAAU,EACpC,OAAAnB,EACA,aAAcmB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,KACA,OAAC,QACC,UAAU,yFACV,QAAM,eAAY,CAChB,OAAQA,EAAK,MAAM,OACnB,OAAAnB,EACA,aAAcmB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAzCKA,EAAK,EA0CZ,CACD,EACH,GACF,EArDkC,IAuDtC,EAEA,IAAO9B,KAAQ,cAAWU,CAAuB",
   "names": ["ProductExchangePurchase_exports", "__export", "ProductExchangePurchase_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_utils", "import_AiuiProvider", "import_Styles", "ProductExchangePurchase", "locale", "checkedExchangePurchase", "exchangePurchase", "setCheckedBundle", "setJoinedRecommendBuyProducts", "setSavingDetail", "setCheckedExchangePurchase", "joinedRecommendBuyProducts", "savingDetail", "setAddOrder", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "prev", "t", "gift"]
 }

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const _default: import("react").ForwardRefExoticComponent<Omit<object, keyof import("../../../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../../../shared/Styles.js").StylesProps & import("../../../../../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

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

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

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

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const _default: import("react").ForwardRefExoticComponent<Omit<object, keyof import("../../../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../../../shared/Styles.js").StylesProps & import("../../../../../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,6 +1,6 @@
-"use strict";var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(a,o)=>{for(var c in o)f(a,c,{get:o[c],enumerable:!0})},D=(a,o,c,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of N(o))!C.call(a,l)&&l!==c&&f(a,l,{get:()=>o[l],enumerable:!(p=y(o,l))||p.enumerable});return a};var E=a=>D(f({},"__esModule",{value:!0}),a);var _={};T(_,{default:()=>P});module.exports=E(_);var t=require("react/jsx-runtime"),n=require("../../../../../../components/index.js"),r=require("@radix-ui/react-tabs"),s=require("react"),x=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),b=require("../../../../../../shared/Styles.js"),k=require("../../../../../../shared/track.js");const A=()=>{const{product:a,variant:o}=(0,h.useBizProductContext)(),[c,p]=(0,s.useState)(!1),l=(0,s.useMemo)(()=>a?.payload?.components?.find(i=>i.componentKey==="ProductHighlight")?.data||{},[a?.payload]),[g,d]=(0,s.useState)(l?.ksp?.[0]),e=(0,s.useCallback)(i=>{(0,k.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${o.sku}`,position:l?.title||"",button_name:i||l?.view||""}})},[l?.title,l?.view,o.sku]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[l?.title&&(0,t.jsx)(n.Text,{size:3,className:"font-bold leading-[1.2]",html:l?.title}),(0,t.jsxs)(n.Dialog,{open:c,onOpenChange:p,children:[(0,t.jsx)(n.DialogTrigger,{asChild:!0,children:(0,t.jsx)(n.Button,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>e(),children:l?.view})}),(0,t.jsx)(L,{ksp:l?.ksp||[],activeKspItem:g,setActiveKspItem:d,gaTrackEvent:e})]})]}),(0,t.jsx)("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:l?.ksp?.map(i=>(0,t.jsx)("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:(0,t.jsx)(n.Text,{size:3,onClick:()=>{d(i),p(!0),e(i?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:i?.title})},i?.title))})]})},L=({ksp:a,activeKspItem:o,setActiveKspItem:c,gaTrackEvent:p})=>{const l=(0,s.useRef)([]),g=(0,s.useRef)(null),d=(0,s.useCallback)(e=>{const i=a.findIndex(m=>m.title===e?.title),u=l.current[i];if(u&&g.current){const m=g.current,v=u,w=v.offsetLeft-m.offsetWidth/2+v.offsetWidth/2;m.scrollTo({left:w,behavior:"smooth"})}},[a]);return(0,s.useEffect)(()=>{o&&setTimeout(()=>{d(o)},100)},[d,o]),(0,t.jsxs)(n.DialogContent,{className:"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4",children:[(0,t.jsx)("style",{children:`
+"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(i,o)=>{for(var c in o)m(i,c,{get:o[c],enumerable:!0})},D=(i,o,c,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of N(o))!C.call(i,l)&&l!==c&&m(i,l,{get:()=>o[l],enumerable:!(d=y(o,l))||d.enumerable});return i};var E=i=>D(m({},"__esModule",{value:!0}),i);var _={};T(_,{default:()=>P});module.exports=E(_);var t=require("react/jsx-runtime"),n=require("../../../../../../components/index.js"),r=require("@radix-ui/react-tabs"),s=require("react"),x=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),k=require("../../../../../../shared/Styles.js"),b=require("../../../../../../shared/track.js");const A=()=>{const{product:i,variant:o}=(0,h.useBizProductContext)(),[c,d]=(0,s.useState)(!1),l=(0,s.useMemo)(()=>i?.payload?.components?.find(a=>a.componentKey==="ProductHighlight")?.data||{},[i?.payload]),[g,p]=(0,s.useState)(l?.ksp?.[0]),e=(0,s.useCallback)(a=>{(0,b.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${o.sku}`,position:l?.title||"",button_name:a||l?.view||""}})},[l?.title,l?.view,o.sku]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[l?.title&&(0,t.jsx)(n.Text,{size:3,className:"font-bold leading-[1.2]",html:l?.title}),(0,t.jsxs)(n.Dialog,{open:c,onOpenChange:d,children:[(0,t.jsx)(n.DialogTrigger,{asChild:!0,children:(0,t.jsx)(n.Button,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>e(),children:l?.view})}),(0,t.jsx)(L,{ksp:l?.ksp||[],activeKspItem:g,setActiveKspItem:p,gaTrackEvent:e})]})]}),(0,t.jsx)("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:l?.ksp?.map(a=>(0,t.jsx)("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:(0,t.jsx)(n.Text,{size:3,onClick:()=>{p(a),d(!0),e(a?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:a?.title})},a?.title))})]})},L=({ksp:i,activeKspItem:o,setActiveKspItem:c,gaTrackEvent:d})=>{const l=(0,s.useRef)([]),g=(0,s.useRef)(null),p=(0,s.useCallback)(e=>{const a=i.findIndex(f=>f.title===e?.title),u=l.current[a];if(u&&g.current){const f=g.current,v=u,w=v.offsetLeft-f.offsetWidth/2+v.offsetWidth/2;f.scrollTo({left:w,behavior:"smooth"})}},[i]);return(0,s.useEffect)(()=>{o&&setTimeout(()=>{p(o)},100)},[p,o]),(0,t.jsxs)(n.DialogContent,{className:"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none p-0 [&_.dialog-close-icon]:size-4",children:[(0,t.jsx)("style",{children:`
         .dialog-close-icon {
           color: ${o?.closeColor||"#1D1D1F"};
         }
-      `}),(0,t.jsxs)(r.Root,{value:o?.title,className:"w-full overflow-hidden",children:[a?.map(e=>(0,t.jsx)(r.Content,{value:e.title,children:(0,t.jsx)(n.Picture,{source:`${e?.img}, ${e?.mobileImg} 767`,className:"laptop-md:h-[480px] h-[304px] w-full",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.title)),(0,t.jsxs)("div",{className:"laptop-md:py-6 w-full overflow-visible bg-white py-4",children:[(0,t.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"laptop-md:px-6 overflow-x-auto px-4",children:(0,t.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,t.jsx)(r.List,{className:"flex w-max p-1",children:a?.map((e,i)=>(0,t.jsx)(r.Trigger,{ref:u=>{u&&(l.current[i]=u)},className:(0,x.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",e.title===o?.title&&"bg-white"),onClick:()=>{d(e),c(e),p(e?.title)},value:e.title,children:(0,t.jsx)(n.Text,{html:e.title,className:"text-[14px] font-bold leading-[1.2]"})},i+e.title))})})}),(0,t.jsx)("div",{className:"laptop-md:px-6 mt-4 px-4",children:a?.map((e,i)=>(0,t.jsx)(r.Content,{value:e.title,className:"laptop-md:text-[18px] text-[14px] font-bold",children:e.description},i+e.title))})]})]})]})};var P=(0,b.withLayout)(A);
+      `}),(0,t.jsxs)(r.Root,{value:o?.title,className:"w-full overflow-hidden",children:[i?.map(e=>(0,t.jsx)(r.Content,{value:e.title,children:(0,t.jsx)(n.Picture,{source:`${e?.img}, ${e?.mobileImg} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.title)),(0,t.jsxs)("div",{className:"desktop:py-6 w-full overflow-visible py-4",children:[(0,t.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:(0,t.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,t.jsx)(r.List,{className:"flex w-max p-1",children:i?.map((e,a)=>(0,t.jsx)(r.Trigger,{ref:u=>{u&&(l.current[a]=u)},className:(0,x.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",e.title===o?.title&&"bg-white"),onClick:()=>{p(e),c(e),d(e?.title)},value:e.title,children:(0,t.jsx)(n.Text,{html:e.title,className:"text-[14px] font-bold leading-[1.2]"})},a+e.title))})})}),(0,t.jsx)("div",{className:"desktop:px-6 mt-4 px-4",children:i?.map((e,a)=>(0,t.jsx)(r.Content,{value:e.title,className:"desktop:text-[18px] text-[14px] font-bold",children:e.description},a+e.title))})]})]})]})};var P=(0,k.withLayout)(A);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
-  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (activeKspItem: any) => void\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none bg-transparent p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"laptop-md:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"laptop-md:py-6 w-full overflow-visible bg-white py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"laptop-md:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"laptop-md:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"laptop-md:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n  const { product, variant } = useBizProductContext()\n  const [open, setOpen] = useState(false)\n\n  const productHighlightData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n  }, [product?.payload])\n\n  const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n  const gaTrackEvent = useCallback(\n    (buttonName?: string) => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'lp_button',\n        event_parameters: {\n          page_group: `Product Detail Page${variant.sku}`,\n          position: productHighlightData?.title || '',\n          button_name: buttonName || productHighlightData?.view || '',\n        },\n      })\n    },\n    [productHighlightData?.title, productHighlightData?.view, variant.sku]\n  )\n\n  return (\n    <div className=\"ipc-product-detail-highlight\">\n      <div className=\"flex items-center justify-between\">\n        {productHighlightData?.title && (\n          <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n        )}\n        <Dialog open={open} onOpenChange={setOpen}>\n          <DialogTrigger asChild>\n            <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n              {productHighlightData?.view}\n            </Button>\n          </DialogTrigger>\n          <ProductHighlightModal\n            ksp={productHighlightData?.ksp || []}\n            activeKspItem={activeKspItem}\n            setActiveKspItem={setActiveKspItem}\n            gaTrackEvent={gaTrackEvent}\n          />\n        </Dialog>\n      </div>\n      <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n        {productHighlightData?.ksp?.map((item: any) => (\n          <div\n            key={item?.title}\n            className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n          >\n            <Text\n              size={3}\n              onClick={() => {\n                setActiveKspItem(item)\n                setOpen(true)\n                gaTrackEvent(item?.title)\n              }}\n              className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n              html={item?.title}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst ProductHighlightModal = ({\n  ksp,\n  activeKspItem,\n  setActiveKspItem,\n  gaTrackEvent,\n}: {\n  ksp: any[]\n  activeKspItem: any\n  setActiveKspItem: (activeKspItem: any) => void\n  gaTrackEvent: (buttonName: string) => void\n}) => {\n  const highlightRef = useRef<HTMLButtonElement[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  const autoScrollToActiveItem = useCallback(\n    (activeKspItem: any) => {\n      const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n      const curRef = highlightRef.current[curIndex]\n\n      if (curRef && scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    },\n    [ksp]\n  )\n\n  useEffect(() => {\n    if (!activeKspItem) return\n    // setActiveKspItem(clickActiveKspItem)\n\n    // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n    setTimeout(() => {\n      autoScrollToActiveItem(activeKspItem)\n    }, 100)\n  }, [autoScrollToActiveItem, activeKspItem])\n\n  return (\n    <DialogContent className=\"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none p-0 [&_.dialog-close-icon]:size-4\">\n      <style>{`\n        .dialog-close-icon {\n          color: ${activeKspItem?.closeColor || '#1D1D1F'};\n        }\n      `}</style>\n      <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n        {ksp?.map(item => (\n          <Content value={item.title} key={item.title}>\n            <Picture\n              source={`${item?.img}, ${item?.mobileImg} 767`}\n              className=\"desktop:h-[480px] h-[304px] w-full\"\n              alt={item.img.alt}\n              imgClassName=\"object-cover h-full\"\n            />\n          </Content>\n        ))}\n        <div className=\"desktop:py-6 w-full overflow-visible py-4\">\n          <div\n            ref={scrollContainerRef}\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n            className=\"desktop:px-6 overflow-x-auto px-4\"\n          >\n            <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n              <List className=\"flex w-max p-1\">\n                {ksp?.map((item, index) => (\n                  <Trigger\n                    ref={el => {\n                      if (el) {\n                        highlightRef.current[index] = el\n                      }\n                    }}\n                    className={cn(\n                      'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n                      item.title === activeKspItem?.title && 'bg-white'\n                    )}\n                    onClick={() => {\n                      autoScrollToActiveItem(item)\n                      setActiveKspItem(item)\n                      gaTrackEvent(item?.title)\n                    }}\n                    key={index + item.title}\n                    value={item.title}\n                  >\n                    <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n                  </Trigger>\n                ))}\n              </List>\n            </div>\n          </div>\n          <div className=\"desktop:px-6 mt-4 px-4\">\n            {ksp?.map((item, index) => (\n              <Content\n                value={item.title}\n                key={index + item.title}\n                className=\"desktop:text-[18px] text-[14px] font-bold\"\n              >\n                {item.description}\n              </Content>\n            ))}\n          </div>\n        </div>\n      </Root>\n    </DialogContent>\n  )\n}\n\nexport default withLayout(ProductHighlight)\n"],
+  "mappings": "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",
   "names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "import_track", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
 }

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const _default: import("react").ForwardRefExoticComponent<Omit<object, keyof import("../../../../../../shared/Styles.js").StylesProps> & Partial<import("../../../../../../shared/Styles.js").StylesProps & import("../../../../../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
-  "sourcesContent": ["import { Text, Picture } from '../../../../../../components/index.js'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const productOptionsData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n  }, [product?.payload])\n\n  if (!product.options.length) return null\n\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\n                as=\"p\"\n                size={3}\n                className=\"font-bold leading-[1.2]\"\n                html={productOptionsData?.selectColor + selectedOptions[option.name]}\n              />\n              <div className=\"lg-desktop:mt-5 ml-1 mt-4 flex items-center gap-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=\"ipc-product-detail-options-value relative\">\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          const capitalizedName = option.name.charAt(0).toUpperCase() + option.name.slice(1)\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={capitalizedName} />\n              <div className=\"mt-4 flex items-center gap-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                    }}\n                    className={cn('rounded-box w-1/2 border-2 border-[#E4E5E6] px-4 py-6 text-left font-bold', {\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 withLayout(ProductOptions)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2Bc,IAAAI,EAAA,6BA3BdC,EAA8B,iDAC9BC,EAAmB,8CACnBC,EAAkC,iBAClCC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAAI,wBAAqB,EACvG,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EAE7CC,KAAqB,WAAQ,IAC1BP,GAAS,SAAS,YAAY,KAAMQ,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACR,GAAS,OAAO,CAAC,EAErB,OAAKA,EAAQ,QAAQ,UAGnB,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIS,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,GADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,EAChE,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,KAAM,EACN,UAAU,0BACV,KAAMJ,GAAoB,YAAcN,EAAgBQ,EAAO,IAAI,EACrE,KACA,OAAC,OAAI,UAAU,oDACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWV,CAAW,sBAAmB,UAAOQ,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DT,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBQ,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACP,EAAaO,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBV,EAAgBS,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IA3CQJ,EAAO,EA4CjB,EAEG,CACL,MAAMQ,EAAkBR,EAAO,KAAK,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAO,KAAK,MAAM,CAAC,EACjF,SACE,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMQ,EAAiB,KACnE,OAAC,OAAI,UAAU,+BACZ,SAAAR,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAChE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBX,EAAgBQ,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GARIA,CASP,CACD,EACH,IAhBQH,EAAO,EAiBjB,CAEJ,CACF,CAAC,EACH,EA/EkC,IAiFtC,EAEA,IAAOpB,KAAQ,cAAWU,CAAc",
-  "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "item", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "capitalizedName"]
+  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components/index.js'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState, useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const productOptionsData = useMemo(() => {\n    return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductOptions')?.data || {}\n  }, [product?.payload])\n\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\n                as=\"p\"\n                size={3}\n                className=\"font-bold leading-[1.2]\"\n                html={productOptionsData?.selectColor + selectedOptions[option.name]}\n              />\n              <div className=\"lg-desktop:mt-5 ml-1 mt-4 flex items-center gap-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=\"ipc-product-detail-options-value relative\">\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=\"mt-4 flex items-center gap-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('rounded-box w-1/2 border-2 border-[#E4E5E6] px-4 py-6 text-left font-bold', {\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 withLayout(ProductOptions)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4Bc,IAAAI,EAAA,6BA5BdC,EAAsC,iDAEtCC,EAAmB,8CACnBC,EAAkC,iBAClCC,EAAqC,6CACrCC,EAA+B,gDAC/BC,EAAuB,uCACvBC,EAA2B,8CAE3B,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,KAAI,wBAAqB,EACvG,CAAE,YAAAC,CAAY,KAAI,kBAAe,EACjC,CAACC,EAAcC,CAAe,KAAI,YAAS,CAAC,CAAC,EACnD,GAAI,CAACN,EAAQ,QAAQ,OAAQ,OAAO,KAGpC,MAAMO,KAAqB,WAAQ,IAC1BP,GAAS,SAAS,YAAY,KAAMQ,GAAcA,EAAK,eAAiB,gBAAgB,GAAG,MAAQ,CAAC,EAC1G,CAACR,GAAS,OAAO,CAAC,EAErB,SACE,OAAC,OAAI,UAAU,uBACZ,SAAAA,EAAQ,QAAQ,IAAIS,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,KAE9D,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QACC,GAAG,IACH,KAAM,EACN,UAAU,0BACV,KAAMJ,GAAoB,YAAcN,EAAgBQ,EAAO,IAAI,EACrE,KACA,OAAC,OAAI,UAAU,oDACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWV,CAAW,sBAAmB,UAAOQ,CAAK,CAAC,OACxE,SACE,QAAC,OAAwB,UAAU,4CACjC,oBAAC,UACC,aAAY,aAAaA,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DT,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,aAAW,MACT,oIACA,CACE,gBAAiBF,EAAgBQ,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACP,EAAaO,CAAkC,MAC/C,mBACE,mBAAC,WACC,UAAU,SACV,OAAQE,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBV,EAAgBS,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,KACA,OAAC,OAAI,UAAU,6HAA6H,IA5BpIA,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IA3CQJ,EAAO,EA4CjB,KAIA,QAAC,OAAoB,UAAU,6BAC7B,oBAAC,QAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMA,EAAO,KAAM,KAC/D,OAAC,OAAI,UAAU,+BACZ,SAAAA,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,OAC1B,OAAC,UAEC,QAAS,IAAM,CACbV,EAAmBa,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,aAAW,MAAG,4EAA6E,CACzF,eAAgBX,EAAgBQ,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,CAEJ,EAEA,IAAOpB,KAAQ,cAAWU,CAAc",
+  "names": ["ProductOptions_exports", "__export", "ProductOptions_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_helpers", "import_react", "import_BizProductProvider", "import_AiuiProvider", "import_helper", "import_Styles", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "productOptionsData", "item", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget"]
 }

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n  Button,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:p-0 laptop:w-[896px] z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">\n            {copyWriting?.compare}\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 h-[calc(80vh-64px)] overflow-y-auto px-4\">\n          <Grid className=\"laptop:py-3 grid-cols-3 items-center gap-[40px] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#595959]\">{copyWriting?.product || 'Product'}</div>\n            </GridItem>\n            <GridItem span={1}>\n              <Text\n                as=\"div\"\n                className=\"rounded-btn flex h-[48px] w-full items-center border border-[#E8E8E8] px-4 text-[16px] font-bold\"\n                html={compareData.currentProductCompareData?.shortName || product.title}\n              ></Text>\n            </GridItem>\n            {selectedProductHandle && (\n              <GridItem span={1}>\n                <Select\n                  className=\"rounded-btn h-[48px] px-4\"\n                  value={selectedProductHandle}\n                  onChange={value => {\n                    setSelectedProductHandle(value)\n                  }}\n                  list={compareData.options!}\n                />\n              </GridItem>\n            )}\n          </Grid>\n          <Grid className=\"laptop:gap-8 laptop:py-3 grid-cols-3 py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              return (\n                <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                  <img src={product.images[0].url} alt={product.title} className=\"size-[100px]\" role=\"presentation\" />\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1} />\n            {products.map((product, productIndex) => {\n              const variant = product.variants[0]\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {/* Price with original price */}\n                  <div className=\"flex flex-col gap-[8px]\">\n                    {variant.price.amount < 9999999 && (\n                      <div className=\"flex items-center gap-[8px]\">\n                        {/* <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div> */}\n                        <div className=\"flex items-center gap-[6px]\">\n                          <span className=\"text-[18px] font-bold\">\n                            {formatPrice({\n                              locale,\n                              amount: variant?.coupons?.[0]?.variant_price4wscode || variant.price.amount,\n                              currencyCode: variant.price.currencyCode,\n                            })}\n                          </span>\n                          {Number(variant?.coupons?.[0]?.variant_price4wscode) > 0 && (\n                            <span className=\"text-[18px] font-bold text-[#6D6D6F] line-through\">\n                              {formatPrice({\n                                locale,\n                                amount: variant.price.amount,\n                                currencyCode: variant.price.currencyCode,\n                              })}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                    )}\n                    {/* <Button variant=\"primary\" size=\"lg\">\n                    {copyWriting?.shopNow || 'Shop Now'}\n                  </Button> */}\n                  </div>\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:py-6 grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\">\n            <GridItem span={1}>\n              <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{copyWriting?.color || 'Color'}</div>\n            </GridItem>\n            {products.map((product, productIndex) => {\n              const colors = product.options\n                ?.find(option =>\n                  ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n                )\n                ?.values.map(value => value.label)\n              return (\n                <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-4\">\n                      {colors.map(label => (\n                        <ShopifyColorOption key={label} label={label} className=\"size-6\" />\n                      ))}\n                    </div>\n                  )}\n                </GridItem>\n              )\n            })}\n          </Grid>\n          <Grid className=\"laptop:gap-0 grid-cols-12 items-center gap-0 border-b border-[#E8E8E8]\">\n            {compareData.specificationKeys?.map((key: string) => {\n              return (\n                <GridItem\n                  span={12}\n                  className=\"laptop:py-6 laptop:gap-4 grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-4\"\n                  key={key}\n                >\n                  {/* Detail value */}\n                  <div className=\"text-[16px] font-bold text-[#6D6D6F]\">{key}</div>\n                  {/* Product Values */}\n                  {products.map((product, productIndex) => {\n                    const value =\n                      product.metafields?.global?.specifications?.find(\n                        (specification: { key: string }) => specification?.key === key\n                      )?.value || ''\n                    let text = value\n                    switch (text.trim().toLowerCase()) {\n                      case 'true':\n                        text = '\u2714\uFE0F'\n                        break\n                      case 'false':\n                        text = '\u274C'\n                        break\n                      default:\n                        break\n                    }\n                    return (\n                      <div key={productIndex} className=\"flex items-center\">\n                        {/* Other details */}\n                        <div className=\"text-[16px] font-bold text-[#1D1D1F]\">{text}</div>\n                      </div>\n                    )\n                  })}\n                </GridItem>\n              )\n            })}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
-  "mappings": "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",
-  "names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "Select", "value", "productIndex", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
+  "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/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils/index.js'\nimport { ShopifyColorOption } from './ShopifyColorOption.js'\n\nconst CompareModal = () => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.compare}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">{copyWriting?.compare}</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 grid-cols-3 py-6\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img src={product.images[0].url} alt={product.title} className=\"size-[200px]\" role=\"presentation\" />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"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=\"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=\"size-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
+  "names": ["CompareModal_exports", "__export", "CompareModal_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_BizProductProvider", "import_Select", "import_AiuiProvider", "import_utils", "import_ShopifyColorOption", "CompareModal", "locale", "copyWriting", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "Select", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var d=(a,t)=>{for(var l in t)s(a,l,{get:t[l],enumerable:!0})},m=(a,t,l,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of x(t))!n.call(a,i)&&i!==l&&s(a,i,{get:()=>t[i],enumerable:!(p=g(t,i))||p.enumerable});return a};var f=a=>m(s({},"__esModule",{value:!0}),a);var b={};d(b,{SpecsModal:()=>D});module.exports=f(b);var e=require("react/jsx-runtime"),r=require("../../../../../AiuiProvider/index.js"),o=require("../../../../../../components/index.js"),c=require("../../../../BizProductProvider.js");const D=()=>{const{product:a}=(0,c.useBizProductContext)(),{copyWriting:t}=(0,r.useAiuiContext)();return(0,e.jsxs)(o.Dialog,{children:[(0,e.jsx)(o.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:t?.specs}),(0,e.jsxs)(o.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:p-0 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,e.jsx)(o.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4",children:(0,e.jsx)(o.DialogTitle,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:t?.specs})}),(0,e.jsx)("div",{className:"laptop:px-8 overflow-y-auto px-4",children:(0,e.jsx)(o.Grid,{className:"laptop:gap-8 laptop:py-8 py-6",children:a.metafields?.global?.specifications?.map(({key:l,value:p})=>(0,e.jsxs)(o.GridItem,{span:6,className:"flex flex-col gap-1",children:[(0,e.jsx)(o.Text,{className:"text-[18px] font-bold text-[#1D1D1F]",children:l}),(0,e.jsx)(o.Text,{className:"text-[18px] font-bold text-[#86868C]",html:p?.trim().toLowerCase()==="true"?"\u2714\uFE0F":p?.trim().toLowerCase()==="false"?"\u274C":p})]},l))})})]})]})};
+"use strict";var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(a,e)=>{for(var l in e)p(a,l,{get:e[l],enumerable:!0})},x=(a,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of n(e))!d.call(a,s)&&s!==l&&p(a,s,{get:()=>e[s],enumerable:!(i=g(e,s))||i.enumerable});return a};var f=a=>x(p({},"__esModule",{value:!0}),a);var b={};m(b,{SpecsModal:()=>D});module.exports=f(b);var t=require("react/jsx-runtime"),r=require("../../../../../AiuiProvider/index.js"),o=require("../../../../../../components/index.js"),c=require("../../../../BizProductProvider.js");const D=()=>{const{product:a}=(0,c.useBizProductContext)(),{copyWriting:e}=(0,r.useAiuiContext)();return(0,t.jsxs)(o.Dialog,{children:[(0,t.jsx)(o.DialogTrigger,{className:"text-base font-bold leading-[1.4]",children:e?.specs}),(0,t.jsxs)(o.DialogContent,{overlayClassName:"z-[100]",className:"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[(0,t.jsx)(o.DialogHeader,{className:"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4",children:(0,t.jsx)(o.DialogTitle,{className:"text-sm text-[#6D6D6F]",children:e?.specs})}),(0,t.jsx)(o.Grid,{className:"laptop:gap-8 laptop:py-8 py-6",children:a.metafields?.global?.specifications?.map(({key:l,value:i})=>(0,t.jsxs)(o.GridItem,{span:6,className:"flex flex-col gap-1",children:[(0,t.jsx)(o.Text,{className:"text-[16px] font-bold",children:l}),(0,t.jsx)(o.Text,{className:"text-[16px] font-bold text-[#86868C]",html:i?.trim().toLowerCase()==="true"?"\u2714\uFE0F":i?.trim().toLowerCase()==="false"?"\u274C":i})]},l))})]})]})};
 //# sourceMappingURL=SpecsModal.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n  const { copyWriting } = useAiuiContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:p-0 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 laptop:px-8 px-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{copyWriting?.specs}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:px-8 overflow-y-auto px-4\">\n          <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n            {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n              <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n                <Text className=\"text-[18px] font-bold text-[#1D1D1F]\">{key}</Text>\n                <Text\n                  className=\"text-[18px] font-bold text-[#86868C]\"\n                  html={\n                    value?.trim().toLowerCase() === 'true'\n                      ? '\u2714\uFE0F'\n                      : value?.trim().toLowerCase() === 'false'\n                        ? '\u274C'\n                        : value\n                  }\n                />\n              </GridItem>\n            ))}\n          </Grid>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAnBNC,EAA+B,gDAC/BC,EASO,iDACPC,EAAqC,6CAE9B,MAAML,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAM,CAAQ,KAAI,wBAAqB,EACnC,CAAE,YAAAC,CAAY,KAAI,kBAAe,EAEvC,SACE,QAAC,UACC,oBAAC,iBAAc,UAAU,oCAAqC,SAAAA,GAAa,MAAM,KACjF,QAAC,iBACC,iBAAiB,UACjB,UAAU,wQAEV,oBAAC,gBAAa,UAAU,qDACtB,mBAAC,eAAY,UAAU,qDAAsD,SAAAA,GAAa,MAAM,EAClG,KACA,OAAC,OAAI,UAAU,mCACb,mBAAC,QAAK,UAAU,gCACb,SAAAD,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,OAC7D,QAAC,YAAS,KAAM,EAAa,UAAU,sBACrC,oBAAC,QAAK,UAAU,uCAAwC,SAAAD,EAAI,KAC5D,OAAC,QACC,UAAU,uCACV,KACEC,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,IAXsBD,CAYxB,CACD,EACH,EACF,GACF,GACF,CAEJ",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n  const { copyWriting } = useAiuiContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger className=\"text-base font-bold leading-[1.4]\">{copyWriting?.specs}</DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"rounded-box [&_.dialog-close-icon]:laptop:size-6 laptop:w-[896px] laptop:px-8 z-[110] max-h-[80vh] max-w-[90vw] gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:size-4 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 laptop:pb-3 border-b border-[#E8E8E8] pb-2 pt-4\">\n          <DialogTitle className=\"text-sm text-[#6D6D6F]\">{copyWriting?.specs}</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"laptop:gap-8 laptop:py-8 py-6\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={6} key={key} className=\"flex flex-col gap-1\">\n              <Text className=\"text-[16px] font-bold\">{key}</Text>\n              <Text\n                className=\"text-[16px] font-bold text-[#86868C]\"\n                html={\n                  value?.trim().toLowerCase() === 'true' ? '\u2714\uFE0F' : value?.trim().toLowerCase() === 'false' ? '\u274C' : value\n                }\n              />\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAmBM,IAAAI,EAAA,6BAnBNC,EAA+B,gDAC/BC,EASO,iDACPC,EAAqC,6CAE9B,MAAML,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAM,CAAQ,KAAI,wBAAqB,EACnC,CAAE,YAAAC,CAAY,KAAI,kBAAe,EAEvC,SACE,QAAC,UACC,oBAAC,iBAAc,UAAU,oCAAqC,SAAAA,GAAa,MAAM,KACjF,QAAC,iBACC,iBAAiB,UACjB,UAAU,8QAEV,oBAAC,gBAAa,UAAU,8DACtB,mBAAC,eAAY,UAAU,yBAA0B,SAAAA,GAAa,MAAM,EACtE,KACA,OAAC,QAAK,UAAU,gCACb,SAAAD,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAE,EAAK,MAAAC,CAAM,OAC7D,QAAC,YAAS,KAAM,EAAa,UAAU,sBACrC,oBAAC,QAAK,UAAU,wBAAyB,SAAAD,EAAI,KAC7C,OAAC,QACC,UAAU,uCACV,KACEC,GAAO,KAAK,EAAE,YAAY,IAAM,OAAS,eAAOA,GAAO,KAAK,EAAE,YAAY,IAAM,QAAU,SAAMA,EAEpG,IAPsBD,CAQxB,CACD,EACH,GACF,GACF,CAEJ",
   "names": ["SpecsModal_exports", "__export", "SpecsModal", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_components", "import_BizProductProvider", "product", "copyWriting", "key", "value"]
 }

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

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