@anker-in/headless-ui 1.0.19 → 1.0.20-alpha.102201

package/dist/esm/biz-components/HeaderNavigation/types.d.ts

@@ -1,17 +1,30 @@
 import type { Product } from '../../cpn-components/CpnProductCard/types.js';
 export interface HeaderNavigationProps {
     data: any;
+    searchResult?: any;
+    onSearch?: (value?: string) => void;
+    isSearching?: boolean;
+    keywords?: {
+        search_term: string;
+        search_date: string;
+        shopify_domain: string;
+        counts: number;
+    }[];
     event?: {
         search?: () => void;
         cart?: () => void;
         profile?: () => void;
         livestream?: () => void;
+        join?: () => void;
+        login?: () => void;
     };
     buildProps: {
-        products: Product[];
+        products?: Product[];
+        categories?: Record<string, any>;
     };
     profile?: UserProfile;
     theme?: string;
+    isTop?: boolean;
 }
 export interface MobilePrimaryNavigationData {
     actions: any;
@@ -32,7 +45,8 @@ export declare enum HeaderNavigationMenu {
 export declare enum HeaderNavigationBlockType {
     Sidebar = "ipc-navigation-sidebar",
     Supports = "ipc-navigation-supports",
-    Multicol = "ipc-navigation-multicol"
+    Multicol = "ipc-navigation-multicol",
+    Links = "ipc-navigation-links"
 }
 export declare enum HeaderNavigationActionBlockType {
     Search = "ipc-navigation-action-search",
@@ -42,9 +56,13 @@ export declare enum HeaderNavigationActionBlockType {
 }
 export interface MobileNavigationProps {
     data: any;
+    className?: string;
 }
 export interface DesktopNavigationProps {
     data: any;
+    onNavItemClick?: () => void;
+    className?: string;
+    theme?: string;
 }
 type Country = {
     id?: number;

package/dist/esm/biz-components/HeaderNavigation/types.js

@@ -1,2 +1,2 @@
-import"react";var t=(r=>(r.Primary="primary",r.Secondary="secondary",r.Third="third",r))(t||{}),i=(r=>(r.Sidebar="ipc-navigation-sidebar",r.Supports="ipc-navigation-supports",r.Multicol="ipc-navigation-multicol",r))(i||{}),o=(n=>(n.Search="ipc-navigation-action-search",n.Cart="ipc-navigation-action-cart",n.Profile="ipc-navigation-action-profile",n.Livestream="ipc-navigation-action-livestream",n))(o||{});export{o as HeaderNavigationActionBlockType,i as HeaderNavigationBlockType,t as HeaderNavigationMenu};
+import"react";var r=(i=>(i.Primary="primary",i.Secondary="secondary",i.Third="third",i))(r||{}),t=(n=>(n.Sidebar="ipc-navigation-sidebar",n.Supports="ipc-navigation-supports",n.Multicol="ipc-navigation-multicol",n.Links="ipc-navigation-links",n))(t||{}),o=(n=>(n.Search="ipc-navigation-action-search",n.Cart="ipc-navigation-action-cart",n.Profile="ipc-navigation-action-profile",n.Livestream="ipc-navigation-action-livestream",n))(o||{});export{o as HeaderNavigationActionBlockType,t as HeaderNavigationBlockType,r as HeaderNavigationMenu};
 //# sourceMappingURL=types.js.map

package/dist/esm/biz-components/HeaderNavigation/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/types.ts"],
-  "sourcesContent": ["import React from 'react'\n\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\n\nexport interface HeaderNavigationProps {\n  data: any\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n  }\n  buildProps: {\n    products: Product[]\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  theme?: string\n}\n\nexport interface MobilePrimaryNavigationData {\n  actions: any\n  menuOpen?: boolean\n  onMenuOpenClick: () => void\n  onMenuOpenClose: () => void\n}\n\nexport interface MobileSecondaryNavigationData {\n  title?: string\n  onMenuOpenClose: () => void\n  onMenuBackClick: () => void\n}\n\nexport enum HeaderNavigationMenu {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Third = 'third',\n}\n\nexport enum HeaderNavigationBlockType {\n  Sidebar = 'ipc-navigation-sidebar',\n  Supports = 'ipc-navigation-supports',\n  Multicol = 'ipc-navigation-multicol',\n}\n\nexport enum HeaderNavigationActionBlockType {\n  Search = 'ipc-navigation-action-search',\n  Cart = 'ipc-navigation-action-cart',\n  Profile = 'ipc-navigation-action-profile',\n  Livestream = 'ipc-navigation-action-livestream',\n}\n\nexport interface MobileNavigationProps {\n  data: any\n}\n\nexport interface DesktopNavigationProps {\n  data: any\n}\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n"],
-  "mappings": "AAAA,MAAkB,QAgCX,IAAKA,OACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,MAAQ,QAHEA,OAAA,IAMAC,OACVA,EAAA,QAAU,yBACVA,EAAA,SAAW,0BACXA,EAAA,SAAW,0BAHDA,OAAA,IAMAC,OACVA,EAAA,OAAS,+BACTA,EAAA,KAAO,6BACPA,EAAA,QAAU,gCACVA,EAAA,WAAa,mCAJHA,OAAA",
+  "sourcesContent": ["import React from 'react'\n\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\n\nexport interface HeaderNavigationProps {\n  data: any\n  searchResult?: any\n  onSearch?: (value?: string) => void\n  isSearching?: boolean\n  keywords?: {\n    search_term: string\n    search_date: string\n    shopify_domain: string\n    counts: number\n  }[]\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n    join?: () => void\n    login?: () => void\n  }\n  buildProps: {\n    products?: Product[]\n    categories?: Record<string, any>\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  theme?: string\n  isTop?: boolean // \u662F\u5426\u5728\u9876\u90E8\n}\n\nexport interface MobilePrimaryNavigationData {\n  actions: any\n  menuOpen?: boolean\n  onMenuOpenClick: () => void\n  onMenuOpenClose: () => void\n}\n\nexport interface MobileSecondaryNavigationData {\n  title?: string\n  onMenuOpenClose: () => void\n  onMenuBackClick: () => void\n}\n\nexport enum HeaderNavigationMenu {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Third = 'third',\n}\n\nexport enum HeaderNavigationBlockType {\n  Sidebar = 'ipc-navigation-sidebar',\n  Supports = 'ipc-navigation-supports',\n  Multicol = 'ipc-navigation-multicol',\n  Links = 'ipc-navigation-links',\n}\n\nexport enum HeaderNavigationActionBlockType {\n  Search = 'ipc-navigation-action-search',\n  Cart = 'ipc-navigation-action-cart',\n  Profile = 'ipc-navigation-action-profile',\n  Livestream = 'ipc-navigation-action-livestream',\n}\n\nexport interface MobileNavigationProps {\n  data: any\n  className?: string\n}\n\nexport interface DesktopNavigationProps {\n  data: any\n  onNavItemClick?: () => void\n  className?: string\n  theme?: string\n}\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n"],
+  "mappings": "AAAA,MAAkB,QA6CX,IAAKA,OACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,MAAQ,QAHEA,OAAA,IAMAC,OACVA,EAAA,QAAU,yBACVA,EAAA,SAAW,0BACXA,EAAA,SAAW,0BACXA,EAAA,MAAQ,uBAJEA,OAAA,IAOAC,OACVA,EAAA,OAAS,+BACTA,EAAA,KAAO,6BACPA,EAAA,QAAU,gCACVA,EAAA,WAAa,mCAJHA,OAAA",
   "names": ["HeaderNavigationMenu", "HeaderNavigationBlockType", "HeaderNavigationActionBlockType"]
 }

package/dist/esm/biz-components/HeaderNavigation/withCategory.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
-export declare function WithSupports<P extends object>(WrappedComponent: React.ComponentType<any>, { categoriesItem, currentNavItemRef, onMouseLeave, }: {
+export declare function WithSupports<P extends object>(WrappedComponent: React.ComponentType<any>, { categoriesItem, currentNavItemRef, }: {
     categoriesItem: any;
     currentNavItemRef?: any;
     onMouseLeave?: () => void;

package/dist/esm/biz-components/HeaderNavigation/withCategory.js

@@ -1,2 +1,2 @@
-import{jsx as d}from"react/jsx-runtime";import i,{useMemo as u}from"react";function p(a,e){const r=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.categoriesMetadata||"{}")}catch(n){console.log("categoriesMetadata Parse error",n)}return t},[e]),s=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.seriesMetadata||"[]")}catch(n){console.log("seriesMetadata Parse error",n)}return t},[e]),o=i.forwardRef((t,n)=>d(a,{...t,ref:n,seriesMetadata:s,sidebarCategoriesMetadata:r}));return o.displayName=a.displayName||a.name||"WithSidebarDropdown",o}function y(a,{categoriesItem:e,currentNavItemRef:r,onMouseLeave:s}){const o=u(()=>e?.components?.[0]?.supports,[e]),t=i.forwardRef((n,l)=>d(a,{...n,supportsMetadata:o,currentNavItemRef:r,onMouseLeave:s,ref:l}));return t.displayName=a.displayName||a.name||"WithSupportsDropdown",t}function M(a,e){const r=u(()=>{try{return JSON.parse(e?.components?.[0]?.multicol?.multicolMetadata||"{}")}catch(o){console.log("multicolMetadata Parse error",o)}return null},[e]),s=i.forwardRef((o,t)=>d(a,{...o,ref:t,multicolMetadata:r}));return s.displayName=a.displayName||a.name||"WithMulticolDropdown",s}function f(a){return a?Object.values(a?.reduce((e,r)=>(e[r.group]||(e[r.group]=[]),e[r.group].push(r),e),{})):[[]]}export{f as WithGroupCategory,M as WithMulticol,p as WithSidebar,y as WithSupports};
+import{jsx as d}from"react/jsx-runtime";import i,{useMemo as u}from"react";function c(a,e){const r=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.categoriesMetadata||"{}")}catch(n){console.log("categoriesMetadata Parse error",n)}return t},[e]),s=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.seriesMetadata||"[]")}catch(n){console.log("seriesMetadata Parse error",n)}return t},[e]),o=i.forwardRef((t,n)=>d(a,{...t,ref:n,seriesMetadata:s,sidebarCategoriesMetadata:r}));return o.displayName=a.displayName||a.name||"WithSidebarDropdown",o}function p(a,{categoriesItem:e,currentNavItemRef:r}){const s=u(()=>e?.components?.[0]?.supports,[e]),o=i.forwardRef((t,n)=>d(a,{...t,supportsMetadata:s,currentNavItemRef:r,ref:n}));return o.displayName=a.displayName||a.name||"WithSupportsDropdown",o}function y(a,e){const r=u(()=>{try{return JSON.parse(e?.components?.[0]?.multicol?.multicolMetadata||"{}")}catch(o){console.log("multicolMetadata Parse error",o)}return null},[e]),s=i.forwardRef((o,t)=>d(a,{...o,ref:t,multicolMetadata:r}));return s.displayName=a.displayName||a.name||"WithMulticolDropdown",s}function M(a){return a?Object.values(a?.reduce((e,r)=>(e[r.group]||(e[r.group]=[]),e[r.group].push(r),e),{})):[[]]}export{M as WithGroupCategory,y as WithMulticol,c as WithSidebar,p as WithSupports};
 //# sourceMappingURL=withCategory.js.map

