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

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

@@ -0,0 +1,141 @@
+import type { CurrencyCode, Image, Media, Product as ShopifyProduct, ProductVariant as ShopifyProductVariant } from './graphql';
+import { DiscountType } from '../const';
+export type ProductPrice = {
+    amount: number;
+    currencyCode: CurrencyCode;
+};
+export type ProductOption = {
+    __typename?: 'MultipleChoiceOption';
+    id: string;
+    name: string;
+    values: ProductOptionValues[];
+};
+export type ProductOptionValues = {
+    label: string;
+    hexColors?: string[];
+};
+export type ProductVariant = {
+    id: string | number;
+    options: ProductOption[];
+    sku: string;
+    metafields?: Record<string, any>;
+    price: ProductPrice;
+    product: Product;
+    coupons: VariantCoupon[];
+    weight?: number;
+    payload?: any;
+} & Omit<ShopifyProductVariant, 'options' | 'metafields' | 'price'>;
+export type Product = {
+    path?: string;
+    images: Image[];
+    media: ProductMedia[];
+    variants: ProductVariant[];
+    price: ProductPrice;
+    options: ProductOption[];
+    metafields?: {
+        [key: string]: any;
+    };
+    slug: string;
+    payload?: any;
+} & Omit<ShopifyProduct, 'metafields' | 'images' | 'variants' | 'price' | 'options' | 'media'>;
+export type GetProductBody = {
+    handles: string;
+    locale?: string;
+};
+export type ProductTypes = {
+    product: Product;
+    getBody: GetProductBody;
+};
+export type GetAllProductPathsOperation<T extends ProductTypes = ProductTypes> = {
+    data: {
+        products: Pick<T['product'], 'path'>[];
+    };
+    variables: {
+        first?: number;
+    };
+};
+export type GetAllProductsOperation<T extends ProductTypes = ProductTypes> = {
+    data: {
+        products: T['product'][];
+    };
+    variables: {
+        relevance?: 'featured' | 'best_selling' | 'newest';
+        ids?: string[];
+        first?: number;
+    };
+};
+export type GetProductOperation<T extends ProductTypes = ProductTypes> = {
+    data: {
+        product?: T['product'];
+    };
+    variables: {
+        path: string;
+        slug?: never;
+    } | {
+        path?: never;
+        slug: string;
+    };
+};
+export type Options = Record<string, string>;
+export type ProductMedia = Media & {
+    sources?: {
+        url: string;
+        altText: string;
+    }[];
+    image?: {
+        url: string;
+        altText: string;
+    };
+};
+export type VariantCoupon = {
+    title: string;
+    starts_at: string;
+    ends_at: string | null;
+    variant_shopify_id: number;
+    value_type: DiscountType;
+    value: string;
+    currency: string;
+    fixed_value: string;
+    value_style: string;
+    variant_price4wscode: number;
+    discount_type: string;
+    amazon_deal: boolean;
+    cdi_id: number;
+    cdi_updated_at: string;
+};
+export type ScriptDiscount = {
+    type: DiscountType;
+    excludeSkus: string[];
+    discount: number;
+};
+export type FreeGift = {
+    title: string;
+    note: string;
+    soldOutLabel: string;
+    freeLabel: string;
+    giftList: ProductVariant[];
+    count: number;
+    showCoupon: boolean;
+    [key: string]: any;
+};
+export type BundleListItem = {
+    id: string;
+    price: number;
+    comparePrice: number;
+    savings: number;
+    variants: {
+        price: number;
+        quantity: number;
+        label: string;
+        variant: ProductVariant;
+    }[];
+};
+export type Bundle = {
+    title: string;
+    soldOutLabel: string;
+    youSaveText: string;
+    showCoupon: boolean;
+    bundleList: BundleListItem[];
+    showAtListing: boolean;
+    [key: string]: any;
+};

package/dist/esm/biz-components/Listing/types/product.js

@@ -0,0 +1,2 @@
+import"../const";
+//# sourceMappingURL=product.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/types/product.ts"],
+  "sourcesContent": ["import type {\n  CurrencyCode,\n  Image,\n  Media,\n  Product as ShopifyProduct,\n  ProductVariant as ShopifyProductVariant,\n} from './graphql'\nimport { DiscountType } from '../const'\n\nexport type ProductPrice = {\n  amount: number\n  currencyCode: CurrencyCode\n}\n\nexport type ProductOption = {\n  __typename?: 'MultipleChoiceOption'\n  id: string\n  name: string\n  values: ProductOptionValues[]\n}\n\nexport type ProductOptionValues = {\n  label: string\n  hexColors?: string[]\n}\n\nexport type ProductVariant = {\n  id: string | number\n  options: ProductOption[]\n  sku: string\n  metafields?: Record<string, any>\n  price: ProductPrice\n  product: Product\n  coupons: VariantCoupon[]\n  weight?: number\n  payload?: any\n} & Omit<ShopifyProductVariant, 'options' | 'metafields' | 'price'>\n\nexport type Product = {\n  path?: string\n  images: Image[]\n  media: ProductMedia[]\n  variants: ProductVariant[]\n  price: ProductPrice\n  options: ProductOption[]\n  metafields?: { [key: string]: any }\n  slug: string\n  payload?: any\n} & Omit<ShopifyProduct, 'metafields' | 'images' | 'variants' | 'price' | 'options' | 'media'>\n\nexport type GetProductBody = {\n  handles: string\n  locale?: string\n}\n\nexport type ProductTypes = {\n  product: Product\n  getBody: GetProductBody\n}\n\nexport type GetAllProductPathsOperation<T extends ProductTypes = ProductTypes> = {\n  data: { products: Pick<T['product'], 'path'>[] }\n  variables: { first?: number }\n}\n\nexport type GetAllProductsOperation<T extends ProductTypes = ProductTypes> = {\n  data: { products: T['product'][] }\n  variables: {\n    relevance?: 'featured' | 'best_selling' | 'newest'\n    ids?: string[]\n    first?: number\n  }\n}\n\nexport type GetProductOperation<T extends ProductTypes = ProductTypes> = {\n  data: { product?: T['product'] }\n  variables: { path: string; slug?: never } | { path?: never; slug: string }\n}\n\nexport type Options = Record<string, string>\n\nexport type ProductMedia = Media & {\n  sources?: {\n    url: string\n    altText: string\n  }[]\n  image?: {\n    url: string\n    altText: string\n  }\n}\n\nexport type VariantCoupon = {\n  title: string\n  starts_at: string // ISO 8601 \u65E5\u671F\u5B57\u7B26\u4E32\n  ends_at: string | null // ISO 8601 \u65E5\u671F\u5B57\u7B26\u4E32\u6216 null\n  variant_shopify_id: number\n  value_type: DiscountType\n  value: string // \u8D1F\u6570\u7684\u767E\u5206\u6BD4\u503C\n  currency: string\n  fixed_value: string // \u56FA\u5B9A\u503C\n  value_style: string // \u5E26\u6709\u8D27\u5E01\u7B26\u53F7\u7684\u503C\n  variant_price4wscode: number\n  discount_type: string // \u5047\u8BBE discount_type \u662F\u4E00\u4E2A\u5B57\u7B26\u4E32\n  amazon_deal: boolean\n  cdi_id: number\n  cdi_updated_at: string // ISO 8601 \u65E5\u671F\u5B57\u7B26\u4E32\n}\n\nexport type ScriptDiscount = {\n  type: DiscountType\n  excludeSkus: string[]\n  discount: number\n}\n\nexport type FreeGift = {\n  title: string\n  note: string\n  soldOutLabel: string\n  freeLabel: string\n  giftList: ProductVariant[]\n  count: number\n  showCoupon: boolean\n  [key: string]: any\n}\n\nexport type BundleListItem = {\n  id: string\n  price: number\n  comparePrice: number\n  savings: number\n  variants: {\n    price: number\n    quantity: number\n    label: string\n    variant: ProductVariant\n  }[]\n}\n\nexport type Bundle = {\n  title: string\n  soldOutLabel: string\n  youSaveText: string\n  showCoupon: boolean\n  bundleList: BundleListItem[]\n  showAtListing: boolean\n  [key: string]: any\n}"],
+  "mappings": "AAOA,MAA6B",
+  "names": []
+}

