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

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

@@ -0,0 +1,30 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+interface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+}
+declare const ProductBenefitsTabs: {
+    ({ defaultValue, value, onValueChange, children, className, ...props }: BenefitsTabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    List: import("react").ForwardRefExoticComponent<BenefitsTabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Badge: ({ children, className, ...props }: BenefitsTabsBadgeProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ value, children, className, ...props }: BenefitsTabsContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+interface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    value: string;
+    children: ReactNode;
+}
+interface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+interface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: ReactNode;
+}
+export default ProductBenefitsTabs;

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

@@ -0,0 +1,2 @@
+import{jsx as i,jsxs as y}from"react/jsx-runtime";import{Text as u}from"../../../../../../components/index.js";import{createContext as g,useContext as B,useState as m,forwardRef as v}from"react";import{cn as a}from"../../../../../../helpers/index.js";import{Content as x,List as L,Root as C,Trigger as P}from"@radix-ui/react-tabs";const T=g(void 0),h=()=>{const e=B(T);if(!e)throw new Error("ProductBenefitsTabs components must be used within ProductBenefitsTabs");return e},r=({defaultValue:e,value:t,onValueChange:s,children:n,className:o,...l})=>{const[b,p]=m(e),d=t??b,f=c=>{t===void 0&&p(c),s?.(c)};return i(T.Provider,{value:{activeValue:d,setActiveValue:f},children:i("div",{id:"ipc-product-detail-benefits-tabs",className:a("bg-[#EAEAEC] rounded-xl py-[10px] lg-desktop:py-4",o),...l,children:i(C,{value:d,onValueChange:f,children:n})})})},N=v(({children:e,className:t,...s},n)=>i(L,{className:a("flex space-x-6 overflow-x-auto px-4 relative",t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},ref:n,...s,children:e})),w=({value:e,children:t,className:s,...n})=>{const{activeValue:o}=h(),l=o===e;return y(P,{value:e,className:a("text-sm lg-desktop:text-base whitespace-nowrap relative leading-[1.4] font-bold pb-4 text-[#6D6D6F]",s),...n,children:[i(u,{className:a("absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300",l&&"w-full")}),t]})},H=({children:e,className:t,...s})=>i(u,{size:1,className:a("font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand",t),...s,children:e}),M=({value:e,children:t,className:s,...n})=>i(x,{value:e,className:a(s),...n,children:t});r.displayName="ProductBenefitsTabs",r.List=N,r.Trigger=w,r.Badge=H,r.Content=M;var k=r;export{k as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.tsx"],
+  "sourcesContent": ["import { Text } from '../../../../../../components/index.js'\nimport {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n  forwardRef,\n} from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\n// Context for sharing state between components\ninterface BenefitsTabsContextType {\n  activeValue: string | undefined\n  setActiveValue: (value: string) => void\n}\n\nconst BenefitsTabsContext = createContext<BenefitsTabsContextType | undefined>(undefined)\n\nconst useBenefitsTabsContext = () => {\n  const context = useContext(BenefitsTabsContext)\n  if (!context) {\n    throw new Error('ProductBenefitsTabs components must be used within ProductBenefitsTabs')\n  }\n  return context\n}\n\n// Main container component\ninterface BenefitsTabsProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string\n  value?: string\n  onValueChange?: (value: string) => void\n  children: ReactNode\n}\n\nconst ProductBenefitsTabs = ({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  className,\n  ...props\n}: BenefitsTabsProps) => {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n\n  const activeValue = value ?? internalValue\n  const setActiveValue = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <BenefitsTabsContext.Provider value={{ activeValue, setActiveValue }}>\n      <div\n        id=\"ipc-product-detail-benefits-tabs\"\n        className={cn('bg-[#EAEAEC] rounded-xl py-[10px] lg-desktop:py-4', className)}\n        {...props}\n      >\n        <Root value={activeValue} onValueChange={setActiveValue}>\n          {children}\n        </Root>\n      </div>\n    </BenefitsTabsContext.Provider>\n  )\n}\n\n// List component for triggers\ninterface BenefitsTabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsList = forwardRef<HTMLDivElement, BenefitsTabsListProps>(({ children, className, ...props }, ref) => {\n  return (\n    <List\n      className={cn('flex space-x-6 overflow-x-auto px-4 relative', className)}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </List>\n  )\n})\n\n// Trigger component\ninterface BenefitsTabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsTrigger = ({ value, children, className, ...props }: BenefitsTabsTriggerProps) => {\n  const { activeValue } = useBenefitsTabsContext()\n  const isActive = activeValue === value\n\n  return (\n    <Trigger\n      value={value}\n      className={cn(\n        'text-sm lg-desktop:text-base whitespace-nowrap relative leading-[1.4] font-bold pb-4 text-[#6D6D6F]',\n        className\n      )}\n      {...props}\n    >\n      <Text\n        className={cn(\n          'absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300',\n          isActive && 'w-full'\n        )}\n      />\n      {children}\n    </Trigger>\n  )\n}\n\n// Badge component for trigger\ninterface BenefitsTabsBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n}\n\nconst BenefitsTabsBadge = ({ children, className, ...props }: BenefitsTabsBadgeProps) => {\n  return (\n    <Text\n      size={1}\n      className={cn('font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-brand', className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  )\n}\n\n// Content component\ninterface BenefitsTabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  value: string\n  children: ReactNode\n}\n\nconst BenefitsTabsContent = ({ value, children, className, ...props }: BenefitsTabsContentProps) => {\n  return (\n    <Content value={value} className={cn(className)} {...props}>\n      {children}\n    </Content>\n  )\n}\n\nProductBenefitsTabs.displayName = 'ProductBenefitsTabs'\n\n// Attach sub-components to main component\nProductBenefitsTabs.List = BenefitsTabsList\nProductBenefitsTabs.Trigger = BenefitsTabsTrigger\nProductBenefitsTabs.Badge = BenefitsTabsBadge\nProductBenefitsTabs.Content = BenefitsTabsContent\n\nexport default ProductBenefitsTabs\n"],
+  "mappings": "AA+DQ,cAAAA,EAwCJ,QAAAC,MAxCI,oBA/DR,OAAS,QAAAC,MAAY,wCACrB,OACE,iBAAAC,EACA,cAAAC,EACA,YAAAC,EAKA,cAAAC,MACK,QACP,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAQ7C,MAAMC,EAAsBT,EAAmD,MAAS,EAElFU,EAAyB,IAAM,CACnC,MAAMC,EAAUV,EAAWQ,CAAmB,EAC9C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,wEAAwE,EAE1F,OAAOA,CACT,EAUMC,EAAsB,CAAC,CAC3B,aAAAC,EACA,MAAAC,EACA,cAAAC,EACA,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAyB,CACvB,KAAM,CAACC,EAAeC,CAAgB,EAAIlB,EAASW,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,OACE1B,EAACY,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,SAAAzB,EAAC,OACC,GAAG,mCACH,UAAWO,EAAG,oDAAqDa,CAAS,EAC3E,GAAGC,EAEJ,SAAArB,EAACU,EAAA,CAAK,MAAOc,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,EAAmBrB,EAAkD,CAAC,CAAE,SAAAa,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGO,IAE3G5B,EAACS,EAAA,CACC,UAAWF,EAAG,+CAAgDa,CAAS,EACvE,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,IAAKQ,EACJ,GAAGP,EAEH,SAAAF,EACH,CAEH,EAQKU,EAAsB,CAAC,CAAE,MAAAZ,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCiB,EAAWN,IAAgBP,EAEjC,OACEhB,EAACU,EAAA,CACC,MAAOM,EACP,UAAWV,EACT,sGACAa,CACF,EACC,GAAGC,EAEJ,UAAArB,EAACE,EAAA,CACC,UAAWK,EACT,wFACAuB,GAAY,QACd,EACF,EACCX,GACH,CAEJ,EAOMY,EAAoB,CAAC,CAAE,SAAAZ,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEvDrB,EAACE,EAAA,CACC,KAAM,EACN,UAAWK,EAAG,+EAAgFa,CAAS,EACtG,GAAGC,EAEH,SAAAF,EACH,EAUEa,EAAsB,CAAC,CAAE,MAAAf,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEhErB,EAACQ,EAAA,CAAQ,MAAOS,EAAO,UAAWV,EAAGa,CAAS,EAAI,GAAGC,EAClD,SAAAF,EACH,EAIJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUc,EAC9Bd,EAAoB,MAAQgB,EAC5BhB,EAAoB,QAAUiB,EAE9B,IAAOC,EAAQlB",
+  "names": ["jsx", "jsxs", "Text", "createContext", "useContext", "useState", "forwardRef", "cn", "Content", "List", "Root", "Trigger", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "ref", "BenefitsTabsTrigger", "isActive", "BenefitsTabsBadge", "BenefitsTabsContent", "ProductBenefitsTabs_default"]
+}

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

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

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