package/dist/esm/biz-components/HeaderNavigation/withCategory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/withCategory.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\n\nexport function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  // \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n  const sidebarCategoriesMetadata = useMemo(() => {\n    let categoriesMetadata = null\n    try {\n      categoriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.categoriesMetadata || '{}')\n    } catch (error) {\n      console.log('categoriesMetadata Parse error', error)\n    }\n    return categoriesMetadata\n  }, [categoriesItem])\n\n  // \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n  const seriesMetadata = useMemo(() => {\n    let seriesMetadata = null\n    try {\n      seriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.seriesMetadata || '[]')\n    } catch (error) {\n      console.log('seriesMetadata Parse error', error)\n    }\n    return seriesMetadata\n  }, [categoriesItem])\n\n  const withSidebarDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        ref={ref}\n        seriesMetadata={seriesMetadata}\n        sidebarCategoriesMetadata={sidebarCategoriesMetadata}\n      />\n    )\n  })\n\n  withSidebarDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSidebarDropdown'\n  return withSidebarDropdown\n}\n\nexport function WithSupports<P extends object>(\n  WrappedComponent: React.ComponentType<any>,\n  {\n    categoriesItem,\n    currentNavItemRef,\n    onMouseLeave,\n  }: { categoriesItem: any; currentNavItemRef?: any; onMouseLeave?: () => void }\n) {\n  const supportsMetadata = useMemo(() => {\n    return categoriesItem?.components?.[0]?.supports\n  }, [categoriesItem])\n\n  const supportsDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        supportsMetadata={supportsMetadata}\n        currentNavItemRef={currentNavItemRef}\n        onMouseLeave={onMouseLeave}\n        ref={ref}\n      />\n    )\n  })\n\n  supportsDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSupportsDropdown'\n  return supportsDropdown\n}\n\nexport function WithMulticol<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  const multicolMetadata = useMemo(() => {\n    try {\n      return JSON.parse(categoriesItem?.components?.[0]?.multicol?.multicolMetadata || '{}')\n    } catch (error) {\n      console.log('multicolMetadata Parse error', error)\n    }\n    return null\n  }, [categoriesItem])\n  const multicolDropdown = React.forwardRef<any, P>((props, ref) => {\n    return <WrappedComponent {...(props as unknown as P)} ref={ref} multicolMetadata={multicolMetadata} />\n  })\n\n  multicolDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithMulticolDropdown'\n  return multicolDropdown\n}\n\nexport function WithGroupCategory(categories: any) {\n  if (!categories) return [[]]\n  return Object.values(\n    categories?.reduce((acc: any, item: any) => {\n      if (!acc[item.group]) {\n        acc[item.group] = []\n      }\n      acc[item.group].push(item)\n      return acc\n    }, {})\n  )\n}\n"],
-  "mappings": "AA2BM,cAAAA,MAAA,oBA3BN,OAAOC,GAAS,WAAAC,MAAe,QAExB,SAASC,EAA8BC,EAA4CC,EAAqB,CAE7G,MAAMC,EAA4BJ,EAAQ,IAAM,CAC9C,IAAIK,EAAqB,KACzB,GAAI,CACFA,EAAqB,KAAK,MAAMF,GAAgB,aAAa,CAAC,GAAG,SAAS,oBAAsB,IAAI,CACtG,OAASG,EAAO,CACd,QAAQ,IAAI,iCAAkCA,CAAK,CACrD,CACA,OAAOD,CACT,EAAG,CAACF,CAAc,CAAC,EAGbI,EAAiBP,EAAQ,IAAM,CACnC,IAAIO,EAAiB,KACrB,GAAI,CACFA,EAAiB,KAAK,MAAMJ,GAAgB,aAAa,CAAC,GAAG,SAAS,gBAAkB,IAAI,CAC9F,OAASG,EAAO,CACd,QAAQ,IAAI,6BAA8BA,CAAK,CACjD,CACA,OAAOC,CACT,EAAG,CAACJ,CAAc,CAAC,EAEbK,EAAsBT,EAAM,WAAmB,CAACU,EAAOC,IAEzDZ,EAACI,EAAA,CACE,GAAIO,EACL,IAAKC,EACL,eAAgBH,EAChB,0BAA2BH,EAC7B,CAEH,EAED,OAAAI,EAAoB,YAAcN,EAAiB,aAAeA,EAAiB,MAAQ,sBACpFM,CACT,CAEO,SAASG,EACdT,EACA,CACE,eAAAC,EACA,kBAAAS,EACA,aAAAC,CACF,EACA,CACA,MAAMC,EAAmBd,EAAQ,IACxBG,GAAgB,aAAa,CAAC,GAAG,SACvC,CAACA,CAAc,CAAC,EAEbY,EAAmBhB,EAAM,WAAmB,CAACU,EAAOC,IAEtDZ,EAACI,EAAA,CACE,GAAIO,EACL,iBAAkBK,EAClB,kBAAmBF,EACnB,aAAcC,EACd,IAAKH,EACP,CAEH,EAED,OAAAK,EAAiB,YAAcb,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFa,CACT,CAEO,SAASC,EAA+Bd,EAA4CC,EAAqB,CAC9G,MAAMc,EAAmBjB,EAAQ,IAAM,CACrC,GAAI,CACF,OAAO,KAAK,MAAMG,GAAgB,aAAa,CAAC,GAAG,UAAU,kBAAoB,IAAI,CACvF,OAASG,EAAO,CACd,QAAQ,IAAI,+BAAgCA,CAAK,CACnD,CACA,OAAO,IACT,EAAG,CAACH,CAAc,CAAC,EACbe,EAAmBnB,EAAM,WAAmB,CAACU,EAAOC,IACjDZ,EAACI,EAAA,CAAkB,GAAIO,EAAwB,IAAKC,EAAK,iBAAkBO,EAAkB,CACrG,EAED,OAAAC,EAAiB,YAAchB,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFgB,CACT,CAEO,SAASC,EAAkBC,EAAiB,CACjD,OAAKA,EACE,OAAO,OACZA,GAAY,OAAO,CAACC,EAAUC,KACvBD,EAAIC,EAAK,KAAK,IACjBD,EAAIC,EAAK,KAAK,EAAI,CAAC,GAErBD,EAAIC,EAAK,KAAK,EAAE,KAAKA,CAAI,EAClBD,GACN,CAAC,CAAC,CACP,EATwB,CAAC,CAAC,CAAC,CAU7B",
-  "names": ["jsx", "React", "useMemo", "WithSidebar", "WrappedComponent", "categoriesItem", "sidebarCategoriesMetadata", "categoriesMetadata", "error", "seriesMetadata", "withSidebarDropdown", "props", "ref", "WithSupports", "currentNavItemRef", "onMouseLeave", "supportsMetadata", "supportsDropdown", "WithMulticol", "multicolMetadata", "multicolDropdown", "WithGroupCategory", "categories", "acc", "item"]
+  "sourcesContent": ["import React, { useMemo } from 'react'\n\nexport function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  // \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n  const sidebarCategoriesMetadata = useMemo(() => {\n    let categoriesMetadata = null\n    try {\n      categoriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.categoriesMetadata || '{}')\n    } catch (error) {\n      console.log('categoriesMetadata Parse error', error)\n    }\n    return categoriesMetadata\n  }, [categoriesItem])\n\n  // \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n  const seriesMetadata = useMemo(() => {\n    let seriesMetadata = null\n    try {\n      seriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.seriesMetadata || '[]')\n    } catch (error) {\n      console.log('seriesMetadata Parse error', error)\n    }\n    return seriesMetadata\n  }, [categoriesItem])\n\n  const withSidebarDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        ref={ref}\n        seriesMetadata={seriesMetadata}\n        sidebarCategoriesMetadata={sidebarCategoriesMetadata}\n      />\n    )\n  })\n\n  withSidebarDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSidebarDropdown'\n  return withSidebarDropdown\n}\n\nexport function WithSupports<P extends object>(\n  WrappedComponent: React.ComponentType<any>,\n  {\n    categoriesItem,\n    currentNavItemRef,\n  }: { categoriesItem: any; currentNavItemRef?: any; onMouseLeave?: () => void }\n) {\n  const supportsMetadata = useMemo(() => {\n    return categoriesItem?.components?.[0]?.supports\n  }, [categoriesItem])\n\n  const supportsDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        supportsMetadata={supportsMetadata}\n        currentNavItemRef={currentNavItemRef}\n        ref={ref}\n      />\n    )\n  })\n\n  supportsDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSupportsDropdown'\n  return supportsDropdown\n}\n\nexport function WithMulticol<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  const multicolMetadata = useMemo(() => {\n    try {\n      return JSON.parse(categoriesItem?.components?.[0]?.multicol?.multicolMetadata || '{}')\n    } catch (error) {\n      console.log('multicolMetadata Parse error', error)\n    }\n    return null\n  }, [categoriesItem])\n  const multicolDropdown = React.forwardRef<any, P>((props, ref) => {\n    return <WrappedComponent {...(props as unknown as P)} ref={ref} multicolMetadata={multicolMetadata} />\n  })\n\n  multicolDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithMulticolDropdown'\n  return multicolDropdown\n}\n\nexport function WithGroupCategory(categories: any) {\n  if (!categories) return [[]]\n  return Object.values(\n    categories?.reduce((acc: any, item: any) => {\n      if (!acc[item.group]) {\n        acc[item.group] = []\n      }\n      acc[item.group].push(item)\n      return acc\n    }, {})\n  )\n}\n"],
+  "mappings": "AA2BM,cAAAA,MAAA,oBA3BN,OAAOC,GAAS,WAAAC,MAAe,QAExB,SAASC,EAA8BC,EAA4CC,EAAqB,CAE7G,MAAMC,EAA4BJ,EAAQ,IAAM,CAC9C,IAAIK,EAAqB,KACzB,GAAI,CACFA,EAAqB,KAAK,MAAMF,GAAgB,aAAa,CAAC,GAAG,SAAS,oBAAsB,IAAI,CACtG,OAASG,EAAO,CACd,QAAQ,IAAI,iCAAkCA,CAAK,CACrD,CACA,OAAOD,CACT,EAAG,CAACF,CAAc,CAAC,EAGbI,EAAiBP,EAAQ,IAAM,CACnC,IAAIO,EAAiB,KACrB,GAAI,CACFA,EAAiB,KAAK,MAAMJ,GAAgB,aAAa,CAAC,GAAG,SAAS,gBAAkB,IAAI,CAC9F,OAASG,EAAO,CACd,QAAQ,IAAI,6BAA8BA,CAAK,CACjD,CACA,OAAOC,CACT,EAAG,CAACJ,CAAc,CAAC,EAEbK,EAAsBT,EAAM,WAAmB,CAACU,EAAOC,IAEzDZ,EAACI,EAAA,CACE,GAAIO,EACL,IAAKC,EACL,eAAgBH,EAChB,0BAA2BH,EAC7B,CAEH,EAED,OAAAI,EAAoB,YAAcN,EAAiB,aAAeA,EAAiB,MAAQ,sBACpFM,CACT,CAEO,SAASG,EACdT,EACA,CACE,eAAAC,EACA,kBAAAS,CACF,EACA,CACA,MAAMC,EAAmBb,EAAQ,IACxBG,GAAgB,aAAa,CAAC,GAAG,SACvC,CAACA,CAAc,CAAC,EAEbW,EAAmBf,EAAM,WAAmB,CAACU,EAAOC,IAEtDZ,EAACI,EAAA,CACE,GAAIO,EACL,iBAAkBI,EAClB,kBAAmBD,EACnB,IAAKF,EACP,CAEH,EAED,OAAAI,EAAiB,YAAcZ,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFY,CACT,CAEO,SAASC,EAA+Bb,EAA4CC,EAAqB,CAC9G,MAAMa,EAAmBhB,EAAQ,IAAM,CACrC,GAAI,CACF,OAAO,KAAK,MAAMG,GAAgB,aAAa,CAAC,GAAG,UAAU,kBAAoB,IAAI,CACvF,OAASG,EAAO,CACd,QAAQ,IAAI,+BAAgCA,CAAK,CACnD,CACA,OAAO,IACT,EAAG,CAACH,CAAc,CAAC,EACbc,EAAmBlB,EAAM,WAAmB,CAACU,EAAOC,IACjDZ,EAACI,EAAA,CAAkB,GAAIO,EAAwB,IAAKC,EAAK,iBAAkBM,EAAkB,CACrG,EAED,OAAAC,EAAiB,YAAcf,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFe,CACT,CAEO,SAASC,EAAkBC,EAAiB,CACjD,OAAKA,EACE,OAAO,OACZA,GAAY,OAAO,CAACC,EAAUC,KACvBD,EAAIC,EAAK,KAAK,IACjBD,EAAIC,EAAK,KAAK,EAAI,CAAC,GAErBD,EAAIC,EAAK,KAAK,EAAE,KAAKA,CAAI,EAClBD,GACN,CAAC,CAAC,CACP,EATwB,CAAC,CAAC,CAAC,CAU7B",
+  "names": ["jsx", "React", "useMemo", "WithSidebar", "WrappedComponent", "categoriesItem", "sidebarCategoriesMetadata", "categoriesMetadata", "error", "seriesMetadata", "withSidebarDropdown", "props", "ref", "WithSupports", "currentNavItemRef", "supportsMetadata", "supportsDropdown", "WithMulticol", "multicolMetadata", "multicolDropdown", "WithGroupCategory", "categories", "acc", "item"]
 }