package/dist/esm/biz-components/Listing/types/productMetafields.d.js

@@ -0,0 +1,2 @@
+import"@projectTypes/product";
+//# sourceMappingURL=productMetafields.d.js.map

package/dist/esm/biz-components/Listing/types/productMetafields.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/types/productMetafields.d.ts"],
+  "sourcesContent": ["import { DiscountType } from '@projectTypes/product'\n\n// \u6EE1\u8D60\nexport type VariantFreeGiftMetafields = {\n  count: number // \u6700\u591A\u9009\u62E9\u793C\u54C1\u6570\u91CF\uFF0C\u4E70\u4E00\u8D60X\n  showDiscounts: boolean\n  list: {\n    handle: string\n    sku: string\n  }[]\n  labels: string[]\n}\n\n// bundle\nexport type VariantBundleMetafields = {\n  list: {\n    handle: string\n    sku: string\n    price: number\n    qty: number\n    label: string\n  }[][]\n  title: string\n  discount_type: DiscountType\n  showDiscounts: boolean\n  labels: string[]\n}\n\n// \u6EE1\u51CF\\\u5C0Fb\u6298\u6263 metafields\nexport type VariantPriceDropMetafields = {\n  showDiscounts: boolean\n  discountType: DiscountType\n  rules: {\n    value: number\n  }[]\n  labels: string[]\n}\n"],
+  "mappings": "AAAA,MAA6B",
+  "names": []
+}

package/dist/esm/biz-components/Listing/types/type-helper.d.ts

@@ -0,0 +1,5 @@
+export type PartialRecord<K extends string | number | symbol, T> = Partial<Record<K, T>>;
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type Replace<T, K extends keyof T, V> = Omit<T, K> & {
+    [P in K]: V;
+};

package/dist/esm/biz-components/Listing/types/type-helper.js

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

package/dist/esm/biz-components/Listing/types/type-helper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+import type { Product } from './types/product';
+export type CompareProductItem = {
+    handle: string;
+    shortName: string;
+    compareProductCollection?: string;
+};
+export type CompareItem = {
+    product: Product;
+} & CompareProductItem;
+export type CompareData = {
+    data: {
+        availableCompareList: Array<CompareItem>;
+        currentProductCompareData?: CompareItem;
+        options: {
+            value: string;
+            text: string;
+        }[];
+        specificationKeys?: string[];
+    };
+    show: boolean;
+};
+export type DiscountData = {
+    codeSavings: number;
+    scriptSavings: number;
+    totalSavings: number;
+    comparePrice: number;
+    finalPrice: number;
+};

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/biz-components/Listing/utils/helper.d.ts

@@ -0,0 +1,36 @@
+import type { Product, ProductMedia, ProductVariant } from '../types/product';
+export type SchemaVariant = {
+    variant: {
+        handle: string;
+        sku: string;
+    };
+};
+export declare function isObjEmpty(obj?: Record<string, any>): boolean;
+export declare function atobID(id: string): string | undefined;
+export declare function btoaID(id: string, type?: 'ProductVariant' | 'Product'): string;
+export declare const getThemeLocale: (locale: string) => string;
+/**
+ * 生成 metafieldIdentifiers 查询参数
+ */
+export declare const getNormalCoupon: ({ variant }: {
+    variant?: ProductVariant;
+}) => import("../types/product").VariantCoupon | undefined;
+export declare function replaceUmlaut(str: string): string;
+export declare function handle(str: string): string;
+export declare function getVariantImageIndex({ mediaList, variant, }: {
+    variant: ProductVariant;
+    mediaList: ProductMedia[];
+}): null | number;
+export declare function getVariantMediaList({ product, variant }: {
+    variant: ProductVariant;
+    product: Product;
+}): ProductMedia[];
+export declare const checkItemAvailableForProduct: ({ product, item, variant, }: {
+    product: Product;
+    variant: ProductVariant;
+    item?: {
+        includeTags?: string[];
+        includeProducts?: SchemaVariant[];
+        excludeProducts?: SchemaVariant[];
+    };
+}) => string | boolean | SchemaVariant | undefined;

package/dist/esm/biz-components/Listing/utils/helper.js

@@ -0,0 +1,2 @@
+import{CouponChannel as o}from"../const";function d(e){return e?Object.keys(e).length===0:!0}function l(e){return e&&typeof e=="string"&&e.includes("/")?e.split("/").pop()?.split("?")?.shift():e}function f(e,t="ProductVariant"){return`gid://shopify/${t}/${e}`}const g=e=>e==="eu-de"?"de":e==="eu-en"?"eu":e==="au"?"au":e,p=({variant:e})=>e?.coupons?.find(t=>t.discount_type!==o.WSCH),u={\u00DC:"U",\u00C4:"A",\u00D6:"O",\u00FC:"u",\u00E4:"a",\u00F6:"o",\u00DF:"ss",\u00E8:"e"};function s(e){return e.replace(/[\u00dc|\u00c4|\u00d6][a-z]/g,t=>{const n=u[t.slice(0,1)];return n.charAt(0)+n.charAt(1).toLowerCase()+t.slice(1)}).replace(new RegExp("["+Object.keys(u).join("|")+"]","g"),t=>u[t])}function m(e){return s(e).replace(/ /g,"-").replace(/[^a-zA-Z0-9-]/g,"").toLowerCase()}function i({mediaList:e,variant:t}){const n=t?.image?.url;return n?e.map(r=>r.image?.url).findIndex(r=>r==n):null}function h({product:e,variant:t}){const n=i({mediaList:e.media,variant:t});if(n!==null){const r=e.variants.filter(a=>t.id!==a.id).map(a=>i({mediaList:e.media,variant:a})).find(a=>a!==null&&a>n)||-1;return e.media.slice(n,r===-1?e.media.length:r)}else return e.media}const P=({product:e,item:t,variant:n})=>t?Number(t?.includeTags?.length)>0?e.tags?.find(r=>t?.includeTags?.includes(r)):Number(t?.includeProducts?.length)>0?t.includeProducts?.find(r=>r?.variant?.handle===e.handle&&r?.variant?.sku===n.sku):Number(t?.excludeProducts?.length)>0?!t.excludeProducts?.find(r=>r?.variant?.handle===e.handle&&r?.variant?.sku===n.sku):!0:!1;export{l as atobID,f as btoaID,P as checkItemAvailableForProduct,p as getNormalCoupon,g as getThemeLocale,i as getVariantImageIndex,h as getVariantMediaList,m as handle,d as isObjEmpty,s as replaceUmlaut};
+//# sourceMappingURL=helper.js.map