@@ -0,0 +1,2 @@
+import{jsx as i,jsxs as o}from"react/jsx-runtime";import{Text as s,Picture as N,Checkbox as B}from"../../../../../../components";import{cn as P}from"../../../../../../helpers/index.js";import{useAiuiContext as b}from"../../../../../AiuiProvider";import{useBizProductContext as z}from"../../../../BizProductProvider.js";import{formatPrice as m}from"../../../../utils";const L=()=>{const{locale:l="us"}=b(),{variant:p,bundle:u,checkedBundle:a,setCheckedBundle:d,setCheckedGift:f,savingDetail:v,setSavingDetail:x,setCheckedExchangePurchase:h,setJoinedRecommendBuyProducts:c,joinedRecommendBuyProducts:D}=z(),{title:g,bundleList:k,showAtListing:y}=u||{},n=k?.filter(e=>e.variants.slice(1,e.variants.length).every(r=>r.variant.availableForSale));if(!n?.length&&y)return null;const C=e=>{a?.id===e.id?(d?.(void 0),c?.({bundle:void 0})):(f?.(void 0),h?.(void 0),d?.(e),x?.({...v,exchangePurchase:0}),c?.({bundle:e}))};return o("div",{className:"ipc-product-detail-bundle",children:[i(s,{size:3,className:"font-bold",html:g}),i("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 desktop:grid-cols-1 desktop:mt-4",children:n?.map(e=>{const r=e.variants.filter(t=>t.variant.sku!==p.sku);return i("div",{children:o("div",{className:P("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2",{"border-brand outline outline-1 outline-brand":a?.id===e.id}),children:[i(B,{onCheckedChange:()=>C(e),size:"lg",className:"rounded-full",id:e.id,value:e.id,checked:a?.id===e.id}),i("label",{htmlFor:e.id,className:"size-full cursor-pointer",children:r?.map(t=>o("div",{className:"flex justify-between items-center gap-6 ",children:[o("div",{className:"flex items-center gap-2",children:[i(N,{source:t?.variant?.image?.url,className:"size-12 flex-shrink-0"}),i(s,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:t.variant.product.title})]}),o("div",{className:"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0",children:[i(s,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:m({amount:t.price,locale:l,currencyCode:t.variant.price.currencyCode})}),t.price<t.variant.price.amount&&i(s,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]",html:m({amount:t.variant.price.amount,locale:l,currencyCode:t.variant.price.currencyCode})})]})]},t.variant.id))})]})},e.id)})})]})};var R=L;export{R as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductBundle/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport type { BundleListItem } from '../../../../types/product'\n\nconst ProductBundle = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    bundle,\n    checkedBundle,\n    setCheckedBundle,\n    setCheckedGift,\n    savingDetail,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n  } = useBizProductContext()\n\n  const { title, bundleList, showAtListing } = bundle || {}\n\n  const availableBundleList = bundleList?.filter(bundle =>\n    bundle.variants.slice(1, bundle.variants.length).every(v => v.variant.availableForSale)\n  )\n\n  if (!availableBundleList?.length && showAtListing) return null\n\n  const handleSelectedChange = (bundleItem: BundleListItem) => {\n    if (checkedBundle?.id === bundleItem.id) {\n      setCheckedBundle?.(undefined)\n      setJoinedRecommendBuyProducts?.({ bundle: undefined })\n    } else {\n      setCheckedGift?.(undefined)\n      setCheckedExchangePurchase?.(undefined)\n      setCheckedBundle?.(bundleItem)\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n      setJoinedRecommendBuyProducts?.({ bundle: bundleItem })\n    }\n  }\n\n  return (\n    <div className=\"ipc-product-detail-bundle\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 mt-3 desktop:grid-cols-1 desktop:mt-4\">\n        {availableBundleList?.map(bundle => {\n          const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n          return (\n            <div key={bundle.id}>\n              <div\n                className={cn(\n                  'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2',\n                  {\n                    ['border-brand outline outline-1 outline-brand']: checkedBundle?.id === bundle.id,\n                  }\n                )}\n              >\n                <Checkbox\n                  onCheckedChange={() => handleSelectedChange(bundle)}\n                  size=\"lg\"\n                  className=\"rounded-full\"\n                  id={bundle.id}\n                  value={bundle.id}\n                  checked={checkedBundle?.id === bundle.id}\n                />\n                <label htmlFor={bundle.id} className=\"size-full cursor-pointer\">\n                  {bundleVariants?.map(bundleVariant => {\n                    return (\n                      <div className=\"flex justify-between items-center gap-6 \" key={bundleVariant.variant.id}>\n                        <div className=\"flex items-center gap-2\">\n                          <Picture source={bundleVariant?.variant?.image?.url} className=\"size-12 flex-shrink-0\" />\n                          <Text\n                            className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                            html={bundleVariant.variant.product.title}\n                          />\n                        </div>\n                        <div className=\"flex items-center justify-end gap-1 laptop:flex-row  flex-col shrink-0\">\n                          <Text\n                            className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                            html={formatPrice({\n                              amount: bundleVariant.price,\n                              locale,\n                              currencyCode: bundleVariant.variant.price.currencyCode,\n                            })}\n                          />\n                          {bundleVariant.price < bundleVariant.variant.price.amount && (\n                            <Text\n                              className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold line-through text-[#6D6D6F]\"\n                              html={formatPrice({\n                                amount: bundleVariant.variant.price.amount,\n                                locale,\n                                currencyCode: bundleVariant.variant.price.currencyCode,\n                              })}\n                            />\n                          )}\n                        </div>\n                      </div>\n                    )\n                  })}\n                </label>\n              </div>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductBundle\n"],
+  "mappings": "AA6CM,cAAAA,EA0BkB,QAAAC,MA1BlB,oBA7CN,OAAS,QAAAC,EAAM,WAAAC,EAAiB,YAAAC,MAAgB,+BAChD,OAAS,MAAAC,MAAU,qCACnB,OAAS,kBAAAC,MAAsB,8BAC/B,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,oBAG5B,MAAMC,EAAgB,IAAM,CAC1B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIJ,EAAe,EACnC,CACJ,QAAAK,EACA,OAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,EAAIb,EAAqB,EAEnB,CAAE,MAAAc,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIX,GAAU,CAAC,EAElDY,EAAsBF,GAAY,OAAOV,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMa,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDd,GAAe,KAAOc,EAAW,IACnCb,IAAmB,MAAS,EAC5BK,IAAgC,CAAE,OAAQ,MAAU,CAAC,IAErDJ,IAAiB,MAAS,EAC1BG,IAA6B,MAAS,EACtCJ,IAAmBa,CAAU,EAC7BV,IAAkB,CAAE,GAAGD,EAAc,iBAAkB,CAAE,CAAC,EAC1DG,IAAgC,CAAE,OAAQQ,CAAW,CAAC,EAE1D,EAEA,OACE1B,EAAC,OAAI,UAAU,4BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMmB,EAAO,EAClDrB,EAAC,OAAI,UAAU,kFACZ,SAAAwB,GAAqB,IAAIZ,GAAU,CAClC,MAAMgB,EAAiBhB,EAAO,SAAS,OAAOa,GAAKA,EAAE,QAAQ,MAAQd,EAAQ,GAAG,EAChF,OACEX,EAAC,OACC,SAAAC,EAAC,OACC,UAAWI,EACT,8FACA,CACG,+CAAiDQ,GAAe,KAAOD,EAAO,EACjF,CACF,EAEA,UAAAZ,EAACI,EAAA,CACC,gBAAiB,IAAMsB,EAAqBd,CAAM,EAClD,KAAK,KACL,UAAU,eACV,GAAIA,EAAO,GACX,MAAOA,EAAO,GACd,QAASC,GAAe,KAAOD,EAAO,GACxC,EACAZ,EAAC,SAAM,QAASY,EAAO,GAAI,UAAU,2BAClC,SAAAgB,GAAgB,IAAIC,GAEjB5B,EAAC,OAAI,UAAU,2CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQ0B,GAAe,SAAS,OAAO,IAAK,UAAU,wBAAwB,EACvF7B,EAACE,EAAA,CACC,UAAU,2EACV,KAAM2B,EAAc,QAAQ,QAAQ,MACtC,GACF,EACA5B,EAAC,OAAI,UAAU,yEACb,UAAAD,EAACE,EAAA,CACC,UAAU,6DACV,KAAMM,EAAY,CAChB,OAAQqB,EAAc,MACtB,OAAAnB,EACA,aAAcmB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,QACjD7B,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQqB,EAAc,QAAQ,MAAM,OACpC,OAAAnB,EACA,aAAcmB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,GAEJ,IA3B6DA,EAAc,QAAQ,EA4BrF,CAEH,EACH,GACF,GApDQjB,EAAO,EAqDjB,CAEJ,CAAC,EACH,GACF,CAEJ,EAEA,IAAOkB,EAAQrB",
+  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useAiuiContext", "useBizProductContext", "formatPrice", "ProductBundle", "locale", "variant", "bundle", "checkedBundle", "setCheckedBundle", "setCheckedGift", "savingDetail", "setSavingDetail", "setCheckedExchangePurchase", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "bundleList", "showAtListing", "availableBundleList", "v", "handleSelectedChange", "bundleItem", "bundleVariants", "bundleVariant", "ProductBundle_default"]
+}

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

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

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as a,Picture as b,Checkbox as P}from"../../../../../../components";import{cn as k}from"../../../../../../helpers/index.js";import{useMemo as g}from"react";import{useBizProductContext as C}from"../../../../BizProductProvider.js";import{formatPrice as n}from"../../../../utils";import{useAiuiContext as v}from"../../../../../AiuiProvider";const N=()=>{const{locale:c="us"}=v(),{checkedExchangePurchase:r,exchangePurchase:m,setCheckedBundle:u,setJoinedRecommendBuyProducts:l,setSavingDetail:p,setCheckedExchangePurchase:d,joinedRecommendBuyProducts:y,savingDetail:x}=C(),{title:h,giftList:i=[],freeLabel:E}=m||{},s=g(()=>i?.filter(e=>e.availableForSale),[i]),f=e=>{r?.id===e.id?(d?.(void 0),l?.({exchange:void 0}),p?.({...x,exchangePurchase:0})):(u?.(void 0),d?.(e),l?.({exchange:e}))};return s?.length?o("div",{className:"ipc-product-detail-free-gift",children:[t(a,{size:3,className:"font-bold",html:h}),t("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4",children:s.map(e=>o("div",{className:k("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2",{"border-brand":r?.id===e.id}),children:[t(P,{onCheckedChange:()=>f(e),size:"lg",className:"rounded-full",id:e.id,checked:r?.id===e.id,value:e.id}),o("label",{htmlFor:e.id,className:"flex justify-between items-center gap-4 w-full",children:[o("div",{className:"flex items-center gap-2",children:[t(b,{source:e.image?.url,className:"size-12 flex-shrink-0"}),t(a,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:e.product.title})]}),o("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[t(a,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:n({amount:e?.finalPrice?.amount||0,locale:c,currencyCode:e?.finalPrice?.currencyCode||"USD"})}),t(a,{className:"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through",html:n({amount:e.price.amount,locale:c,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var L=N;export{L as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant, ProductPrice } from '../../../../types/product'\n\nconst ProductExchangePurchase = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    checkedExchangePurchase,\n    exchangePurchase,\n    setCheckedBundle,\n    setJoinedRecommendBuyProducts,\n    setSavingDetail,\n    setCheckedExchangePurchase,\n    joinedRecommendBuyProducts,\n    savingDetail,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = exchangePurchase || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedExchangePurchase?.id === value.id) {\n      setCheckedExchangePurchase?.(undefined)\n      setJoinedRecommendBuyProducts?.({ exchange: undefined })\n      setSavingDetail?.({ ...savingDetail, exchangePurchase: 0 })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedExchangePurchase?.(value)\n      setJoinedRecommendBuyProducts?.({ exchange: value })\n    }\n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map((gift: ProductVariant & { finalPrice?: ProductPrice }) => (\n          <div\n            key={gift.id}\n            className={cn(\n              'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2',\n              {\n                ['border-brand']: checkedExchangePurchase?.id === gift.id,\n              }\n            )}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className=\"rounded-full\"\n              id={gift.id}\n              checked={checkedExchangePurchase?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text\n                  className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\"\n                  html={formatPrice({\n                    amount: gift?.finalPrice?.amount || 0,\n                    locale,\n                    currencyCode: gift?.finalPrice?.currencyCode || 'USD',\n                  })}\n                />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductExchangePurchase\n"],
+  "mappings": "AAuCM,cAAAA,EAqBQ,QAAAC,MArBR,oBAvCN,OAAS,QAAAC,EAAM,WAAAC,EAA6C,YAAAC,MAAgB,+BAC5E,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,MAAe,QACxB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,8BAG/B,MAAMC,EAA0B,IAAM,CACpC,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIF,EAAe,EACnC,CACJ,wBAAAG,EACA,iBAAAC,EACA,iBAAAC,EACA,8BAAAC,EACA,gBAAAC,EACA,2BAAAC,EACA,2BAAAC,EACA,aAAAC,CACF,EAAIZ,EAAqB,EACnB,CAAE,MAAAa,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIT,GAAoB,CAAC,EAC3DU,EAAiBjB,EAAQ,IAAMe,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDd,GAAyB,KAAOc,EAAM,IACxCT,IAA6B,MAAS,EACtCF,IAAgC,CAAE,SAAU,MAAU,CAAC,EACvDC,IAAkB,CAAE,GAAGG,EAAc,iBAAkB,CAAE,CAAC,IAE1DL,IAAmB,MAAS,EAC5BG,IAA6BS,CAAK,EAClCX,IAAgC,CAAE,SAAUW,CAAM,CAAC,EAEvD,EAEA,OAAKH,GAAgB,OAGnBtB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMkB,EAAO,EAClDpB,EAAC,OAAI,UAAU,kFACZ,SAAAuB,EAAe,IAAKI,GACnB1B,EAAC,OAEC,UAAWI,EACT,8FACA,CACG,eAAiBO,GAAyB,KAAOe,EAAK,EACzD,CACF,EAEA,UAAA3B,EAACI,EAAA,CACC,gBAAiB,IAAMqB,EAAoBE,CAAI,EAC/C,KAAK,KACL,UAAU,eACV,GAAIA,EAAK,GACT,QAASf,GAAyB,KAAOe,EAAK,GAC9C,MAAOA,EAAK,GACb,EACD1B,EAAC,SAAM,QAAS0B,EAAK,GAAI,UAAU,iDACjC,UAAA1B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQwB,EAAK,OAAO,IAAK,UAAU,wBAAwB,EACpE3B,EAACE,EAAA,CACC,UAAU,2EACV,KAAMyB,EAAK,QAAQ,MACrB,GACF,EACA1B,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CACC,UAAU,6DACV,KAAMM,EAAY,CAChB,OAAQmB,GAAM,YAAY,QAAU,EACpC,OAAAhB,EACA,aAAcgB,GAAM,YAAY,cAAgB,KAClD,CAAC,EACH,EACA3B,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQmB,EAAK,MAAM,OACnB,OAAAhB,EACA,aAAcgB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IA1CKA,EAAK,EA2CZ,CACD,EACH,GACF,EAtDkC,IAwDtC,EAEA,IAAOC,EAAQlB",
+  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useBizProductContext", "formatPrice", "useAiuiContext", "ProductExchangePurchase", "locale", "checkedExchangePurchase", "exchangePurchase", "setCheckedBundle", "setJoinedRecommendBuyProducts", "setSavingDetail", "setCheckedExchangePurchase", "joinedRecommendBuyProducts", "savingDetail", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift", "ProductExchangePurchase_default"]
+}

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

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

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as l,Picture as h,Checkbox as k}from"../../../../../../components";import{cn as g}from"../../../../../../helpers/index.js";import{useMemo as v}from"react";import{useBizProductContext as C}from"../../../../BizProductProvider.js";import{formatPrice as N}from"../../../../utils";import{useAiuiContext as y}from"../../../../../AiuiProvider";const G=()=>{const{locale:c="us"}=y(),{freeGift:n,checkedGift:d,setCheckedGift:i,setCheckedBundle:m,setSavingDetail:p,savingDetail:u,setJoinedRecommendBuyProducts:r,joinedRecommendBuyProducts:P}=C(),{title:f,giftList:a=[],freeLabel:x}=n||{},s=v(()=>a?.filter(e=>e.availableForSale),[a]),b=e=>{d?.id===e.id?(i?.(void 0),p?.({...u,freeGift:0}),r?.({gift:void 0})):(m?.(void 0),i?.(e),r?.({gift:e}))};return s?.length?o("div",{className:"ipc-product-detail-free-gift",children:[t(l,{size:3,className:"font-bold",html:f}),t("div",{className:"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4",children:s.map(e=>o("div",{className:g("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2",{"border-brand":d?.id===e.id}),children:[t(k,{onCheckedChange:()=>b(e),size:"lg",className:"rounded-full",id:e.id,checked:d?.id===e.id,value:e.id}),o("label",{htmlFor:e.id,className:"flex justify-between items-center gap-4 w-full",children:[o("div",{className:"flex items-center gap-2",children:[t(h,{source:e.image?.url,className:"size-12 flex-shrink-0"}),t(l,{className:"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold",html:e.product.title})]}),o("div",{className:"flex items-center gap-1 tablet:flex-row flex-col shrink-0",children:[t(l,{className:"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold",html:x}),t(l,{className:"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through",html:N({amount:e.price.amount,locale:c,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var V=G;export{V as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button, RadioGroup, RadioGroupItem, Checkbox } from '../../../../../../components'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useMemo } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const {\n    freeGift,\n    checkedGift,\n    setCheckedGift,\n    setCheckedBundle,\n    setSavingDetail,\n    savingDetail,\n    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n  } = useBizProductContext()\n  const { title, giftList = [], freeLabel } = freeGift || {}\n  const availableGifts = useMemo(() => giftList?.filter(item => item.availableForSale), [giftList])\n\n  const handleCheckboxClick = (value: ProductVariant) => {\n    if (checkedGift?.id === value.id) {\n      setCheckedGift?.(undefined)\n      setSavingDetail?.({ ...savingDetail, freeGift: 0 })\n      setJoinedRecommendBuyProducts?.({ gift: undefined })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({ gift: value, })\n    } \n  }\n\n  if (!availableGifts?.length) return null\n\n  return (\n    <div className=\"ipc-product-detail-free-gift\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      <div className=\"grid grid-cols-1 gap-3 laptop:grid-cols-2 desktop:grid-cols-1 mt-3 desktop:mt-4\">\n        {availableGifts.map(gift => (\n          <div\n            key={gift.id}\n            className={cn(\n              'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2',\n              {\n                ['border-brand']: checkedGift?.id === gift.id,\n              }\n            )}\n          >\n            <Checkbox\n              onCheckedChange={() => handleCheckboxClick(gift)}\n              size=\"lg\"\n              className=\"rounded-full\"\n              id={gift.id}\n              checked={checkedGift?.id === gift.id}\n              value={gift.id}\n            ></Checkbox>\n            <label htmlFor={gift.id} className=\"flex justify-between items-center gap-4 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text\n                  className=\"text-sm laptop:text-[16px] line-clamp-2 lg-desktop:text-[18px] font-bold\"\n                  html={gift.product.title}\n                />\n              </div>\n              <div className=\"flex items-center gap-1 tablet:flex-row flex-col shrink-0\">\n                <Text className=\"text-base laptop:text-[20px] lg-desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base text-[#6D6D6F] laptop:text-[20px] lg-desktop:text-2xl font-bold line-through\"\n                  html={formatPrice({\n                    amount: gift.price.amount,\n                    locale,\n                    currencyCode: gift.price.currencyCode,\n                  })}\n                />\n              </div>\n            </label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ProductFreeGift\n"],
+  "mappings": "AAuCM,cAAAA,EAqBQ,QAAAC,MArBR,oBAvCN,OAAS,QAAAC,EAAM,WAAAC,EAA6C,YAAAC,MAAgB,+BAC5E,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,MAAe,QACxB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,8BAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIF,EAAe,EACnC,CACJ,SAAAG,EACA,YAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,8BAAAC,EACA,2BAAAC,CACF,EAAIZ,EAAqB,EACnB,CAAE,MAAAa,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIV,GAAY,CAAC,EACnDW,EAAiBjB,EAAQ,IAAMe,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDb,GAAa,KAAOa,EAAM,IAC5BZ,IAAiB,MAAS,EAC1BE,IAAkB,CAAE,GAAGC,EAAc,SAAU,CAAE,CAAC,EAClDC,IAAgC,CAAE,KAAM,MAAU,CAAC,IAEnDH,IAAmB,MAAS,EAC5BD,IAAiBY,CAAK,EACtBR,IAAgC,CAAE,KAAMQ,CAAO,CAAC,EAEpD,EAEA,OAAKH,GAAgB,OAGnBtB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMkB,EAAO,EAClDpB,EAAC,OAAI,UAAU,kFACZ,SAAAuB,EAAe,IAAII,GAClB1B,EAAC,OAEC,UAAWI,EACT,8FACA,CACG,eAAiBQ,GAAa,KAAOc,EAAK,EAC7C,CACF,EAEA,UAAA3B,EAACI,EAAA,CACC,gBAAiB,IAAMqB,EAAoBE,CAAI,EAC/C,KAAK,KACL,UAAU,eACV,GAAIA,EAAK,GACT,QAASd,GAAa,KAAOc,EAAK,GAClC,MAAOA,EAAK,GACb,EACD1B,EAAC,SAAM,QAAS0B,EAAK,GAAI,UAAU,iDACjC,UAAA1B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQwB,EAAK,OAAO,IAAK,UAAU,wBAAwB,EACpE3B,EAACE,EAAA,CACC,UAAU,2EACV,KAAMyB,EAAK,QAAQ,MACrB,GACF,EACA1B,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CAAK,UAAU,6DAA6D,KAAMoB,EAAW,EAC9FtB,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQmB,EAAK,MAAM,OACnB,OAAAhB,EACA,aAAcgB,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IAnCKA,EAAK,EAoCZ,CACD,EACH,GACF,EA/CkC,IAiDtC,EAEA,IAAOC,EAAQlB",
+  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useBizProductContext", "formatPrice", "useAiuiContext", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "setSavingDetail", "savingDetail", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "giftList", "freeLabel", "availableGifts", "item", "handleCheckboxClick", "value", "gift", "ProductFreeGift_default"]
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{Fragment as k,jsx as o,jsxs as i}from"react/jsx-runtime";import{Text as c,Picture as y}from"../../../../../../components";import{cn as m}from"../../../../../../helpers/index.js";import{useState as N}from"react";import{useBizProductContext as b}from"../../../../BizProductProvider.js";import{useAiuiContext as h}from"../../../../../AiuiProvider/index.js";import{handle as w}from"../../../../utils/helper.js";const _=()=>{const{product:d,selectedOptions:r,setSelectedOptions:a,setJoinedRecommendBuyProducts:u}=b(),{storeDomain:l}=h(),[p,f]=N({});return d.options.length?o("div",{className:"flex flex-col gap-12",children:d.options.map(t=>{const v=t.name.toLowerCase();return["color","colour","couleur"].some(e=>v.includes(e))?i("div",{className:"ipc-product-detail-options",children:[o(c,{as:"p",size:3,className:"font-bold",html:"Select Color: "+r[t.name]}),o("div",{className:"flex items-center gap-4 mt-4",children:t.values.map(({label:e},s)=>{const g=`https://${l}/cdn/shop/files/${w(e)}.png`;return i("div",{className:"relative ipc-product-detail-options-value",children:[o("button",{"aria-label":`switch to ${e}`,title:e,onClick:()=>{a(n=>({...n,[t.name]:e})),u?.({gift:void 0,bundle:void 0})},className:m("flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",{"outline-brand":r[t.name]===e}),children:!p[e]&&o(k,{children:o(y,{className:"w-full",source:g,onError:({currentTarget:n})=>{n.onerror=null,f(x=>({...x,[e]:!0}))}})})}),o("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)]"})]},e+s)})})]},t.id):i("div",{className:"ipc-product-detail-options",children:[o(c,{as:"p",size:3,className:"font-bold",html:t.name}),o("div",{className:"flex items-center gap-4 mt-4",children:t.values.map(({label:e})=>o("button",{onClick:()=>{a(s=>({...s,[t.name]:e}))},className:m("w-1/2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2",{"border-brand":r[t.name]===e}),children:e},e))})]},t.id)})}):null};var $=_;export{$ as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductOptions/index.tsx"],
+  "sourcesContent": ["import { Text, Picture, Button } from '../../../../../../components'\nimport type { ProductOptionsProps } from '../types'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useState } from 'react'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } =\n    useBizProductContext()\n  const { storeDomain } = useAiuiContext()\n  const [imgLoadError, setImgLoadError] = useState({})\n  if (!product.options.length) return null\n  return (\n    <div className=\"flex flex-col gap-12\">\n      {product.options.map(option => {\n        const lowercasedName = option.name.toLowerCase()\n        const colorKeywords = ['color', 'colour', 'couleur']\n        if (colorKeywords.some(keyword => lowercasedName.includes(keyword))) {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={'Select Color: ' + selectedOptions[option.name]} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }, index) => {\n                  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n                  return (\n                    <div key={label + index} className=\"relative ipc-product-detail-options-value\">\n                      <button\n                        aria-label={`switch to ${label}`}\n                        title={label}\n                        onClick={() => {\n                          setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                          setJoinedRecommendBuyProducts?.({ gift: undefined, bundle: undefined })\n                        }}\n                        className={cn(\n                          'flex size-[30px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white',\n                          {\n                            'outline-brand': selectedOptions[option.name] === label,\n                          }\n                        )}\n                      >\n                        {!imgLoadError[label as keyof typeof imgLoadError] && (\n                          <>\n                            <Picture\n                              className=\"w-full\"\n                              source={imagePath}\n                              onError={({ currentTarget }) => {\n                                currentTarget.onerror = null // prevents looping\n                                setImgLoadError(prev => ({ ...prev, [label]: true }))\n                              }}\n                            />\n                          </>\n                        )}\n                      </button>\n                      <div className=\"pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]\"></div>\n                    </div>\n                  )\n                })}\n              </div>\n            </div>\n          )\n        } else {\n          return (\n            <div key={option.id} className=\"ipc-product-detail-options\">\n              <Text as=\"p\" size={3} className=\"font-bold\" html={option.name} />\n              <div className=\"flex items-center gap-4 mt-4\">\n                {option.values.map(({ label }) => (\n                  <button\n                    key={label}\n                    onClick={() => {\n                      setSelectedOptions(prev => ({ ...prev, [option.name]: label }))\n                      // setProductSummaryStatus?.({ giftSummary: false, bundleSummary: false })\n                    }}\n                    className={cn('w-1/2 text-left font-bold px-4 py-6 rounded-btn border-[#E4E5E6] border-2', {\n                      'border-brand': selectedOptions[option.name] === label,\n                    })}\n                  >\n                    {label}\n                  </button>\n                ))}\n              </div>\n            </div>\n          )\n        }\n      })}\n    </div>\n  )\n}\n\nexport default ProductOptions\n"],
+  "mappings": "AAsBc,OAqBY,YAAAA,EArBZ,OAAAC,EAKM,QAAAC,MALN,oBAtBd,OAAS,QAAAC,EAAM,WAAAC,MAAuB,+BAEtC,OAAS,MAAAC,MAAU,qCACnB,OAAS,YAAAC,MAAgB,QACzB,OAAS,wBAAAC,MAA4B,oCACrC,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,UAAAC,MAAc,8BAEvB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,EAClFP,EAAqB,EACjB,CAAE,YAAAQ,CAAY,EAAIP,EAAe,EACjC,CAACQ,EAAcC,CAAe,EAAIX,EAAS,CAAC,CAAC,EACnD,OAAKK,EAAQ,QAAQ,OAEnBV,EAAC,OAAI,UAAU,uBACZ,SAAAU,EAAQ,QAAQ,IAAIO,GAAU,CAC7B,MAAMC,EAAiBD,EAAO,KAAK,YAAY,EAE/C,MADsB,CAAC,QAAS,SAAU,SAAS,EACjC,KAAKE,GAAWD,EAAe,SAASC,CAAO,CAAC,EAE9DlB,EAAC,OAAoB,UAAU,6BAC7B,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAM,iBAAmBS,EAAgBM,EAAO,IAAI,EAAG,EACnGjB,EAAC,OAAI,UAAU,+BACZ,SAAAiB,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,EAAGC,IAAU,CACvC,MAAMC,EAAY,WAAWR,CAAW,mBAAmBN,EAAOY,CAAK,CAAC,OACxE,OACEnB,EAAC,OAAwB,UAAU,4CACjC,UAAAD,EAAC,UACC,aAAY,aAAaoB,CAAK,GAC9B,MAAOA,EACP,QAAS,IAAM,CACbR,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,EAC9DP,IAAgC,CAAE,KAAM,OAAW,OAAQ,MAAU,CAAC,CACxE,EACA,UAAWT,EACT,oIACA,CACE,gBAAiBO,EAAgBM,EAAO,IAAI,IAAMG,CACpD,CACF,EAEC,UAACL,EAAaK,CAAkC,GAC/CpB,EAAAD,EAAA,CACE,SAAAC,EAACG,EAAA,CACC,UAAU,SACV,OAAQmB,EACR,QAAS,CAAC,CAAE,cAAAE,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBR,EAAgBO,IAAS,CAAE,GAAGA,EAAM,CAACH,CAAK,EAAG,EAAK,EAAE,CACtD,EACF,EACF,EAEJ,EACApB,EAAC,OAAI,UAAU,6HAA6H,IA5BpIoB,EAAQC,CA6BlB,CAEJ,CAAC,EACH,IAtCQJ,EAAO,EAuCjB,EAIAhB,EAAC,OAAoB,UAAU,6BAC7B,UAAAD,EAACE,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAU,YAAY,KAAMe,EAAO,KAAM,EAC/DjB,EAAC,OAAI,UAAU,+BACZ,SAAAiB,EAAO,OAAO,IAAI,CAAC,CAAE,MAAAG,CAAM,IAC1BpB,EAAC,UAEC,QAAS,IAAM,CACbY,EAAmBW,IAAS,CAAE,GAAGA,EAAM,CAACN,EAAO,IAAI,EAAGG,CAAM,EAAE,CAEhE,EACA,UAAWhB,EAAG,4EAA6E,CACzF,eAAgBO,EAAgBM,EAAO,IAAI,IAAMG,CACnD,CAAC,EAEA,SAAAA,GATIA,CAUP,CACD,EACH,IAjBQH,EAAO,EAkBjB,CAGN,CAAC,EACH,EAzEkC,IA2EtC,EAEA,IAAOQ,EAAQhB",
+  "names": ["Fragment", "jsx", "jsxs", "Text", "Picture", "cn", "useState", "useBizProductContext", "useAiuiContext", "handle", "ProductOptions", "product", "selectedOptions", "setSelectedOptions", "setJoinedRecommendBuyProducts", "storeDomain", "imgLoadError", "setImgLoadError", "option", "lowercasedName", "keyword", "label", "index", "imagePath", "prev", "currentTarget", "ProductOptions_default"]
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/index.tsx"],
+  "sourcesContent": ["import ProductBenefitsTabs from './ProductBenefitsTabs/index.js'\nimport ProductHighlight from './ProductHighlight/index.js'\nimport ProductFreeGift from './ProductFreeGift/index.js'\nimport ProductOptions from './ProductOptions/index.js'\nimport ProductBundle from './ProductBundle/index.js'\nimport BenefitsTab from './BenefitsTab'\n\n\nconst ProductDetail = (props: any) => {\n  return (\n    <div id=\"ipc-product-detail\" className=\"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4\">\n      <BenefitsTab />\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
+  "mappings": "AAUI,OACE,OAAAA,EADF,QAAAC,MAAA,oBAVJ,MAAgC,iCAChC,OAAOC,MAAsB,8BAC7B,OAAOC,MAAqB,6BAC5B,OAAOC,MAAoB,4BAC3B,OAAOC,MAAmB,2BAC1B,OAAOC,MAAiB,gBAGxB,MAAMC,EAAiBC,GAEnBP,EAAC,OAAI,GAAG,qBAAqB,UAAU,kEACrC,UAAAD,EAACM,EAAA,EAAY,EACbN,EAACE,EAAA,EAAiB,EAClBF,EAACI,EAAA,EAAe,EAChBJ,EAACG,EAAA,EAAgB,EACjBH,EAACK,EAAA,EAAc,GACjB,EAIJ,IAAOI,EAAQF",
+  "names": ["jsx", "jsxs", "ProductHighlight", "ProductFreeGift", "ProductOptions", "ProductBundle", "BenefitsTab", "ProductDetail", "props", "ProductDetail_default"]
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.tsx"],
+  "sourcesContent": ["import { useEffect, useState } from 'react'\nimport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\nimport type { CompareItem } from '../../../../types'\nimport Select from './Select'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { formatPrice } from '../../../../utils'\nimport { ShopifyColorOption } from './ShopifyColorOption'\n\nconst CompareModal = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { compareData, product } = useBizProductContext()\n  const [selectedProductHandle, setSelectedProductHandle] = useState<string>()\n\n  useEffect(() => {\n    setSelectedProductHandle(compareData?.availableCompareList[0]?.handle)\n  }, [compareData?.availableCompareList])\n\n  const products = [\n    compareData?.currentProductCompareData!?.product,\n    compareData?.availableCompareList.find(product => product.handle === selectedProductHandle)?.product,\n  ].filter(Boolean) as CompareItem['product'][]\n\n  if (!compareData?.specificationKeys) return null\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Compare</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[calc(100vh-92px)] z-[110] overflow-y-scroll px-[40px] py-[30px] shadow-lg tablet:min-w-[760px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Compare</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1} />\n          {products.map((product, productIndex) => {\n            return (\n              <GridItem key={productIndex} span={1} className=\"flex items-center\">\n                <img\n                  src={product.images[0].url}\n                  alt={product.title}\n                  className=\"h-[200px] w-[200px]\"\n                  role=\"presentation\"\n                />\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Product</div>\n          </GridItem>\n          <GridItem span={1}>\n            <Text\n              as=\"div\"\n              className=\"flex h-[38px] w-full items-center rounded-[2px] border border-[#E8E8E8] px-[12px] text-[16px] font-bold\"\n              html={compareData.currentProductCompareData?.shortName || product.title}\n            ></Text>\n          </GridItem>\n          {selectedProductHandle && (\n            <GridItem span={1}>\n              <Select\n                value={selectedProductHandle}\n                onChange={value => {\n                  setSelectedProductHandle(value)\n                }}\n                list={compareData.options!}\n              />\n            </GridItem>\n          )}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\">\n          <GridItem span={1}>\n            <div className=\"text-[16px] font-bold text-[#595959]\">Basic Information</div>\n          </GridItem>\n          {products.map((product, productIndex) => {\n            const variant = product.variants[0]\n            const colors = product.options\n              ?.find(option =>\n                ['color', 'colour', 'couleur'].find(predicate => option.name.toLowerCase().includes(predicate))\n              )\n              ?.values.map(value => value.label)\n            return (\n              <GridItem span={1} key={productIndex} className=\"flex h-full\">\n                {/* Price with original price */}\n                <div className=\"flex flex-col gap-[8px]\">\n                  {variant.price.amount < 9999999 && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Price:</div>\n                      <div className=\"flex items-center gap-[6px]\">\n                        <span className=\"text-[16px] font-bold\">\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n\n                        {/* {Number(coupon?.fixed_value) > 0 && (\n                        <span className='font-semibold text-[#999999] line-through'>\n                          {formatPrice({\n                            locale,\n                            amount: variant.price.amount,\n                            currencyCode: variant.price.currencyCode,\n                          })}\n                        </span>\n                      )} */}\n                      </div>\n                    </div>\n                  )}\n                  {colors?.length && (\n                    <div className=\"flex items-center gap-[8px]\">\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">Color:</div>\n                      <div className=\"flex items-center gap-[16px]\">\n                        {colors.map(label => (\n                          <ShopifyColorOption key={label} label={label} className=\"h-[16px] w-[16px]\" />\n                        ))}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n        <Grid className=\"gap-[40px] grid-cols-12 items-center gap-[40px] border-b border-[#E8E8E8]\">\n          {compareData.specificationKeys?.map((key: string) => {\n            return (\n              <GridItem\n                span={12}\n                className=\"grid grid-cols-3 items-center gap-[40px] border-b border-[#E8E8E8] py-[24px]\"\n                key={key}\n              >\n                {/* Detail value */}\n                <div className=\"text-[16px] font-bold text-[#595959]\">{key}</div>\n                {/* Product Values */}\n                {products.map((product, productIndex) => {\n                  const value =\n                    product.metafields?.global?.specifications?.find(\n                      (specification: { key: string }) => specification?.key === key\n                    )?.value || ''\n                  let text = value\n                  switch (text.trim().toLowerCase()) {\n                    case 'true':\n                      text = '\u2714\uFE0F'\n                      break\n                    case 'false':\n                      text = '\u274C'\n                      break\n                    default:\n                      break\n                  }\n                  return (\n                    <div key={productIndex} className=\"flex items-center\">\n                      {/* Other details */}\n                      <div className=\"text-[16px] font-semibold text-[#595959]\">{text}</div>\n                    </div>\n                  )\n                })}\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CompareModal\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useEffect", "useState", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/Select.tsx"],
+  "sourcesContent": ["import { ChevronDownIcon } from '@heroicons/react/24/outline'\nimport { cn as classNames, cn } from '../../../../../../helpers'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface SelectProps {\n  label?: string\n  required?: boolean\n  list?: { value: string; text: string; disabled?: boolean }[]\n  value?: string\n  disabled?: boolean\n  error?: string\n  errorClassName?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  containerClassName?: string\n  selectListClassName?: string\n  truncate?: boolean\n}\n\nconst Select = ({\n  label = '',\n  required = false,\n  list = [],\n  value = '',\n  disabled = false,\n  error = '',\n  errorClassName = '',\n  onChange = (value: string) => {},\n  placeholder = '',\n  className = '',\n  containerClassName = '',\n  selectListClassName = '',\n  truncate = false,\n  ...props\n}: SelectProps) => {\n  const dropdownRef = useRef(null)\n  const [selecting, setSelecting] = useState(false)\n  const buttonRef = useRef<HTMLDivElement>(null)\n\n  const displayValue = list.find(item => item?.value === value)?.text\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (buttonRef.current && !buttonRef.current?.contains(event.target as Node)) {\n        setSelecting(false)\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [])\n\n  // useEffect(() => {\n  //   // scroll to select item when select is open\n  //   // start_ai_generated\n  //   if (selecting && value) {\n  //     const selectedElement = dropdownRef.current.querySelector(`[data-value=\"${value}\"]`)\n  //     if (selectedElement) {\n  //       scrollParentToChild(dropdownRef.current, selectedElement)\n  //     }\n  //   }\n  //   // end_ai_generated\n  // }, [selecting, value])\n\n  return (\n    <div className={classNames('relative w-full', containerClassName)}>\n      {label && (\n        <div className=\"mb-[10px] text-[16px] font-bold\">\n          {label}\n          {required && <span className=\"text-[#F84D4F]\">*</span>}\n        </div>\n      )}\n      <div ref={buttonRef} className=\"relative block\">\n        <div\n          className={classNames(\n            'flex h-[38px] w-full cursor-pointer items-center justify-between rounded-[2px] border px-[12px] text-[16px] font-bold transition-all x:text-[14px]',\n            placeholder && !value ? 'placeholder:text-[#999]' : '',\n            disabled ? 'pointer-events-none bg-[#F7F8F9]' : 'bg-white',\n            error ? '!border-[#F84D4F]' : 'border-[#E8E8E8]',\n            list.length <= 1 && 'cursor-default',\n            className\n          )}\n          onClick={() => {\n            if (list.length > 1) {\n              setSelecting(!selecting)\n            }\n          }}\n          onChange={event => {\n            onChange((event.target as HTMLSelectElement).value)\n          }}\n          role=\"button\"\n          tabIndex={0}\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n            }\n          }}\n          {...props}\n        >\n          {!value && placeholder ? (\n            <div className=\"text-[#999]\">{placeholder}</div>\n          ) : (\n            <div className={cn('line-clamp-1', truncate ? 'min-w-0 flex-1 truncate' : 'flex-1')}>{displayValue}</div>\n          )}\n          {list.length > 1 && (\n            <ChevronDownIcon\n              className={classNames(\n                'ml-[4px] h-[18px] w-[18px] flex-shrink-0 stroke-[#999999] transition-transform',\n                selecting && 'rotate-180'\n              )}\n            />\n          )}\n        </div>\n        <div\n          ref={dropdownRef}\n          className={classNames(\n            'absolute left-0 right-0 top-full z-[1] mt-[8px] max-h-[318px] overflow-auto rounded-[4px] bg-white py-[6px] shadow-[0_1px_12px_0px_#0000001F] transition-all duration-300',\n            selecting ? '' : 'pointer-events-none opacity-0',\n            selectListClassName\n          )}\n        >\n          {list.map(item => (\n            <div\n              key={item.value}\n              data-value={item.value}\n              className={classNames(\n                'flex h-[47px] w-full flex-shrink-0 cursor-pointer items-center whitespace-nowrap bg-white px-[14px] text-[15px] font-bold text-[#333] transition-colors duration-300 hover:bg-[#F7F8F9]',\n                value === item.value ? '!bg-[#E8E8E8]' : '',\n                item?.disabled ? 'pointer-events-none text-[#C8C8C8]' : ''\n              )}\n              onClick={() => {\n                onChange(item.value)\n                setSelecting(false)\n              }}\n              role=\"button\"\n              tabIndex={0}\n              onKeyDown={e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                }\n              }}\n            >\n              {item.text}\n            </div>\n          ))}\n        </div>\n      </div>\n      {error && (\n        <div className={classNames('mt-[8px] text-[14px] text-[#F84D4F]', errorClassName)}>\n          {typeof error === 'string' ? `*${error}` : error}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default Select"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "ChevronDownIcon", "classNames", "cn", "useEffect", "useRef", "useState", "Select", "label", "required", "list", "value", "disabled", "error", "errorClassName", "onChange", "placeholder", "className", "containerClassName", "selectListClassName", "truncate", "props", "dropdownRef", "selecting", "setSelecting", "buttonRef", "displayValue", "item", "handleClickOutside", "event", "e", "Select_default"]
+}

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

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

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

@@ -0,0 +1,2 @@
+import{Fragment as g,jsx as t,jsxs as h}from"react/jsx-runtime";import{Picture as c}from"../../../../../../components";import{handle as m}from"../../../../utils/helper.js";import{useState as f}from"react";import{cn as d}from"../../../../../../helpers";import{useAiuiContext as p}from"../../../../../AiuiProvider/index.js";const w=({onClick:e,label:o,className:s})=>{const[r,i]=f({}),{locale:_,storeDomain:a}=p(),n=`https://${a}/cdn/shop/files/${m(o)}.png`;return h("div",{className:"relative",children:[t("button",{className:d("relative flex h-[36px] w-[36px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white",!e&&"cursor-default",s),"aria-label":`switch to ${o}`,onClick:e||(()=>{}),title:o,style:r[o]?{background:o}:{},children:!r[o]&&t(g,{children:t(c,{className:"w-full",source:n,onError:({currentTarget:l})=>{l.onerror=null,i(u=>({...u,[o]:!0}))}})})}),t("div",{className:"absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]"})]})};export{w as ShopifyColorOption};
+//# sourceMappingURL=ShopifyColorOption.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/ShopifyColorOption.tsx"],
+  "sourcesContent": ["import { Picture } from '../../../../../../components'\nimport { handle } from '../../../../utils/helper.js'\nimport { useState } from 'react'\nimport { cn as classNames } from '../../../../../../helpers'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\n\nexport const ShopifyColorOption = ({\n  onClick,\n  label,\n  className,\n}: {\n  onClick?: () => void\n  label: string\n  className?: string\n}) => {\n  const [imgLoadError, setImgLoadError] = useState({})\n\n  const { locale, storeDomain } = useAiuiContext()\n  const imagePath = `https://${storeDomain}/cdn/shop/files/${handle(label)}.png`\n  return (\n    <div className='relative'>\n      <button\n        className={classNames(\n          `relative flex h-[36px] w-[36px] items-center justify-center rounded-full bg-center bg-no-repeat outline outline-2 outline-offset-4 outline-white`,\n          !onClick && 'cursor-default',\n          className,\n        )}\n        aria-label={`switch to ${label}`}\n        onClick={onClick ? onClick : () => {}}\n        title={label}\n        // If the image fails to load, set the background color to the color of the label\n        style={imgLoadError[label as keyof typeof imgLoadError] ? { background: label } : {}}\n      >\n        {!imgLoadError[label as keyof typeof imgLoadError] && (\n          <>\n            <Picture\n              className='w-full'\n              source={imagePath}\n              onError={({ currentTarget }) => {\n                currentTarget.onerror = null // prevents looping\n                setImgLoadError((prev) => ({ ...prev, [label]: true }))\n              }}\n            />\n          </>\n        )}\n      </button>\n      <div className='absolute inset-0 rounded-full shadow-[inset_0_0_4px_rgba(0,0,0,0.08),inset_0_2px_2px_rgba(0,0,0,0.12)]'></div>\n    </div>\n  )\n}\n"],
+  "mappings": "AAoBI,OAcM,YAAAA,EACE,OAAAC,EAfR,QAAAC,MAAA,oBApBJ,OAAS,WAAAC,MAAe,+BACxB,OAAS,UAAAC,MAAc,8BACvB,OAAS,YAAAC,MAAgB,QACzB,OAAS,MAAMC,MAAkB,4BACjC,OAAS,kBAAAC,MAAsB,uCAExB,MAAMC,EAAqB,CAAC,CACjC,QAAAC,EACA,MAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIR,EAAS,CAAC,CAAC,EAE7C,CAAE,OAAAS,EAAQ,YAAAC,CAAY,EAAIR,EAAe,EACzCS,EAAY,WAAWD,CAAW,mBAAmBX,EAAOM,CAAK,CAAC,OACxE,OACER,EAAC,OAAI,UAAU,WACb,UAAAD,EAAC,UACC,UAAWK,EACT,mJACA,CAACG,GAAW,iBACZE,CACF,EACA,aAAY,aAAaD,CAAK,GAC9B,QAASD,IAAoB,IAAM,CAAC,GACpC,MAAOC,EAEP,MAAOE,EAAaF,CAAkC,EAAI,CAAE,WAAYA,CAAM,EAAI,CAAC,EAElF,UAACE,EAAaF,CAAkC,GAC/CT,EAAAD,EAAA,CACE,SAAAC,EAACE,EAAA,CACC,UAAU,SACV,OAAQa,EACR,QAAS,CAAC,CAAE,cAAAC,CAAc,IAAM,CAC9BA,EAAc,QAAU,KACxBJ,EAAiBK,IAAU,CAAE,GAAGA,EAAM,CAACR,CAAK,EAAG,EAAK,EAAE,CACxD,EACF,EACF,EAEJ,EACAT,EAAC,OAAI,UAAU,yGAAyG,GAC1H,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "Picture", "handle", "useState", "classNames", "useAiuiContext", "ShopifyColorOption", "onClick", "label", "className", "imgLoadError", "setImgLoadError", "locale", "storeDomain", "imagePath", "currentTarget", "prev"]
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/components/SpecsModal.tsx"],
+  "sourcesContent": ["import {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  Grid,\n  GridItem,\n  Text,\n} from '../../../../../../components'\nimport { useBizProductContext } from '../../../../BizProductProvider'\n\nexport const SpecsModal = () => {\n  const { product } = useBizProductContext()\n\n  return (\n    <Dialog>\n      <DialogTrigger>\n        <button className=\"text-base leading-[1.4] font-bold\">Specs</button>\n      </DialogTrigger>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"max-h-[80vh] z-[110] overflow-y-scroll tablet:min-w-[600px] min-w-[90vw]\"\n      >\n        <DialogHeader className=\"border-b border-[#E8E8E8]\">\n          <DialogTitle>Specs</DialogTitle>\n        </DialogHeader>\n        <Grid className=\"gap-[40px]\">\n          {product.metafields?.global?.specifications?.map(({ key, value }: { key: string; value: string }) => (\n            <GridItem span={12} className=\"flex w-full py-[24px] border-b border-[#E8E8E8]\">\n              <Text className=\"flex-1 text-[16px] font-bold text-[#595959]\">{key}</Text>\n              <div className=\"flex-1 flex items-center\">\n                <Text\n                  className=\"text-[16px] font-semibold text-[#595959]\"\n                  html={\n                    value?.trim().toLowerCase() === 'true'\n                      ? '\u2714\uFE0F'\n                      : value?.trim().toLowerCase() === 'false'\n                        ? '\u274C'\n                        : value\n                  }\n                />\n              </div>\n            </GridItem>\n          ))}\n        </Grid>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAkBQ,cAAAA,EAWI,QAAAC,MAXJ,oBAlBR,OACE,UAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,YAAAC,EACA,QAAAC,MACK,+BACP,OAAS,wBAAAC,MAA4B,iCAE9B,MAAMC,EAAa,IAAM,CAC9B,KAAM,CAAE,QAAAC,CAAQ,EAAIF,EAAqB,EAEzC,OACET,EAACC,EAAA,CACC,UAAAF,EAACG,EAAA,CACC,SAAAH,EAAC,UAAO,UAAU,oCAAoC,iBAAK,EAC7D,EACAC,EAACG,EAAA,CACC,iBAAiB,UACjB,UAAU,2EAEV,UAAAJ,EAACK,EAAA,CAAa,UAAU,4BACtB,SAAAL,EAACM,EAAA,CAAY,iBAAK,EACpB,EACAN,EAACO,EAAA,CAAK,UAAU,aACb,SAAAK,EAAQ,YAAY,QAAQ,gBAAgB,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,IAC7Db,EAACO,EAAA,CAAS,KAAM,GAAI,UAAU,kDAC5B,UAAAR,EAACS,EAAA,CAAK,UAAU,8CAA+C,SAAAI,EAAI,EACnEb,EAAC,OAAI,UAAU,2BACb,SAAAA,EAACS,EAAA,CACC,UAAU,2CACV,KACEK,GAAO,KAAK,EAAE,YAAY,IAAM,OAC5B,eACAA,GAAO,KAAK,EAAE,YAAY,IAAM,QAC9B,SACAA,EAEV,EACF,GACF,CACD,EACH,GACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "Dialog", "DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "Grid", "GridItem", "Text", "useBizProductContext", "SpecsModal", "product", "key", "value"]
+}

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

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

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

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