package/dist/esm/biz-components/Listing/ProductProvider.d.ts

@@ -0,0 +1,52 @@
+import React, { type Dispatch, type SetStateAction, type PropsWithChildren } from 'react';
+import type { Product, ProductPrice, ProductVariant, VariantCoupon, Options, FreeGift, BundleListItem, Bundle } from './types/product';
+import type { CompareData } from './types.js';
+export type SavingDetail = {
+    coupon: number;
+    bundle: number;
+    member: number;
+    freeGift: number;
+    compare: number;
+};
+type variantWithFinalPrice = ProductVariant & {
+    finalPrice?: ProductPrice;
+};
+export interface ProductContextType {
+    isLogin?: boolean;
+    isMobile?: boolean;
+    isDesktop?: boolean;
+    product: Product;
+    variant: ProductVariant;
+    selectedVariants: Array<variantWithFinalPrice>;
+    renderRating?: React.ReactNode;
+    coupon?: VariantCoupon;
+    savingDetail: SavingDetail;
+    finalPrice: number;
+    comparePrice: number;
+    totalSavings: number;
+    selectedOptions: Options;
+    setSelectedOptions: Dispatch<SetStateAction<Options>>;
+    freeGift?: FreeGift;
+    checkedGift?: ProductVariant;
+    setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>;
+    checkedBundle?: BundleListItem;
+    setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>;
+    joinedRecommendBuyProducts: {
+        bundle?: BundleListItem;
+        gift?: ProductVariant;
+    };
+    setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<{
+        bundle?: BundleListItem;
+        gift?: ProductVariant;
+    }>>;
+    checkedCareBundle?: ProductVariant;
+    setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>;
+    bundle?: Bundle;
+    compareData?: CompareData['data'];
+    onAddToCart?: () => void;
+    onBuyNow?: () => void;
+}
+export declare const ProductContext: React.Context<ProductContextType>;
+export declare const useProductContext: () => ProductContextType;
+declare const ProductProvider: ({ product, isLogin, isMobile, isDesktop, children, renderRating, freeGift, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, selectedVariants, onAddToCart, onBuyNow, }: PropsWithChildren<Omit<ProductContextType, "joinedRecommendBuyProducts" | "setJoinedRecommendBuyProducts">>) => import("react/jsx-runtime").JSX.Element;
+export default ProductProvider;