package/dist/esm/biz-components/Listing/utils/helper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/utils/helper.ts"],
+  "sourcesContent": ["// \u6539\u7EC4\u4EF6\u5BA2\u6237\u7AEF\u6267\u884C\n// import { SchemaVariant } from '@projectTypes/template'\nimport type { Product, ProductMedia, ProductVariant } from '../types/product'\nimport { CouponChannel } from '../const'\n// import Cookies from 'js-cookie'\n// import { Attribute, HasMetafieldsIdentifier } from 'lib/shopify/gql'\n// import { HasMetafieldQueryRoot } from 'lib/shopify/types/fetcher'\n// import { useEffect, useState } from 'react'\n\n// import { PartialRecord } from './type-helper'\n\nexport type SchemaVariant = {\n  variant: {\n    handle: string\n    sku: string\n  }\n}\n\n// \u5224\u65AD\u5BF9\u8C61\u662F\u5426\u4E3A\u7A7A\nexport function isObjEmpty(obj?: Record<string, any>) {\n  if (!obj) return true\n  else {\n    return Object.keys(obj).length === 0\n  }\n}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\n\nexport function btoaID(id: string, type: 'ProductVariant' | 'Product' = 'ProductVariant') {\n  return `gid://shopify/${type}/${id}`\n}\n\n// \u76AE\u80A4\u7AD9\u4E09\u7EA7\u57DF\u540D\nexport const getThemeLocale = (locale: string) => {\n  if (locale === 'eu-de') return 'de'\n  if (locale === 'eu-en') return 'eu'\n  if (locale === 'au') return 'au'\n  return locale\n}\n\n/**\n * \u751F\u6210 metafieldIdentifiers \u67E5\u8BE2\u53C2\u6570\n */\n// export function constructMetafieldIdentifiersQueryParams<T extends HasMetafieldQueryRoot>(\n//   metafieldIdentifiers: PartialRecord<T, HasMetafieldsIdentifier[]> = {},\n// ): PartialRecord<`${T}MetafieldIdentifiers`, HasMetafieldsIdentifier[]> {\n//   const identifiers = Object.entries(metafieldIdentifiers).reduce(\n//     (queryInput, [key, value]) => {\n//       const metafieldIdentifiers = value as HasMetafieldsIdentifier[]\n//       queryInput[`${key}MetafieldIdentifiers`] = metafieldIdentifiers\n//         .filter((item) => !item.namespace.startsWith(metafieldNamespacePrefix))\n//         .map((item) => ({\n//           namespace: `${metafieldNamespacePrefix}combo`,\n//           key: item.namespace,\n//         }))\n//         .concat(metafieldIdentifiers)\n//       return queryInput\n//     },\n//     {} as PartialRecord<`${T}MetafieldIdentifiers`, HasMetafieldsIdentifier[]>,\n//   )\n//   return identifiers\n// }\n\n// export function cleanShopKey(shop: Shop) {\n//   const { privacyPolicy, refundPolicy, shippingPolicy, termsOfService, subscriptionPolicy, ...otherShop } = shop\n//   return otherShop\n// }\n\n// export const delHtmlTag = (str?: string) => {\n//   return str ? String(str).replace(/<[^>]+>/g, '') : ''\n// }\n\nexport const getNormalCoupon = ({ variant }: { variant?: ProductVariant }) => {\n  return variant?.coupons?.find(coupon => coupon.discount_type !== CouponChannel.WSCH)\n}\n\n// export const setCartSecretCookie = ({ cart }) => {\n//   const key = cart.id.split('?key=')[1]\n//   const id = cart.id.split('?key=')[0].split('gid://shopify/Cart/')[1]\n//   Cookies.set(id, key, {\n//     Domain: window.location.hostname.split('.').reverse().slice(0, 2).reverse().join('.'),\n//   })\n// }\n\n// export const languageCode = (locale: string) =>\n//   ({\n//     us: 'US',\n//     uk: 'GB',\n//     ca: 'CA',\n//     fr: 'FR',\n//     au: 'AU',\n//     my: 'MY',\n//     vn: 'VN',\n//     it: 'IT',\n//     de: 'DE',\n//     cl: 'CL',\n//   })[locale] || 'US'\n\n// shopify \u7684\u7279\u6B8A\u6587\u4EF6\u8F6C\u6362\u89C4\u5219\nconst umlautMap = {\n  '\\u00dc': 'U',\n  '\\u00c4': 'A',\n  '\\u00d6': 'O',\n  '\\u00fc': 'u',\n  '\\u00e4': 'a',\n  '\\u00f6': 'o',\n  '\\u00df': 'ss',\n  '\\u00E8': 'e',\n}\n\n// \u66FF\u6362\u5B57\u7B26\u4E32\u4E2D\u7684\u7279\u6B8A\u5B57\u7B26\nexport function replaceUmlaut(str: string) {\n  return str\n    .replace(/[\\u00dc|\\u00c4|\\u00d6][a-z]/g, a => {\n      const big = umlautMap[a.slice(0, 1) as keyof typeof umlautMap]\n      return big.charAt(0) + big.charAt(1).toLowerCase() + a.slice(1)\n    })\n    .replace(new RegExp('[' + Object.keys(umlautMap).join('|') + ']', 'g'), a => umlautMap[a as keyof typeof umlautMap])\n}\n\n// \u5C06\u5B57\u7B26\u4E32\u8F6C\u6362\u4E3A slug\nexport function handle(str: string) {\n  return replaceUmlaut(str)\n    .replace(/ /g, '-')\n    .replace(/[^a-zA-Z0-9-]/g, '')\n    .toLowerCase()\n}\n\n// get variant image index\nexport function getVariantImageIndex({\n  mediaList,\n  variant,\n}: {\n  variant: ProductVariant\n  mediaList: ProductMedia[]\n}): null | number {\n  const src = variant?.image?.url\n  return src ? mediaList.map(media => media.image?.url).findIndex(imageSrc => imageSrc == src) : null\n}\n\n// get images belong to variant\nexport function getVariantMediaList({ product, variant }: { variant: ProductVariant; product: Product }) {\n  const currentVariantImageIndex = getVariantImageIndex({ mediaList: product.media, variant })\n\n  if (currentVariantImageIndex !== null) {\n    const nextVariantImageIndex =\n      product.variants\n        .filter(v => variant.id !== v.id)\n        .map(v => getVariantImageIndex({ mediaList: product.media, variant: v }))\n        .find(index => index !== null && index > currentVariantImageIndex) || -1\n\n    // current variant images, if no next variant found, return images from current index to the end\n    return product.media.slice(\n      currentVariantImageIndex,\n      nextVariantImageIndex === -1 ? product.media.length : nextVariantImageIndex\n    )\n  } else {\n    // if no variant image found, return all images\n    return product.media\n  }\n}\n\n// // \u901A\u8FC7\u9009\u62E9 option \u83B7\u53D6 variant\n// export function getVariantFromSelectedOptions({\n//   product,\n//   selectedOptions,\n// }: {\n//   product: Product\n//   selectedOptions: Record<string, string>\n// }) {\n//   return product.variants.find((variant) => {\n//     return Object.entries(selectedOptions).every(([key, value]) =>\n//       variant.options.find((option) => {\n//         if (option.__typename === 'MultipleChoiceOption' && option.name === key) {\n//           return option.values.find((v) => v.label === value)\n//         }\n//       }),\n//     )\n//   })\n// }\n\n// export const getURLParameter = (name, url = window.location.href) => {\n//   name = name.replace(/[\\[\\]]/g, '\\\\$&') // \u5C06\u65B9\u62EC\u53F7\u8F6C\u4E49\uFF0C\u4EE5\u4FBF\u5728\u6B63\u5219\u8868\u8FBE\u5F0F\u4E2D\u4F7F\u7528\n//   var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)') // \u521B\u5EFA\u5339\u914D\u53C2\u6570\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\n//   var results = regex.exec(url) // \u5728URL\u4E2D\u67E5\u627E\u5339\u914D\u7684\u53C2\u6570\n//   if (!results) return null // \u5982\u679C\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u53C2\u6570\uFF0C\u5219\u8FD4\u56DEnull\n//   if (!results[2]) return '' // \u5982\u679C\u53C2\u6570\u7684\u503C\u4E3A\u7A7A\uFF0C\u5219\u8FD4\u56DE\u7A7A\u5B57\u7B26\u4E32\n//   return decodeURIComponent(results[2]) // \u8FD4\u56DE\u89E3\u7801\u540E\u7684\u53C2\u6570\u503C\n// }\n\nexport const checkItemAvailableForProduct = ({\n  product,\n  item,\n  variant,\n}: {\n  product: Product\n  variant: ProductVariant\n  item?: {\n    includeTags?: string[]\n    includeProducts?: SchemaVariant[]\n    excludeProducts?: SchemaVariant[]\n  }\n}) => {\n  if (item) {\n    if (Number(item?.includeTags?.length) > 0) {\n      return product.tags?.find((tag) => item?.includeTags?.includes(tag))\n    } else if (Number(item?.includeProducts?.length) > 0) {\n      return item.includeProducts?.find((p) => p?.variant?.handle === product.handle && p?.variant?.sku === variant.sku)\n    } else if (Number(item?.excludeProducts?.length) > 0) {\n      return !item.excludeProducts?.find(\n        (p) => p?.variant?.handle === product.handle && p?.variant?.sku === variant.sku,\n      )\n    } else {\n      return true\n    }\n  } else {\n    return false\n  }\n}\n// export const getReferralAttributes = () => {\n//   const inviteCode = Cookies.get('invite_code')\n//   const playModeId = Cookies.get('playModeId')\n//   const popup = Cookies.get('_popup')\n//   if (inviteCode && playModeId) {\n//     return popup\n//       ? [\n//           { key: '_invite_code', value: inviteCode ? inviteCode : '' },\n//           { key: '_play_mode_id', value: playModeId ? playModeId : '' },\n//           { key: '_popup', value: popup },\n//         ]\n//       : [\n//           { key: '_invite_code', value: inviteCode ? inviteCode : '' },\n//           { key: '_play_mode_id', value: playModeId ? playModeId : '' },\n//         ]\n//   }\n//   return []\n// }\n\n// export function useH2Toc(htmlContent: string) {\n//   const [toc, setToc] = useState<{ updatedHtmlContent: string; dataList: { url: string; text: string }[] }>({\n//     updatedHtmlContent: htmlContent,\n//     dataList: [],\n//   })\n\n//   useEffect(() => {\n//     if (typeof window === 'undefined' || typeof document === 'undefined') return\n//     const div = document.createElement('div')\n//     div.innerHTML = htmlContent\n//     const h2s = div.querySelectorAll('h2')\n//     const dataList: { url: string; text: string }[] = []\n//     h2s.forEach((h2, idx) => {\n//       const text = (h2.textContent || '').trim()\n//       if (!text) return\n//       const id = encodeURIComponent(text).replace(/'/g, '&#39;')\n//       h2.setAttribute('id', id)\n//       dataList.push({ url: id, text })\n//     })\n//     setToc({ updatedHtmlContent: div.innerHTML, dataList })\n//   }, [htmlContent])\n\n//   return toc\n// }\n\n// export const isAttributesEqual = (oldAttributes: Attribute[], newAttributes: Attribute[]) => {\n//   // \u6BD4\u5BF9\u4E24\u4E2A\u6570\u636E\u662F\u5426\u5B8C\u5168\u76F8\u540C\n//   // \u68C0\u67E5\u6570\u7EC4\u957F\u5EA6\u662F\u5426\u76F8\u540C\n//   if (oldAttributes?.length !== newAttributes?.length) {\n//     return false\n//   }\n\n//   // \u5C06\u6570\u7EC4\u8F6C\u6362\u4E3A Map \u4EE5\u4FBF\u5FEB\u901F\u67E5\u627E\n//   const oldMap = new Map(oldAttributes.map((attr) => [attr.key, attr.value]))\n//   const newMap = new Map(newAttributes.map((attr) => [attr.key, attr.value]))\n\n//   // \u68C0\u67E5\u6240\u6709 key \u662F\u5426\u90FD\u5B58\u5728\u4E14\u503C\u76F8\u540C\n//   for (const [key, value] of newMap) {\n//     if (!oldMap.has(key) || oldMap.get(key) !== value) {\n//       return false\n//     }\n//   }\n\n//   return true\n// }\n\n// // \u68C0\u67E5\u8F93\u5165\u6846\u4E2D\u7684\u7279\u6B8A\u7B26\u53F7\n// export function validateSpecialCharacters(input: string): { isValid: boolean; invalidChars: string[] } {\n//   // \u5B9A\u4E49\u4E0D\u5141\u8BB8\u7684\u7279\u6B8A\u7B26\u53F7\n//   const invalidSpecialChars = /[!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?`~]/g\n\n//   const matches = input.match(invalidSpecialChars)\n//   const invalidChars = matches ? [...new Set(matches)] : []\n\n//   return {\n//     isValid: invalidChars.length === 0,\n//     invalidChars,\n//   }\n// }\n\n// // \u83B7\u53D6\u7279\u6B8A\u7B26\u53F7\u7684\u9519\u8BEF\u63D0\u793A\u4FE1\u606F\n// export function getSpecialCharErrorMessage(invalidChars: string[]): string {\n//   if (invalidChars.length === 0) return ''\n\n//   const uniqueChars = [...new Set(invalidChars)]\n//   if (uniqueChars.length === 1) {\n//     return `\u4E0D\u5141\u8BB8\u4F7F\u7528\u7279\u6B8A\u7B26\u53F7: ${uniqueChars[0]}`\n//   } else {\n//     return `\u4E0D\u5141\u8BB8\u4F7F\u7528\u4EE5\u4E0B\u7279\u6B8A\u7B26\u53F7: ${uniqueChars.join(', ')}`\n//   }\n// }"],
+  "mappings": "AAGA,OAAS,iBAAAA,MAAqB,WAgBvB,SAASC,EAAWC,EAA2B,CACpD,OAAKA,EAEI,OAAO,KAAKA,CAAG,EAAE,SAAW,EAFpB,EAInB,CAEO,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CAEO,SAASC,EAAOD,EAAYE,EAAqC,iBAAkB,CACxF,MAAO,iBAAiBA,CAAI,IAAIF,CAAE,EACpC,CAGO,MAAMG,EAAkBC,GACzBA,IAAW,QAAgB,KAC3BA,IAAW,QAAgB,KAC3BA,IAAW,KAAa,KACrBA,EAmCIC,EAAkB,CAAC,CAAE,QAAAC,CAAQ,IACjCA,GAAS,SAAS,KAAKC,GAAUA,EAAO,gBAAkBX,EAAc,IAAI,EA0B/EY,EAAY,CAChB,OAAU,IACV,OAAU,IACV,OAAU,IACV,OAAU,IACV,OAAU,IACV,OAAU,IACV,OAAU,KACV,OAAU,GACZ,EAGO,SAASC,EAAcC,EAAa,CACzC,OAAOA,EACJ,QAAQ,+BAAgCC,GAAK,CAC5C,MAAMC,EAAMJ,EAAUG,EAAE,MAAM,EAAG,CAAC,CAA2B,EAC7D,OAAOC,EAAI,OAAO,CAAC,EAAIA,EAAI,OAAO,CAAC,EAAE,YAAY,EAAID,EAAE,MAAM,CAAC,CAChE,CAAC,EACA,QAAQ,IAAI,OAAO,IAAM,OAAO,KAAKH,CAAS,EAAE,KAAK,GAAG,EAAI,IAAK,GAAG,EAAGG,GAAKH,EAAUG,CAA2B,CAAC,CACvH,CAGO,SAASE,EAAOH,EAAa,CAClC,OAAOD,EAAcC,CAAG,EACrB,QAAQ,KAAM,GAAG,EACjB,QAAQ,iBAAkB,EAAE,EAC5B,YAAY,CACjB,CAGO,SAASI,EAAqB,CACnC,UAAAC,EACA,QAAAT,CACF,EAGkB,CAChB,MAAMU,EAAMV,GAAS,OAAO,IAC5B,OAAOU,EAAMD,EAAU,IAAIE,GAASA,EAAM,OAAO,GAAG,EAAE,UAAUC,GAAYA,GAAYF,CAAG,EAAI,IACjG,CAGO,SAASG,EAAoB,CAAE,QAAAC,EAAS,QAAAd,CAAQ,EAAkD,CACvG,MAAMe,EAA2BP,EAAqB,CAAE,UAAWM,EAAQ,MAAO,QAAAd,CAAQ,CAAC,EAE3F,GAAIe,IAA6B,KAAM,CACrC,MAAMC,EACJF,EAAQ,SACL,OAAOG,GAAKjB,EAAQ,KAAOiB,EAAE,EAAE,EAC/B,IAAIA,GAAKT,EAAqB,CAAE,UAAWM,EAAQ,MAAO,QAASG,CAAE,CAAC,CAAC,EACvE,KAAKC,GAASA,IAAU,MAAQA,EAAQH,CAAwB,GAAK,GAG1E,OAAOD,EAAQ,MAAM,MACnBC,EACAC,IAA0B,GAAKF,EAAQ,MAAM,OAASE,CACxD,CACF,KAEE,QAAOF,EAAQ,KAEnB,CA8BO,MAAMK,EAA+B,CAAC,CAC3C,QAAAL,EACA,KAAAM,EACA,QAAApB,CACF,IASMoB,EACE,OAAOA,GAAM,aAAa,MAAM,EAAI,EAC/BN,EAAQ,MAAM,KAAMO,GAAQD,GAAM,aAAa,SAASC,CAAG,CAAC,EAC1D,OAAOD,GAAM,iBAAiB,MAAM,EAAI,EAC1CA,EAAK,iBAAiB,KAAME,GAAMA,GAAG,SAAS,SAAWR,EAAQ,QAAUQ,GAAG,SAAS,MAAQtB,EAAQ,GAAG,EACxG,OAAOoB,GAAM,iBAAiB,MAAM,EAAI,EAC1C,CAACA,EAAK,iBAAiB,KAC3BE,GAAMA,GAAG,SAAS,SAAWR,EAAQ,QAAUQ,GAAG,SAAS,MAAQtB,EAAQ,GAC9E,EAEO,GAGF",
+  "names": ["CouponChannel", "isObjEmpty", "obj", "atobID", "id", "btoaID", "type", "getThemeLocale", "locale", "getNormalCoupon", "variant", "coupon", "umlautMap", "replaceUmlaut", "str", "a", "big", "handle", "getVariantImageIndex", "mediaList", "src", "media", "imageSrc", "getVariantMediaList", "product", "currentVariantImageIndex", "nextVariantImageIndex", "v", "index", "checkItemAvailableForProduct", "item", "tag", "p"]
+}

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