package/dist/esm/biz-components/Listing/ProductProvider.js

@@ -0,0 +1,2 @@
+import{jsx as G}from"react/jsx-runtime";import{createContext as k,useContext as o,useState as A}from"react";const e=k({}),F=()=>{if(!o(e))throw new Error("useProductContext must be used in <ProductProvider>");return o(e)},L=({product:t,isLogin:n,isMobile:r,isDesktop:i,children:d,renderRating:a,freeGift:c,bundle:u,checkedBundle:s,checkedGift:p,setCheckedBundle:P,setCheckedGift:m,variant:l,selectedOptions:f,setSelectedOptions:C,compareData:b,coupon:y,finalPrice:h,comparePrice:B,totalSavings:S,savingDetail:x,selectedVariants:v,onAddToCart:D,onBuyNow:V})=>{const[g,R]=A({bundle:void 0,gift:void 0});return G(e.Provider,{value:{product:t,variant:l,isMobile:r,isDesktop:i,isLogin:n,coupon:y,renderRating:a,finalPrice:h,comparePrice:B,savingDetail:x,totalSavings:S,selectedOptions:f,setSelectedOptions:C,freeGift:c,checkedGift:p,setCheckedGift:m,checkedBundle:s,setCheckedBundle:P,bundle:u,compareData:b,selectedVariants:v,onAddToCart:D,onBuyNow:V,joinedRecommendBuyProducts:g,setJoinedRecommendBuyProducts:R},children:d})};var W=L;export{e as ProductContext,W as default,F as useProductContext};
+//# sourceMappingURL=ProductProvider.js.map