@@ -0,0 +1,37 @@
+import type { Options, Product, ProductOption, ProductVariant } from '../types/product';
+export declare function optionsConstructor(options: ProductOption[]): Options;
+/**
+ * Returns the first available variant of a product.
+ * If no variant is available, it returns the first variant in the list.
+ *
+ * @param product - The product object.
+ * @returns The first available variant of the product.
+ */
+export declare const getFirstAvailableVariant: (product: Product) => ProductVariant;
+export declare const getVariantBySku: (product: Product, sku: string) => ProductVariant | undefined;
+export declare const languageTerritory: (locale: string) => string;
+export declare function formatPrice({ amount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
+    amount: number;
+    currencyCode: string;
+    locale: string;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    removeTrailingZeros?: boolean;
+}): string;
+export declare function formatVariantPrice({ amount, baseAmount, currencyCode, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
+    baseAmount: number;
+    amount: number;
+    currencyCode: string;
+    locale: string;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    removeTrailingZeros?: boolean;
+}): {
+    price: string;
+    basePrice: string | undefined;
+    discount: string | null;
+};
+export declare function getVariantFromSelectedOptions({ product, selectedOptions, }: {
+    product: Product;
+    selectedOptions: Record<string, string>;
+}): ProductVariant | undefined;

package/dist/esm/biz-components/Listing/utils/index.js

@@ -0,0 +1,2 @@
+import{PRICE_SYMBOL as u}from"../const";function y(e){return e.reduce((r,n)=>(r[n.name]=n.values[0].label,r),{})}const b=e=>e.variants.find(r=>r.availableForSale)||e.variants[0],P=(e,r)=>e.variants.find(n=>n.sku===r),c=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en-eu",pl:"pl-pl",fr:"fr-fr",de:"de-de",vn:"vi-vn",sg:"en-sg","ae-en":"en-ae",plus:"en-us",cl:"es-cl",es:"es-es",se:"en-se",dk:"en-dk",is:"en-is",no:"en-no",fi:"en-fi"})[e]||"";function f({amount:e,currencyCode:r,locale:n,maximumFractionDigits:t,minimumFractionDigits:a,removeTrailingZeros:o=!1}){let i=new Intl.NumberFormat(c(n),{style:"currency",currency:r||"USD",minimumFractionDigits:t===0?0:a,maximumFractionDigits:t}).format(e);return["eu-de","eu-en","de","eu"].includes(n)&&(i=i?.toString()?.replace(/[\s]/g,"")),o&&(i=i.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),i}function v({amount:e,baseAmount:r,currencyCode:n,locale:t,maximumFractionDigits:a,minimumFractionDigits:o,removeTrailingZeros:s}){if(typeof Intl>"u")return{price:`${u[t]}${e}`,basePrice:`${u[t]}${r}`,discount:`${u[t]}${r-e||0}`};const i=r>e,d=new Intl.NumberFormat(c(t),{style:"percent"}),p=i?d.format((r-e)/r):null,m=f({amount:e,currencyCode:n,locale:t,removeTrailingZeros:s}),l=i?f({amount:r,currencyCode:n,locale:t,maximumFractionDigits:a,minimumFractionDigits:o,removeTrailingZeros:s}):void 0;return{price:m,basePrice:l,discount:p}}function O({product:e,selectedOptions:r}){return e.variants.find(n=>Object.entries(r).every(([t,a])=>n.options.find(o=>{if(o.__typename==="MultipleChoiceOption"&&o.name===t)return o.values.find(s=>s.label===a)})))}export{f as formatPrice,v as formatVariantPrice,b as getFirstAvailableVariant,P as getVariantBySku,O as getVariantFromSelectedOptions,c as languageTerritory,y as optionsConstructor};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/utils/index.ts"],
+  "sourcesContent": ["import { PRICE_SYMBOL } from '../const'\nimport type { Options, Product, ProductOption, ProductVariant } from '../types/product'\n\nexport function optionsConstructor(options: ProductOption[]): Options {\n  return options.reduce((pre: any, cur: any) => {\n    pre[cur.name] = cur.values[0].label\n    return pre\n  }, {})\n}\n\n/**\n * Returns the first available variant of a product.\n * If no variant is available, it returns the first variant in the list.\n *\n * @param product - The product object.\n * @returns The first available variant of the product.\n */\nexport const getFirstAvailableVariant = (product: Product) =>\n  product.variants.find((variant: ProductVariant) => variant.availableForSale) || product.variants[0]\n\nexport const getVariantBySku = (product: Product, sku: string) =>\n  product.variants.find((variant: ProductVariant) => variant.sku === sku)\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en-eu',\n    pl: 'pl-pl',\n    fr: 'fr-fr',\n    de: 'de-de',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'en-ae',\n    plus: 'en-us',\n    cl: 'es-cl',\n    es: 'es-es',\n    // Nordic countries\n    se: 'en-se',\n    dk: 'en-dk',\n    is: 'en-is',\n    no: 'en-no',\n    fi: 'en-fi',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount }\n}\n\nexport function getVariantFromSelectedOptions({\n  product,\n  selectedOptions,\n}: {\n  product: Product\n  selectedOptions: Record<string, string>\n}) {\n  return product.variants.find(variant => {\n    return Object.entries(selectedOptions).every(([key, value]) =>\n      variant.options.find(option => {\n        if (option.__typename === 'MultipleChoiceOption' && option.name === key) {\n          return option.values.find(v => v.label === value)\n        }\n      })\n    )\n  })\n}"],
+  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,WAGtB,SAASC,EAAmBC,EAAmC,CACpE,OAAOA,EAAQ,OAAO,CAACC,EAAUC,KAC/BD,EAAIC,EAAI,IAAI,EAAIA,EAAI,OAAO,CAAC,EAAE,MACvBD,GACN,CAAC,CAAC,CACP,CASO,MAAME,EAA4BC,GACvCA,EAAQ,SAAS,KAAMC,GAA4BA,EAAQ,gBAAgB,GAAKD,EAAQ,SAAS,CAAC,EAEvFE,EAAkB,CAACF,EAAkBG,IAChDH,EAAQ,SAAS,KAAMC,GAA4BA,EAAQ,MAAQE,CAAG,EAE3DC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QAEJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBC,CAAM,EAAG,CACtE,MAAO,WACP,SAAUG,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDO,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAN,EACA,WAAAO,EACA,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGjB,EAAaW,CAAmC,CAAC,GAAGE,CAAM,GACpE,UAAW,GAAGb,EAAaW,CAAmC,CAAC,GAAGS,CAAU,GAC5E,SAAU,GAAGpB,EAAaW,CAAmC,CAAC,GAAGS,EAAaP,GAAU,CAAC,EAC3F,EAGF,MAAMQ,EAAcD,EAAaP,EAC3BS,EAAiB,IAAI,KAAK,aAAaZ,EAAkBC,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKY,EAAWF,EAAcC,EAAe,QAAQF,EAAaP,GAAUO,CAAU,EAAI,KAErFI,EAAQZ,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEQ,EAAYJ,EACdT,EAAY,CACV,OAAQQ,EACR,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAO,EAAO,UAAAC,EAAW,SAAAF,CAAS,CACtC,CAEO,SAASG,EAA8B,CAC5C,QAAApB,EACA,gBAAAqB,CACF,EAGG,CACD,OAAOrB,EAAQ,SAAS,KAAKC,GACpB,OAAO,QAAQoB,CAAe,EAAE,MAAM,CAAC,CAACC,EAAKC,CAAK,IACvDtB,EAAQ,QAAQ,KAAKuB,GAAU,CAC7B,GAAIA,EAAO,aAAe,wBAA0BA,EAAO,OAASF,EAClE,OAAOE,EAAO,OAAO,KAAKC,GAAKA,EAAE,QAAUF,CAAK,CAEpD,CAAC,CACH,CACD,CACH",
+  "names": ["PRICE_SYMBOL", "optionsConstructor", "options", "pre", "cur", "getFirstAvailableVariant", "product", "variant", "getVariantBySku", "sku", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice", "getVariantFromSelectedOptions", "selectedOptions", "key", "value", "option", "v"]
+}