package/dist/esm/biz-components/Listing/ProductProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Listing/ProductProvider.tsx"],
+  "sourcesContent": ["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type PropsWithChildren,\n  useState,\n} from 'react'\nimport type {\n  Product,\n  ProductPrice,\n  ProductVariant,\n  VariantCoupon,\n  Options,\n  FreeGift,\n  BundleListItem,\n  Bundle,\n} from './types/product'\nimport type { CompareData } from './types.js'\n\nexport type SavingDetail = { coupon: number; bundle: number; member: number; freeGift: number; compare: number }\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\nexport interface ProductContextType {\n  isLogin?: boolean\n  isMobile?: boolean\n  isDesktop?: boolean\n  product: Product\n  variant: ProductVariant\n  selectedVariants: Array<variantWithFinalPrice>\n  renderRating?: React.ReactNode\n  coupon?: VariantCoupon\n  savingDetail: SavingDetail\n  finalPrice: number\n  comparePrice: number\n  totalSavings: number\n  selectedOptions: Options\n  setSelectedOptions: Dispatch<SetStateAction<Options>>\n  freeGift?: FreeGift\n  checkedGift?: ProductVariant\n  setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  checkedBundle?: BundleListItem\n  setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n  // productSummaryStatus: {\n  //   bundleSummary: boolean\n  //   giftSummary: boolean\n  // }\n  joinedRecommendBuyProducts: { bundle?: BundleListItem; gift?: ProductVariant }\n  setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<{ bundle?: BundleListItem; gift?: ProductVariant }>>\n  // setProductSummaryStatus?: Dispatch<SetStateAction<{ bundleSummary: boolean; giftSummary: boolean }>>\n  checkedCareBundle?: ProductVariant\n  setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  bundle?: Bundle\n  compareData?: CompareData['data']\n  onAddToCart?: () => void\n  onBuyNow?: () => void\n}\n\n// const initialState: ProductContextType = {\n//   isLogin: false,\n//   isMobile: false,\n//   product: {} as Product,\n//   variant: {} as ProductVariant,\n//   savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n//   finalPrice: 0,\n//   comparePrice: 0,\n//   totalSavings: 0,\n//   renderRating: null,\n//   selectedOptions: {} as Options,\n//   setSelectedOptions: () => {},\n//   checkedBundle: undefined,\n//   checkedGift: undefined,\n//   setCheckedBundle: () => {},\n//   setCheckedGift: () => {},\n//   checkedCareBundle: undefined,\n//   setCheckedCareBundle: () => {},\n// }\n\nexport const ProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useProductContext = () => {\n  const context = useContext(ProductContext)\n  if (!context) {\n    throw new Error('useProductContext must be used in <ProductProvider>')\n  }\n  return useContext(ProductContext)\n}\n\nconst ProductProvider = ({\n  product,\n  isLogin,\n  isMobile,\n  isDesktop,\n  children,\n  renderRating,\n  freeGift,\n  bundle,\n  checkedBundle,\n  checkedGift,\n  setCheckedBundle,\n  setCheckedGift,\n  variant,\n  selectedOptions,\n  setSelectedOptions,\n  compareData,\n  coupon,\n  finalPrice,\n  comparePrice,\n  totalSavings,\n  savingDetail,\n  selectedVariants,\n  onAddToCart,\n  onBuyNow,\n}: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts'>>) => {\n  const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<{ bundle?: BundleListItem; gift?: ProductVariant }>({\n    bundle: undefined,\n    gift: undefined,\n  })\n  return (\n    <ProductContext.Provider\n      value={{\n        product,\n        variant,\n        isMobile,\n        isDesktop,\n        isLogin,\n        coupon,\n        renderRating,\n        finalPrice,\n        comparePrice,\n        savingDetail,\n        totalSavings,\n        selectedOptions,\n        setSelectedOptions,\n        freeGift,\n        checkedGift,\n        setCheckedGift,\n        checkedBundle,\n        setCheckedBundle,\n        bundle,\n        compareData,\n        selectedVariants,\n        onAddToCart,\n        onBuyNow,\n        joinedRecommendBuyProducts,\n        setJoinedRecommendBuyProducts,\n      }}\n    >\n      {children}\n    </ProductContext.Provider>\n  )\n}\n\nexport default ProductProvider\n"],
+  "mappings": "AAwHI,cAAAA,MAAA,oBAxHJ,OACE,iBAAAC,EAEA,cAAAC,EAIA,YAAAC,MACK,QAuEA,MAAMC,EAAiBH,EAAkC,CAAC,CAAuB,EAE3EI,EAAoB,IAAM,CAErC,GAAI,CADYH,EAAWE,CAAc,EAEvC,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOF,EAAWE,CAAc,CAClC,EAEME,EAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,CACF,IAAmH,CACjH,KAAM,CAACC,EAA4BC,CAA6B,EAAI7B,EAA6D,CAC/H,OAAQ,OACR,KAAM,MACR,CAAC,EACD,OACEH,EAACI,EAAe,SAAf,CACC,MAAO,CACL,QAAAG,EACA,QAAAY,EACA,SAAAV,EACA,UAAAC,EACA,QAAAF,EACA,OAAAe,EACA,aAAAX,EACA,WAAAY,EACA,aAAAC,EACA,aAAAE,EACA,aAAAD,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAR,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAQ,EACA,iBAAAM,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAC,EACA,8BAAAC,CACF,EAEC,SAAArB,EACH,CAEJ,EAEA,IAAOsB,EAAQ3B",
+  "names": ["jsx", "createContext", "useContext", "useState", "ProductContext", "useProductContext", "ProductProvider", "product", "isLogin", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "ProductProvider_default"]
+}

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