package/dist/esm/biz-components/Listing/utils/textFormat.d.ts

@@ -0,0 +1,73 @@
+/**
+ * 字符串模板替换工具函数
+ * 使用单次遍历和正则表达式缓存来提高性能
+ */
+type ReplacementMap = Record<string, string>;
+/**
+ * 字符串模板替换函数
+ * @param template 模板字符串，如 "Hello {name}, you have {count} messages"
+ * @param replacements 替换对象，如 { name: "John", count: "5" }
+ * @param beginSeg 占位符开始符号，默认为 "{"
+ * @param endSeg 占位符结束符号，默认为 "}"
+ * @returns 替换后的字符串
+ *
+ * @example
+ * ```ts
+ * replaceTemplate("Hello {name}!", { name: "World" })
+ * // => "Hello World!"
+ *
+ * replaceTemplate("Price: {{amount}}", { amount: "$100" }, "{{", "}}")
+ * // => "Price: $100"
+ *
+ * replaceTemplate("You have {count} items", { count: "5", unused: "test" })
+ * // => "You have 5 items" (unused 键会被忽略)
+ *
+ * replaceTemplate("Hello ${name}!", { name: "World" }, "${", "}")
+ * // => "Hello World!"
+ * ```
+ */
+export declare function replaceTemplate(template: string, replacements: ReplacementMap, beginSeg?: string, endSeg?: string): string;
+/**
+ * 批量字符串模板替换函数（用于一次性替换多个模板）
+ * @param templates 模板字符串数组
+ * @param replacements 替换对象
+ * @param beginSeg 占位符开始符号，默认为 "{"
+ * @param endSeg 占位符结束符号，默认为 "}"
+ * @returns 替换后的字符串数组
+ *
+ * @example
+ * ```ts
+ * replaceTemplates(
+ *   ["Hello {name}!", "You have {count} items"],
+ *   { name: "John", count: "5" }
+ * )
+ * // => ["Hello John!", "You have 5 items"]
+ *
+ * replaceTemplates(
+ *   ["Hello {{name}}!", "Price: {{amount}}"],
+ *   { name: "John", amount: "$100" },
+ *   "{{",
+ *   "}}"
+ * )
+ * // => ["Hello John!", "Price: $100"]
+ * ```
+ */
+export declare function replaceTemplates(templates: string[], replacements: ReplacementMap, beginSeg?: string, endSeg?: string): string[];
+/**
+ * 从模板字符串中提取所有占位符键名
+ * @param template 模板字符串
+ * @param beginSeg 占位符开始符号，默认为 "{"
+ * @param endSeg 占位符结束符号，默认为 "}"
+ * @returns 占位符键名数组（去重）
+ *
+ * @example
+ * ```ts
+ * extractPlaceholders("Hello {name}, you have {count} new {count} messages")
+ * // => ["name", "count"]
+ *
+ * extractPlaceholders("Hello {{name}}, price is {{amount}}", "{{", "}}")
+ * // => ["name", "amount"]
+ * ```
+ */
+export declare function extractPlaceholders(template: string, beginSeg?: string, endSeg?: string): string[];
+export {};

package/dist/esm/biz-components/Listing/utils/textFormat.js

@@ -0,0 +1,2 @@
+const i=new Map;function a(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function o(e,n){const r=`${e}|${n}`;if(i.has(r))return i.get(r);const s=a(e),t=a(n),g=new RegExp(`${s}([a-zA-Z0-9_-]+)${t}`,"g");return i.set(r,g),g}function p(e,n,r="{",s="}"){if(!e||!n||Object.keys(n).length===0)return e;const t=o(r,s);return e.replace(t,(g,c)=>n[c]!==void 0?n[c]:g)}function u(e,n,r="{",s="}"){return e.map(t=>p(t,n,r,s))}function x(e,n="{",r="}"){if(!e)return[];const s=o(n,r),t=new Set;let g;for(;(g=s.exec(e))!==null;)t.add(g[1]);return Array.from(t)}export{x as extractPlaceholders,p as replaceTemplate,u as replaceTemplates};
+//# sourceMappingURL=textFormat.js.map

package/dist/esm/biz-components/Listing/utils/textFormat.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/utils/textFormat.ts"],
+  "sourcesContent": ["/**\n * \u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u5DE5\u5177\u51FD\u6570\n * \u4F7F\u7528\u5355\u6B21\u904D\u5386\u548C\u6B63\u5219\u8868\u8FBE\u5F0F\u7F13\u5B58\u6765\u63D0\u9AD8\u6027\u80FD\n */\n\ntype ReplacementMap = Record<string, string>\n\n// \u7F13\u5B58\u6B63\u5219\u8868\u8FBE\u5F0F\u4EE5\u63D0\u9AD8\u6027\u80FD\nconst regexCache = new Map<string, RegExp>()\n\n/**\n * \u8F6C\u4E49\u6B63\u5219\u8868\u8FBE\u5F0F\u7279\u6B8A\u5B57\u7B26\n * @param str \u9700\u8981\u8F6C\u4E49\u7684\u5B57\u7B26\u4E32\n * @returns \u8F6C\u4E49\u540E\u7684\u5B57\u7B26\u4E32\n */\nfunction escapeRegExp(str: string): string {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * \u83B7\u53D6\u6216\u521B\u5EFA\u6B63\u5219\u8868\u8FBE\u5F0F\uFF08\u5E26\u7F13\u5B58\uFF09\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u5982 \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u5982 \"}\"\n * @returns \u7F16\u8BD1\u540E\u7684\u6B63\u5219\u8868\u8FBE\u5F0F\n */\nfunction getRegex(beginSeg: string, endSeg: string): RegExp {\n  const cacheKey = `${beginSeg}|${endSeg}`\n\n  if (regexCache.has(cacheKey)) {\n    return regexCache.get(cacheKey)!\n  }\n\n  // \u8F6C\u4E49\u7279\u6B8A\u5B57\u7B26\uFF0C\u6784\u5EFA\u6B63\u5219\u8868\u8FBE\u5F0F\n  // \u5339\u914D beginSeg + key + endSeg\uFF0Ckey \u53EF\u4EE5\u662F\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF\u3001\u8FDE\u5B57\u7B26\n  const escapedBegin = escapeRegExp(beginSeg)\n  const escapedEnd = escapeRegExp(endSeg)\n  const regex = new RegExp(`${escapedBegin}([a-zA-Z0-9_-]+)${escapedEnd}`, 'g')\n\n  regexCache.set(cacheKey, regex)\n  return regex\n}\n\n/**\n * \u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u51FD\u6570\n * @param template \u6A21\u677F\u5B57\u7B26\u4E32\uFF0C\u5982 \"Hello {name}, you have {count} messages\"\n * @param replacements \u66FF\u6362\u5BF9\u8C61\uFF0C\u5982 { name: \"John\", count: \"5\" }\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u66FF\u6362\u540E\u7684\u5B57\u7B26\u4E32\n *\n * @example\n * ```ts\n * replaceTemplate(\"Hello {name}!\", { name: \"World\" })\n * // => \"Hello World!\"\n *\n * replaceTemplate(\"Price: {{amount}}\", { amount: \"$100\" }, \"{{\", \"}}\")\n * // => \"Price: $100\"\n *\n * replaceTemplate(\"You have {count} items\", { count: \"5\", unused: \"test\" })\n * // => \"You have 5 items\" (unused \u952E\u4F1A\u88AB\u5FFD\u7565)\n *\n * replaceTemplate(\"Hello ${name}!\", { name: \"World\" }, \"${\", \"}\")\n * // => \"Hello World!\"\n * ```\n */\nexport function replaceTemplate(\n  template: string,\n  replacements: ReplacementMap,\n  beginSeg: string = '{',\n  endSeg: string = '}',\n): string {\n  if (!template) return template\n  if (!replacements || Object.keys(replacements).length === 0) return template\n\n  const regex = getRegex(beginSeg, endSeg)\n\n  // \u4F7F\u7528 replace \u65B9\u6CD5\u8FDB\u884C\u66FF\u6362\uFF0C\u6027\u80FD\u4F18\u4E8E\u624B\u52A8\u904D\u5386\n  return template.replace(regex, (match, key) => {\n    // \u5982\u679C key \u5B58\u5728\u4E8E replacements \u4E2D\uFF0C\u5219\u8FD4\u56DE\u5BF9\u5E94\u7684\u503C\n    // \u5426\u5219\u4FDD\u6301\u539F\u6837\uFF08\u8FD4\u56DE\u6574\u4E2A\u5339\u914D\u5185\u5BB9\uFF09\n    return replacements[key] !== undefined ? replacements[key] : match\n  })\n}\n\n/**\n * \u6279\u91CF\u5B57\u7B26\u4E32\u6A21\u677F\u66FF\u6362\u51FD\u6570\uFF08\u7528\u4E8E\u4E00\u6B21\u6027\u66FF\u6362\u591A\u4E2A\u6A21\u677F\uFF09\n * @param templates \u6A21\u677F\u5B57\u7B26\u4E32\u6570\u7EC4\n * @param replacements \u66FF\u6362\u5BF9\u8C61\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u66FF\u6362\u540E\u7684\u5B57\u7B26\u4E32\u6570\u7EC4\n *\n * @example\n * ```ts\n * replaceTemplates(\n *   [\"Hello {name}!\", \"You have {count} items\"],\n *   { name: \"John\", count: \"5\" }\n * )\n * // => [\"Hello John!\", \"You have 5 items\"]\n *\n * replaceTemplates(\n *   [\"Hello {{name}}!\", \"Price: {{amount}}\"],\n *   { name: \"John\", amount: \"$100\" },\n *   \"{{\",\n *   \"}}\"\n * )\n * // => [\"Hello John!\", \"Price: $100\"]\n * ```\n */\nexport function replaceTemplates(\n  templates: string[],\n  replacements: ReplacementMap,\n  beginSeg: string = '{',\n  endSeg: string = '}',\n): string[] {\n  return templates.map((template) => replaceTemplate(template, replacements, beginSeg, endSeg))\n}\n\n/**\n * \u4ECE\u6A21\u677F\u5B57\u7B26\u4E32\u4E2D\u63D0\u53D6\u6240\u6709\u5360\u4F4D\u7B26\u952E\u540D\n * @param template \u6A21\u677F\u5B57\u7B26\u4E32\n * @param beginSeg \u5360\u4F4D\u7B26\u5F00\u59CB\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"{\"\n * @param endSeg \u5360\u4F4D\u7B26\u7ED3\u675F\u7B26\u53F7\uFF0C\u9ED8\u8BA4\u4E3A \"}\"\n * @returns \u5360\u4F4D\u7B26\u952E\u540D\u6570\u7EC4\uFF08\u53BB\u91CD\uFF09\n *\n * @example\n * ```ts\n * extractPlaceholders(\"Hello {name}, you have {count} new {count} messages\")\n * // => [\"name\", \"count\"]\n *\n * extractPlaceholders(\"Hello {{name}}, price is {{amount}}\", \"{{\", \"}}\")\n * // => [\"name\", \"amount\"]\n * ```\n */\nexport function extractPlaceholders(template: string, beginSeg: string = '{', endSeg: string = '}'): string[] {\n  if (!template) return []\n\n  const regex = getRegex(beginSeg, endSeg)\n  const keys = new Set<string>()\n  let match: RegExpExecArray | null\n\n  // \u4F7F\u7528 exec \u5FAA\u73AF\u66FF\u4EE3 matchAll \u4EE5\u4FDD\u8BC1\u517C\u5BB9\u6027\n  while ((match = regex.exec(template)) !== null) {\n    keys.add(match[1])\n  }\n\n  return Array.from(keys)\n}\n"],
+  "mappings": "AAQA,MAAMA,EAAa,IAAI,IAOvB,SAASC,EAAaC,EAAqB,CACzC,OAAOA,EAAI,QAAQ,sBAAuB,MAAM,CAClD,CAQA,SAASC,EAASC,EAAkBC,EAAwB,CAC1D,MAAMC,EAAW,GAAGF,CAAQ,IAAIC,CAAM,GAEtC,GAAIL,EAAW,IAAIM,CAAQ,EACzB,OAAON,EAAW,IAAIM,CAAQ,EAKhC,MAAMC,EAAeN,EAAaG,CAAQ,EACpCI,EAAaP,EAAaI,CAAM,EAChCI,EAAQ,IAAI,OAAO,GAAGF,CAAY,mBAAmBC,CAAU,GAAI,GAAG,EAE5E,OAAAR,EAAW,IAAIM,EAAUG,CAAK,EACvBA,CACT,CAyBO,SAASC,EACdC,EACAC,EACAR,EAAmB,IACnBC,EAAiB,IACT,CAER,GADI,CAACM,GACD,CAACC,GAAgB,OAAO,KAAKA,CAAY,EAAE,SAAW,EAAG,OAAOD,EAEpE,MAAMF,EAAQN,EAASC,EAAUC,CAAM,EAGvC,OAAOM,EAAS,QAAQF,EAAO,CAACI,EAAOC,IAG9BF,EAAaE,CAAG,IAAM,OAAYF,EAAaE,CAAG,EAAID,CAC9D,CACH,CA2BO,SAASE,EACdC,EACAJ,EACAR,EAAmB,IACnBC,EAAiB,IACP,CACV,OAAOW,EAAU,IAAKL,GAAaD,EAAgBC,EAAUC,EAAcR,EAAUC,CAAM,CAAC,CAC9F,CAkBO,SAASY,EAAoBN,EAAkBP,EAAmB,IAAKC,EAAiB,IAAe,CAC5G,GAAI,CAACM,EAAU,MAAO,CAAC,EAEvB,MAAMF,EAAQN,EAASC,EAAUC,CAAM,EACjCa,EAAO,IAAI,IACjB,IAAIL,EAGJ,MAAQA,EAAQJ,EAAM,KAAKE,CAAQ,KAAO,MACxCO,EAAK,IAAIL,EAAM,CAAC,CAAC,EAGnB,OAAO,MAAM,KAAKK,CAAI,CACxB",
+  "names": ["regexCache", "escapeRegExp", "str", "getRegex", "beginSeg", "endSeg", "cacheKey", "escapedBegin", "escapedEnd", "regex", "replaceTemplate", "template", "replacements", "match", "key", "replaceTemplates", "templates", "extractPlaceholders", "keys"]
+}

package/dist/esm/biz-components/TabWithImage/TabWithImage.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import I,{useState as x,useEffect as N,useRef as d,useImperativeHandle as k}from"react";import{Heading as f,Picture as D,Text as E}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as L}from"../../hooks/useExposure.js";import{motion as M,AnimatePresence as W}from"framer-motion";const P="image",R="tab_with_image",b=I.forwardRef(({data:v,className:h},g)=>{const{title:n,subtitle:z,desc:p,image:A,mobileImage:S,datalist:a=[]}=v,m=d(null);L(m,{componentType:P,componentName:R,componentTitle:n,componentDescription:p}),k(g,()=>m.current);const w=(l,i)=>{y(l),i.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[e,y]=x(0),r=d([]),[c,T]=x({left:0,width:0});return N(()=>{const l=r.current[e];if(l){const{offsetLeft:i,offsetWidth:o}=l;T({left:i,width:o})}},[e,a.length]),s("section",{ref:m,"data-ui-component-id":"TabWithImage",className:u("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",h),children:[s("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{children:[t(f,{as:"h3",size:4,html:n}),t(E,{as:"p",size:1,html:p,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),t("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[t("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:c.left,width:c.width}}),a.map((l,i)=>t("div",{ref:o=>{r.current[i]=o},onClick:o=>w(i,o),className:u("relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",e===i?"text-black":"text-white"),children:t(f,{as:"h1",size:1,html:l?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},i))]})})]}),t("div",{className:" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:t(W,{mode:"wait",children:t(M.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:t(D,{source:`${a[e].image.url} ,${a[e].imgPad?.url||a[e].image.url} 1440, ${a[e].imageMob?.url||a[e].image.url} 767`,alt:a[e].image.alt,className:"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},a[e].image.url)})})]})});b.displayName="TabWithImage";var q=H(b);export{q as default};
+"use client";import{jsx as a,jsxs as s}from"react/jsx-runtime";import I,{useState as x,useEffect as N,useRef as d,useImperativeHandle as k}from"react";import{Heading as f,Picture as D,Text as E}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as L}from"../../hooks/useExposure.js";import{motion as M,AnimatePresence as W}from"framer-motion";const P="image",R="tab_with_image",b=I.forwardRef(({data:v,className:h},g)=>{const{title:n,subtitle:z,desc:p,image:A,mobileImage:S,datalist:t=[]}=v,m=d(null);L(m,{componentType:P,componentName:R,componentTitle:n,componentDescription:p}),k(g,()=>m.current);const y=(l,i)=>{w(l),i.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[e,w]=x(0),r=d([]),[c,T]=x({left:0,width:0});return N(()=>{const l=r.current[e];if(l){const{offsetLeft:i,offsetWidth:o}=l;T({left:i,width:o})}},[e,t.length]),s("section",{ref:m,"data-ui-component-id":"TabWithImage",className:u("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",h),children:[s("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{children:[a(f,{as:"h3",size:4,html:n}),a(E,{as:"p",size:1,html:p,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),a("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[a("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:c.left,width:c.width}}),t.map((l,i)=>a("div",{ref:o=>{r.current[i]=o},onClick:o=>y(i,o),className:u("relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",e===i?"text-black":"text-white"),children:a(f,{as:"h1",size:1,html:l?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},i))]})})]}),a("div",{className:" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:a(W,{mode:"wait",children:t[e]&&a(M.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:a(D,{source:`${t[e].image.url} ,${t[e].imgPad?.url||t[e].image.url} 1440, ${t[e].imageMob?.url||t[e].image.url} 767`,alt:t[e].image.alt,className:"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},t[e].image.url)})})]})});b.displayName="TabWithImage";var q=H(b);export{q as default};
 //# sourceMappingURL=TabWithImage.js.map

package/dist/esm/biz-components/TabWithImage/TabWithImage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabWithImage/TabWithImage.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn('flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]', className)}\n    >\n      <div className=\"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={datalist[activeIndex].image.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"absolute left-0 top-0 w-full\"\n          >\n            <Picture\n              source={`${datalist[activeIndex].image.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image.url} 767`}\n              alt={datalist[activeIndex].image.alt}\n              className=\"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn('flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]', className)}\n    >\n      <div className=\"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          {datalist[activeIndex] && (\n            <motion.div\n              key={datalist[activeIndex].image.url}\n              {...({\n                initial: { opacity: 0 },\n                animate: { opacity: 1 },\n                exit: { opacity: 0 },\n                transition: { duration: 0.3 },\n              } as any)}\n              className=\"absolute left-0 top-0 w-full\"\n            >\n              <Picture\n                source={`${datalist[activeIndex].image.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image.url} 767`}\n                alt={datalist[activeIndex].image.alt}\n                className=\"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "motion", "AnimatePresence", "componentType", "componentName", "TabWithImage", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el", "TabWithImage_default"]
 }