@@ -0,0 +1,5 @@
+import type { ProductBenefitsTabsProps } from '../types.js';
+import 'swiper/css/pagination';
+import 'swiper/css';
+declare const ProductBenefitsTabs: ({ data }: ProductBenefitsTabsProps) => import("react/jsx-runtime").JSX.Element;
+export default ProductBenefitsTabs;

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: ({ children, className, ...props }: BenefitsTabsListProps) => import("react/jsx-runtime").JSX.Element;
+    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 s,jsxs as H}from"react/jsx-runtime";import{Text as u}from"../../../../../../components/index.js";import{createContext as g,useContext as B,useState as m}from"react";import{cn as i}from"../../../../../../helpers/index.js";import{Content as v,List as x,Root as L,Trigger as C}from"@radix-ui/react-tabs";const T=g(void 0),P=()=>{const e=B(T);if(!e)throw new Error("ProductBenefitsTabs components must be used within ProductBenefitsTabs");return e},a=({defaultValue:e,value:t,onValueChange:n,children:r,className:o,...l})=>{const[b,p]=m(e),c=t??b,d=f=>{t===void 0&&p(f),n?.(f)};return s(T.Provider,{value:{activeValue:c,setActiveValue:d},children:s("div",{id:"ipc-product-detail-benefits-tabs",className:i("bg-[#EAEAEC] rounded-xl py-4",o),...l,children:s(L,{value:c,onValueChange:d,children:r})})})},h=({children:e,className:t,...n})=>s(x,{className:i("flex space-x-6 overflow-x-auto px-4",t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...n,children:e}),N=({value:e,children:t,className:n,...r})=>{const{activeValue:o}=P(),l=o===e;return H(C,{value:e,className:i("text-base whitespace-nowrap relative leading-[1.4] font-bold pb-4 text-[#6D6D6F]",n),...r,children:[s(u,{className:i("absolute bottom-0 z-10 left-0 h-[2px] w-0 bg-info-primary transition-all duration-300",l&&"w-full")}),t]})},w=({children:e,className:t,...n})=>s(u,{size:1,className:i("font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-[#FF5900]",t),...n,children:e}),A=({value:e,children:t,className:n,...r})=>s(v,{value:e,className:i("mt-4",n),...r,children:t});a.displayName="ProductBenefitsTabs",a.List=h,a.Trigger=N,a.Badge=w,a.Content=A;var R=a;export{R 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 { createContext, useContext, useState, type ReactNode, type HTMLAttributes } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\n\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-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 = ({ children, className, ...props }: BenefitsTabsListProps) => {\n  return (\n    <List\n      className={cn(\"flex space-x-6 overflow-x-auto px-4\", className)}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\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-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(\n        \"font-bold ml-1 !whitespace-nowrap rounded-full px-2 py-1 text-white bg-[#FF5900]\",\n        className\n      )}\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 \n      value={value} \n      className={cn(\"mt-4\", className)}\n      {...props}\n    >\n      {children}\n    </Content>\n  )\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": "AAuDQ,cAAAA,EAuCJ,QAAAC,MAvCI,oBAvDR,OAAS,QAAAC,MAAY,wCACrB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,YAAAC,MAAqD,QACzF,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,EAAM,WAAAC,MAAe,uBAS7C,MAAMC,EAAsBR,EAAmD,MAAS,EAElFS,EAAyB,IAAM,CACnC,MAAMC,EAAUT,EAAWO,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,EAAIjB,EAASU,CAAY,EAEzDQ,EAAcP,GAASK,EACvBG,EAAkBC,GAAqB,CACvCT,IAAU,QACZM,EAAiBG,CAAQ,EAE3BR,IAAgBQ,CAAQ,CAC1B,EAEA,OACEzB,EAACW,EAAoB,SAApB,CAA6B,MAAO,CAAE,YAAAY,EAAa,eAAAC,CAAe,EACjE,SAAAxB,EAAC,OACC,GAAG,mCACH,UAAWM,EAAG,+BAAgCa,CAAS,EACtD,GAAGC,EAEJ,SAAApB,EAACS,EAAA,CAAK,MAAOc,EAAa,cAAeC,EACtC,SAAAN,EACH,EACF,EACF,CAEJ,EAOMQ,EAAmB,CAAC,CAAE,SAAAR,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEtDpB,EAACQ,EAAA,CACC,UAAWF,EAAG,sCAAuCa,CAAS,EAC9D,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGC,EAEH,SAAAF,EACH,EAUES,EAAsB,CAAC,CAAE,MAAAX,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAAgC,CAClG,KAAM,CAAE,YAAAG,CAAY,EAAIX,EAAuB,EACzCgB,EAAWL,IAAgBP,EAEjC,OACEf,EAACS,EAAA,CACC,MAAOM,EACP,UAAWV,EACT,mFACAa,CACF,EACC,GAAGC,EAEJ,UAAApB,EAACE,EAAA,CACC,UAAWI,EACT,wFACAsB,GAAY,QACd,EACF,EACCV,GACH,CAEJ,EAOMW,EAAoB,CAAC,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEvDpB,EAACE,EAAA,CACC,KAAM,EACN,UAAWI,EACT,mFACAa,CACF,EACC,GAAGC,EAEH,SAAAF,EACH,EAUEY,EAAsB,CAAC,CAAE,MAAAd,EAAO,SAAAE,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAEhEpB,EAACO,EAAA,CACC,MAAOS,EACP,UAAWV,EAAG,OAAQa,CAAS,EAC9B,GAAGC,EAEH,SAAAF,EACH,EAKJJ,EAAoB,YAAc,sBAGlCA,EAAoB,KAAOY,EAC3BZ,EAAoB,QAAUa,EAC9Bb,EAAoB,MAAQe,EAC5Bf,EAAoB,QAAUgB,EAE9B,IAAOC,EAAQjB",
+  "names": ["jsx", "jsxs", "Text", "createContext", "useContext", "useState", "cn", "Content", "List", "Root", "Trigger", "BenefitsTabsContext", "useBenefitsTabsContext", "context", "ProductBenefitsTabs", "defaultValue", "value", "onValueChange", "children", "className", "props", "internalValue", "setInternalValue", "activeValue", "setActiveValue", "newValue", "BenefitsTabsList", "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 r,Picture as g,Checkbox as C}from"../../../../../../components";import{cn as N}from"../../../../../../helpers/index.js";import{useAiuiContext as B}from"../../../../../AiuiProvider";import{useProductContext as b}from"../../../../ProductProvider";import{formatPrice as m}from"../../../../utils";const P=()=>{const{locale:l="us"}=B(),{variant:u,bundle:f,checkedBundle:s,setCheckedBundle:d,setCheckedGift:x,setJoinedRecommendBuyProducts:c,joinedRecommendBuyProducts:n}=b(),{title:v,bundleList:h,showAtListing:k}=f||{},p=h?.filter(e=>e.variants.slice(1,e.variants.length).every(a=>a.variant.availableForSale));if(!p?.length&&k)return null;const y=e=>{s?.id===e.id?(d?.(void 0),c?.({...n,bundle:void 0})):(x?.(void 0),d?.(e),c?.({...n,bundle:e}))};return o("div",{className:"ipc-product-detail-bundle",children:[i(r,{size:3,className:"font-bold",html:v}),p?.map(e=>{const a=e.variants.filter(t=>t.variant.sku!==u.sku);return i("div",{className:"flex flex-col gap-4 mt-3 desktop:mt-4",children:o("div",{className:N("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border",{"border-brand outline outline-1 outline-brand":s?.id===e.id}),children:[i(C,{onCheckedChange:()=>y(e),size:"lg",id:e.id,value:e.id,checked:s?.id===e.id}),i("label",{htmlFor:e.id,className:"size-full cursor-pointer",children:a?.map(t=>o("div",{className:"flex justify-between items-center gap-6 ",children:[o("div",{className:"flex items-center gap-2",children:[i(g,{source:t?.variant?.image?.url,className:"size-12 flex-shrink-0"}),i(r,{className:"text-sm laptop:text-[16px] laptop:text-[20px] 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(r,{className:"text-base laptop:text-[20px] desktop:text-2xl font-bold",html:m({amount:t.price,locale:l,currencyCode:t.variant.price.currencyCode})}),t.price<t.variant.price.amount&&i(r,{className:"text-base laptop:text-[20px] 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 A=P;export{A 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 { useProductContext } from '../../../../ProductProvider'\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    setJoinedRecommendBuyProducts,\n    joinedRecommendBuyProducts,\n  } = useProductContext()\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?.({ ...joinedRecommendBuyProducts, bundle: undefined })\n    } else {\n      setCheckedGift?.(undefined)\n      setCheckedBundle?.(bundleItem)\n      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, bundle: bundleItem })\n    }\n  }\n\n  return (\n    <div className=\"ipc-product-detail-bundle\">\n      <Text size={3} className=\"font-bold\" html={title} />\n      {availableBundleList?.map(bundle => {\n        const bundleVariants = bundle.variants.filter(v => v.variant.sku !== variant.sku)\n        return (\n          <div key={bundle.id} className=\"flex flex-col gap-4 mt-3 desktop:mt-4\">\n            <div\n              className={cn(\n                'flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border',\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                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] laptop:text-[20px] 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] 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] 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  )\n}\n\nexport default ProductBundle\n"],
+  "mappings": "AAwCM,cAAAA,EAwBgB,QAAAC,MAxBhB,oBAxCN,OAAS,QAAAC,EAAM,WAAAC,EAAiB,YAAAC,MAAgB,+BAChD,OAAS,MAAAC,MAAU,qCACnB,OAAS,kBAAAC,MAAsB,8BAC/B,OAAS,qBAAAC,MAAyB,8BAClC,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,8BAAAC,EACA,2BAAAC,CACF,EAAIV,EAAkB,EAEhB,CAAE,MAAAW,EAAO,WAAAC,EAAY,cAAAC,CAAc,EAAIR,GAAU,CAAC,EAElDS,EAAsBF,GAAY,OAAOP,GAC7CA,EAAO,SAAS,MAAM,EAAGA,EAAO,SAAS,MAAM,EAAE,MAAMU,GAAKA,EAAE,QAAQ,gBAAgB,CACxF,EAEA,GAAI,CAACD,GAAqB,QAAUD,EAAe,OAAO,KAE1D,MAAMG,EAAwBC,GAA+B,CACvDX,GAAe,KAAOW,EAAW,IACnCV,IAAmB,MAAS,EAC5BE,IAAgC,CAAE,GAAGC,EAA4B,OAAQ,MAAU,CAAC,IAEpFF,IAAiB,MAAS,EAC1BD,IAAmBU,CAAU,EAC7BR,IAAgC,CAAE,GAAGC,EAA4B,OAAQO,CAAW,CAAC,EAEzF,EAEA,OACEvB,EAAC,OAAI,UAAU,4BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMgB,EAAO,EACjDG,GAAqB,IAAIT,GAAU,CAClC,MAAMa,EAAiBb,EAAO,SAAS,OAAOU,GAAKA,EAAE,QAAQ,MAAQX,EAAQ,GAAG,EAChF,OACEX,EAAC,OAAoB,UAAU,wCAC7B,SAAAC,EAAC,OACC,UAAWI,EACT,4FACA,CACG,+CAAiDQ,GAAe,KAAOD,EAAO,EACjF,CACF,EAEA,UAAAZ,EAACI,EAAA,CACC,gBAAiB,IAAMmB,EAAqBX,CAAM,EAClD,KAAK,KACL,GAAIA,EAAO,GACX,MAAOA,EAAO,GACd,QAASC,GAAe,KAAOD,EAAO,GACxC,EACAZ,EAAC,SAAM,QAASY,EAAO,GAAI,UAAU,2BAClC,SAAAa,GAAgB,IAAIC,GAEjBzB,EAAC,OAAI,UAAU,2CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQuB,GAAe,SAAS,OAAO,IAAK,UAAU,wBAAwB,EACvF1B,EAACE,EAAA,CACC,UAAU,8EACV,KAAMwB,EAAc,QAAQ,QAAQ,MACtC,GACF,EACAzB,EAAC,OAAI,UAAU,yEACb,UAAAD,EAACE,EAAA,CACC,UAAU,0DACV,KAAMM,EAAY,CAChB,OAAQkB,EAAc,MACtB,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,EACCA,EAAc,MAAQA,EAAc,QAAQ,MAAM,QACjD1B,EAACE,EAAA,CACC,UAAU,sFACV,KAAMM,EAAY,CAChB,OAAQkB,EAAc,QAAQ,MAAM,OACpC,OAAAhB,EACA,aAAcgB,EAAc,QAAQ,MAAM,YAC5C,CAAC,EACH,GAEJ,IA3B6DA,EAAc,QAAQ,EA4BrF,CAEH,EACH,GACF,GAnDQd,EAAO,EAoDjB,CAEJ,CAAC,GACH,CAEJ,EAEA,IAAOe,EAAQlB",
+  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useAiuiContext", "useProductContext", "formatPrice", "ProductBundle", "locale", "variant", "bundle", "checkedBundle", "setCheckedBundle", "setCheckedGift", "setJoinedRecommendBuyProducts", "joinedRecommendBuyProducts", "title", "bundleList", "showAtListing", "availableBundleList", "v", "handleSelectedChange", "bundleItem", "bundleVariants", "bundleVariant", "ProductBundle_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 b,Checkbox as h}from"../../../../../../components";import{cn as k}from"../../../../../../helpers/index.js";import{useMemo as C}from"react";import{useProductContext as v}from"../../../../ProductProvider";import{formatPrice as N}from"../../../../utils";import{useAiuiContext as y}from"../../../../../AiuiProvider";const P=()=>{const{locale:n="us"}=y(),{freeGift:m,checkedGift:d,setCheckedGift:i,setCheckedBundle:p,setJoinedRecommendBuyProducts:r,joinedRecommendBuyProducts:a}=v(),{title:u,giftList:s=[],freeLabel:f}=m||{},c=C(()=>s?.filter(e=>e.availableForSale),[s]),x=e=>{d?.id===e.id?(i?.(void 0),r?.({...a,gift:void 0})):(p?.(void 0),i?.(e),r?.({...a,gift:e}))};return c?.length?o("div",{className:"ipc-product-detail-free-gift",children:[t(l,{size:3,className:"font-bold",html:u}),t("div",{className:"mt-3 flex flex-col gap-4 desktop:mt-4",children:c.map(e=>o("div",{className:k("flex items-center gap-2 text-left font-bold px-4 py-6 rounded-2xl border-[#E4E5E6] border-2",{"border-brand":d?.id===e.id}),children:[t(h,{onCheckedChange:()=>x(e),size:"lg",id:e.id,checked:d?.id===e.id,value:e.id}),o("label",{htmlFor:e.id,className:"flex justify-between items-center gap-4 laptop:gap-0 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(l,{className:"text-sm laptop:text-[16px] 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] desktop:text-2xl font-bold",html:f}),t(l,{className:"text-base laptop:text-[20px] desktop:text-2xl font-bold line-through",html:N({amount:e.price.amount,locale:n,currencyCode:e.price.currencyCode})})]})]})]},e.id))})]}):null};var V=P;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 { useProductContext } from '../../../../ProductProvider'\nimport { formatPrice } from '../../../../utils'\nimport { useAiuiContext } from '../../../../../AiuiProvider'\nimport type { ProductVariant } from '../../../../types/product'\n\nconst ProductFreeGift = () => {\n  const { locale = 'us' } = useAiuiContext()\n  const { freeGift, checkedGift, setCheckedGift, setCheckedBundle, setJoinedRecommendBuyProducts, joinedRecommendBuyProducts } = useProductContext()\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      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, gift: undefined })\n    } else {\n      setCheckedBundle?.(undefined)\n      setCheckedGift?.(value)\n      setJoinedRecommendBuyProducts?.({ ...joinedRecommendBuyProducts, 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=\"mt-3 flex flex-col gap-4 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-2xl 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              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 laptop:gap-0 w-full\">\n              <div className=\"flex items-center gap-2\">\n                <Picture source={gift.image?.url} className=\"size-12 flex-shrink-0\" />\n                <Text className=\"text-sm laptop:text-[16px] desktop:text-[18px] font-bold\" html={gift.product.title} />\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] desktop:text-2xl font-bold\" html={freeLabel} />\n                <Text\n                  className=\"text-base laptop:text-[20px] 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": "AA6BM,cAAAA,EAoBQ,QAAAC,MApBR,oBA7BN,OAAS,QAAAC,EAAM,WAAAC,EAA6C,YAAAC,MAAgB,+BAC5E,OAAS,MAAAC,MAAU,qCACnB,OAAS,WAAAC,MAAe,QACxB,OAAS,qBAAAC,MAAyB,8BAClC,OAAS,eAAAC,MAAmB,oBAC5B,OAAS,kBAAAC,MAAsB,8BAG/B,MAAMC,EAAkB,IAAM,CAC5B,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIF,EAAe,EACnC,CAAE,SAAAG,EAAU,YAAAC,EAAa,eAAAC,EAAgB,iBAAAC,EAAkB,8BAAAC,EAA+B,2BAAAC,CAA2B,EAAIV,EAAkB,EAC3I,CAAE,MAAAW,EAAO,SAAAC,EAAW,CAAC,EAAG,UAAAC,CAAU,EAAIR,GAAY,CAAC,EACnDS,EAAiBf,EAAQ,IAAMa,GAAU,OAAOG,GAAQA,EAAK,gBAAgB,EAAG,CAACH,CAAQ,CAAC,EAE1FI,EAAuBC,GAA0B,CACjDX,GAAa,KAAOW,EAAM,IAC5BV,IAAiB,MAAS,EAC1BE,IAAgC,CAAE,GAAGC,EAA4B,KAAM,MAAU,CAAC,IAElFF,IAAmB,MAAS,EAC5BD,IAAiBU,CAAK,EACtBR,IAAgC,CAAE,GAAGC,EAA4B,KAAMO,CAAM,CAAC,EAElF,EAEA,OAAKH,GAAgB,OAGnBpB,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,UAAU,YAAY,KAAMgB,EAAO,EAClDlB,EAAC,OAAI,UAAU,wCACZ,SAAAqB,EAAe,IAAII,GAClBxB,EAAC,OAEC,UAAWI,EACT,8FACA,CACG,eAAiBQ,GAAa,KAAOY,EAAK,EAC7C,CACF,EAEA,UAAAzB,EAACI,EAAA,CACC,gBAAiB,IAAMmB,EAAoBE,CAAI,EAC/C,KAAK,KACL,GAAIA,EAAK,GACT,QAASZ,GAAa,KAAOY,EAAK,GAClC,MAAOA,EAAK,GACb,EACDxB,EAAC,SAAM,QAASwB,EAAK,GAAI,UAAU,8DACjC,UAAAxB,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACG,EAAA,CAAQ,OAAQsB,EAAK,OAAO,IAAK,UAAU,wBAAwB,EACpEzB,EAACE,EAAA,CAAK,UAAU,2DAA2D,KAAMuB,EAAK,QAAQ,MAAO,GACvG,EACAxB,EAAC,OAAI,UAAU,4DACb,UAAAD,EAACE,EAAA,CAAK,UAAU,0DAA0D,KAAMkB,EAAW,EAC3FpB,EAACE,EAAA,CACC,UAAU,uEACV,KAAMM,EAAY,CAChB,OAAQiB,EAAK,MAAM,OACnB,OAAAd,EACA,aAAcc,EAAK,MAAM,YAC3B,CAAC,EACH,GACF,GACF,IA/BKA,EAAK,EAgCZ,CACD,EACH,GACF,EA3CkC,IA6CtC,EAEA,IAAOC,EAAQhB",
+  "names": ["jsx", "jsxs", "Text", "Picture", "Checkbox", "cn", "useMemo", "useProductContext", "formatPrice", "useAiuiContext", "ProductFreeGift", "locale", "freeGift", "checkedGift", "setCheckedGift", "setCheckedBundle", "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 T}from"@radix-ui/react-tabs";import{useEffect as H,useMemo as g,useRef as v,useState as f}from"react";import{cn as L}from"../../../../../../helpers";import{useProductContext as P}from"../../../../ProductProvider";const E=()=>{const{product:s,variant:a,isMobile:r}=P(),[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 lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] max-w-[227px] rounded-full bg-[#F5F5F7]",children:t(m,{size:3,onClick:()=>{i(l),d(!0)},className:"font-bold cursor-pointer text-[#1D1D1F] 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 H(()=>{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(T,{ref:o=>{o&&(r.current[i]=o)},className:L("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 B=E;export{B 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 { useProductContext } from '../../../../ProductProvider'\n\nconst ProductHighlight = () => {\n  const { product, variant, isMobile } = useProductContext()\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 lg-desktop:max-w-[256px] desktop:max-w-[246px] laptop:max-w-[310px] max-w-[227px] 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 cursor-pointer text-[#1D1D1F] 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", "useProductContext", "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{useProductContext as h}from"../../../../ProductProvider.js";import{useAiuiContext as w}from"../../../../../AiuiProvider/index.js";import{handle as b}from"../../../../utils/helper.js";const _=()=>{const{product:d,selectedOptions:r,setSelectedOptions:a,setJoinedRecommendBuyProducts:u}=h(),{storeDomain:l}=w(),[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 x=`https://${l}/cdn/shop/files/${b(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 h-[36px] w-[36px] 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:x,onError:({currentTarget:n})=>{n.onerror=null,f(g=>({...g,[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-2xl border-[#E4E5E6] border-2",{"border-brand":r[t.name]===e}),children:e},e))})]},t.id)})}):null};var B=_;export{B 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 { useProductContext } from '../../../../ProductProvider.js'\nimport { useAiuiContext } from '../../../../../AiuiProvider/index.js'\nimport { handle } from '../../../../utils/helper.js'\n\nconst ProductOptions = () => {\n  const { product, selectedOptions, setSelectedOptions, setJoinedRecommendBuyProducts } = useProductContext()\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 h-[36px] w-[36px] 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-2xl 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": "AAqBc,OAqBY,YAAAA,EArBZ,OAAAC,EAKM,QAAAC,MALN,oBArBd,OAAS,QAAAC,EAAM,WAAAC,MAAuB,+BAEtC,OAAS,MAAAC,MAAU,qCACnB,OAAS,YAAAC,MAAgB,QACzB,OAAS,qBAAAC,MAAyB,iCAClC,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,UAAAC,MAAc,8BAEvB,MAAMC,EAAiB,IAAM,CAC3B,KAAM,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,mBAAAC,EAAoB,8BAAAC,CAA8B,EAAIP,EAAkB,EACpG,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,0IACA,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", "useProductContext", "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 e}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";const d=l=>e("div",{id:"ipc-product-detail",className:"flex flex-col gap-12 tablet:px-8 laptop:px-16 desktop:px-0 px-4",children:[o(t,{}),o(p,{}),o(r,{}),o(i,{})]});var x=d;export{x 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'\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      {/* <ProductBenefitsTabs>\n        <ProductBenefitsTabs.List>\n          <ProductBenefitsTabs.Trigger value=\"Benefits\">Benefits</ProductBenefitsTabs.Trigger>\n          <ProductBenefitsTabs.Trigger value=\"Benefits\">Benefits</ProductBenefitsTabs.Trigger>\n        </ProductBenefitsTabs.List>\n      </ProductBenefitsTabs> */}\n      <ProductHighlight />\n      <ProductOptions />\n      <ProductFreeGift />\n      <ProductBundle />\n    </div>\n  )\n}\n\nexport default ProductDetail\n"],
+  "mappings": "AASI,OAOE,OAAAA,EAPF,QAAAC,MAAA,oBATJ,MAAgC,iCAChC,OAAOC,MAAsB,8BAC7B,OAAOC,MAAqB,6BAC5B,OAAOC,MAAoB,4BAC3B,OAAOC,MAAmB,2BAG1B,MAAMC,EAAiBC,GAEnBN,EAAC,OAAI,GAAG,qBAAqB,UAAU,kEAOrC,UAAAD,EAACE,EAAA,EAAiB,EAClBF,EAACI,EAAA,EAAe,EAChBJ,EAACG,EAAA,EAAgB,EACjBH,EAACK,EAAA,EAAc,GACjB,EAIJ,IAAOG,EAAQF",
+  "names": ["jsx", "jsxs", "ProductHighlight", "ProductFreeGift", "ProductOptions", "ProductBundle", "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{useProductContext as D}from"../../../../ProductProvider";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 { useProductContext } from '../../../../ProductProvider'\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 } = useProductContext()\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", "useProductContext", "Select", "useAiuiContext", "formatPrice", "ShopifyColorOption", "CompareModal", "locale", "compareData", "product", "selectedProductHandle", "setSelectedProductHandle", "products", "productIndex", "value", "variant", "colors", "option", "predicate", "label", "key", "text", "specification", "CompareModal_default"]
+}