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

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["import type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\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',\n    fr: 'de-DE',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\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]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${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\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}"],
-  "mappings": "AAEO,MAAMA,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,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,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGS,CAAU,GAC/C,SAAU,GAAGX,EAAaE,CAAM,CAAC,GAAGS,EAAaP,GAAU,CAAC,EAC9D,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",
-  "names": ["PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "price", "basePrice"]
+  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  nl: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\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    eu: 'en',\n    fr: 'fr-FR',\n    au: 'en-AU',\n    my: 'en-my',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    'ca-fr': 'fr-FR',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\n    'eu-pl': 'pl-PL',\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 code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n  const localeLanguage = languageTerritory(locale)\n  if (!localeLanguage) {\n    return null\n  }\n  const formatCurrency = new Intl.NumberFormat(localeLanguage, {\n    style: 'currency',\n    currency: code,\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    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]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  let discount = null\n  const currentLocale = languageTerritory(locale)\n  if (currentLocale) {\n    const formatDiscount = new Intl.NumberFormat(currentLocale, {\n      style: 'percent',\n    })\n    discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  }\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount;\n  if (hasDiscount) { \n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\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, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: boolean\n  direction?: 'horizontal' | 'vertical'\n  align?: 'left' | 'center' | 'right'\n  productsTab?: any[]\n  productsCard?: any[]\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n  tabShape?: 'rounded' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}"],
+  "mappings": "AAAA,OAAOA,MAAa,aAGb,MAAMC,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,OACX,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CACD,MAAMC,EAAOP,IAAW,KAAO,MAAQG,GAAgB,MACjDK,EAAiBT,EAAkBC,CAAM,EAC/C,GAAI,CAACQ,EACH,OAAO,KAST,IAAIC,EAPmB,IAAI,KAAK,aAAaD,EAAgB,CAC3D,MAAO,WACP,SAAUD,EACV,sBAAuBH,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,GAEoC,SAASF,CAAM,EAEpD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDS,EAAiBA,GAAgB,SAAS,GAAG,UAAU,QAAS,EAAE,GAGhEH,IACFG,EAAiBA,GACb,UAAU,oBAAqB,IAAI,GACnC,UAAU,SAAU,EAAE,GACtB,UAAU,oBAAqB,IAAI,GACnC,UAAU,SAAU,EAAE,GAGrBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAR,EACA,WAAAS,EACA,aAAAR,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGW,CAAU,GAC/C,SAAU,GAAGb,EAAaE,CAAM,CAAC,GAAGW,EAAaT,GAAU,CAAC,EAC9D,EAGF,MAAMU,EAAcD,EAAaT,EACjC,IAAIW,EAAW,KACf,MAAMC,EAAgBf,EAAkBC,CAAM,EAC9C,GAAIc,EAAe,CACjB,MAAMC,EAAiB,IAAI,KAAK,aAAaD,EAAe,CAC1D,MAAO,SACT,CAAC,EACDD,EAAWD,EAAcG,EAAe,QAAQJ,EAAaT,GAAUS,CAAU,EAAI,IACvF,CAEA,IAAIK,EACJ,GAAIJ,EAAa,CACf,MAAMK,EAAkB,IAAIpB,EAAQc,CAAU,EAAE,IAAIT,GAAU,CAAC,EAAE,SAAS,EAC1Ec,EAAiBf,EAAY,CAC3B,OAAQgB,EACR,aAAcd,GAAgB,MAC9B,OAAAH,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMkB,EAAQjB,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEa,EAAYP,EACdX,EAAY,CACV,OAAQU,EACR,aAAAR,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAY,EAAO,UAAAC,EAAW,SAAAN,EAAU,eAAAG,CAAe,CACtD",
+  "names": ["Decimal", "PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "localeLanguage", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "discount", "currentLocale", "formatDiscount", "discountAmount", "savePriceAmount", "price", "basePrice"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js

@@ -1,10 +1,10 @@
-import{Fragment as P,jsx as l,jsxs as p}from"react/jsx-runtime";import{useAiuiContext as $}from"../AiuiProvider/index.js";import{formatVariantPrice as j}from"./shelfDisplay.js";import I from"../../components/picture.js";import O from"../../components/badge.js";import{cn as m}from"../../helpers/utils.js";import{Text as H}from"../../components/text.js";import y from"../../components/button.js";import{gaTrack as L}from"../../shared/track.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{Heading as E}from"../../components/heading.js";import{useExposure as F}from"../../hooks/useExposure.js";import{useRef as U}from"react";const k="image",w="product_shelf",W=999999999e-2,te=({data:t,configuration:e})=>{const{isDisplayBackImage:g=!1,itemShape:f}=e||{},{locale:n="us",copyWriting:S}=$(),v=U(null),_=(o,s,i)=>e?.event?.primaryButton?.(o,s+1,i),N=(o,s,i)=>e?.event?.secondaryButton?.(o,s+1,i),a=t?.variants?.find(o=>o?.sku===t?.sku)||t?.variants?.[0]||{},B=!a?.availableForSale&&a?.price?.amount===W,D=e?.isShowTag,h=e?.isShowOriginalPrice,c=a?.coupons?.[0],{price:T,basePrice:C}=j({locale:n,amount:h&&c?c.variant_price4wscode:a.price,baseAmount:h&&c?a.price:0,currencyCode:t?.price?.currencyCode||"USD"}),b=()=>{const o=t?.sku,s=t?.variants;return s?.find(u=>u?.sku===o)?.image?.url||s?.[0]?.image?.url||""},r=t?.custom_name||t?.title,d=t?.custom_description||t?.description;F(v,{componentType:k,componentName:w,componentTitle:r,componentDescription:d,position:e?.index+1});const x=()=>p(P,{children:[D?l("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:t?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,s)=>l(O,{children:o},s))}):null,r?l(E,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,d?l(H,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:d||""}):null,l("div",{className:"mb-2 mt-5 flex items-center",children:B?l("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:S?.soldOutText}):p(P,{children:[l("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&T||""}),l("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&C||""})]})}),p("div",{className:m("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",e.direction==="vertical"?"flex-col":""),children:[e?.secondaryButton?l(y,{variant:"secondary",onClick:()=>N(t,e?.index,e),className:`
-                ${e.direction==="vertical"?"w-full":""}
-              `,children:e?.secondaryButton||""}):null,e?.primaryButton?l(y,{variant:"primary",onClick:()=>_(t,e?.index,e),className:`
-              ${e.direction==="vertical"?"w-full":""}
-            `,children:e?.primaryButton||""}):null]})]});return l("div",{ref:v,className:m("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",f==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:g?l("div",{className:"absolute inset-0 box-border overflow-hidden",children:p("div",{className:"relative inset-0 size-full",children:[l(I,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),l("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:x()})]})}):p("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[l("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:l("a",{"aria-label":r,target:e?.target,href:z(`${n==="us"||!n?"":`/${n}`}/products/${t?.handle}`,`${k}_${w}`),onClick:()=>{L({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:t?.sku||a?.sku,item_name:t?.name,item_variant:a?.name,price:a?.price,index:e?.index+1}]}})},children:l(I,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),x()]})},t?.id||t?.handle)},le=({data:t,configuration:e})=>{const{itemShape:g,itemLength:f}=e||{},{locale:n="us",copyWriting:S}=$(),v=U(null),_=(s,i,u)=>e?.event?.primaryButton?.(s,i+1,u),N=(s,i,u)=>e?.event?.secondaryButton?.(s,i+1,u),a=t?.variants?.find(s=>s?.sku===t?.sku)||t?.variants?.[0]||{},B=!a?.availableForSale&&a?.price?.amount===W,D=e?.isShowTag,h=e?.isShowOriginalPrice,c=a?.coupons?.[0],{price:T,basePrice:C}=j({locale:n,amount:h&&c?c.variant_price4wscode:a.price,baseAmount:h&&c?a.price:0,currencyCode:t?.price?.currencyCode||"USD"}),b=()=>{const s=t?.sku,i=t?.variants;return i?.find(A=>A?.sku===s)?.image?.url||i?.[0]?.image?.url||""},r=t?.custom_name||t?.title,d=t?.custom_description||t?.description;F(v,{componentType:k,componentName:w,componentTitle:r,componentDescription:d,position:e?.index+1});const x=()=>f>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},o=()=>f>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return l("div",{ref:v,className:m(x().wrap,g==="round"?"rounded-2xl":"rounded-none","bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6","box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]"),children:p("div",{className:m(o(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[l("div",{className:m(x().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:l("a",{"aria-label":r,target:e?.target,href:z(`${n==="us"||!n?"":`/${n}`}/products/${t?.handle}`,`${k}_${w}`),onClick:()=>{L({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:t?.sku||a?.sku,item_name:t?.name,item_variant:a?.name,price:a?.price,index:e?.index+1}]}})},children:l(I,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),p("div",{className:m("flex flex-col justify-center items-start",x().boxItem),children:[D?l("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:t?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,i)=>l(O,{children:s},i))}):null,r?l(E,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,d?l(H,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:d||""}):null,l("div",{className:"mb-2 mt-5 flex items-center",children:B?l("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:S?.soldOutText}):p(P,{children:[l("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&T||""}),l("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&C||""})]})}),p("div",{className:m("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",e.direction==="vertical"?"flex-col":""),children:[e?.secondaryButton?l(y,{variant:"secondary",onClick:()=>N(t,e?.index,e),className:`
-                ${e.direction==="vertical"?"w-full":""}
-              `,children:e?.secondaryButton||""}):null,e?.primaryButton?l(y,{variant:"primary",onClick:()=>_(t,e?.index,e),className:`
-              ${e.direction==="vertical"?"w-full":""}
-            `,children:e?.primaryButton||""}):null]})]})]})},t?.id||t?.handle)};export{le as ShelfDisplayHorizontalItem,te as ShelfDisplayWrapItem};
+import{Fragment as A,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as H}from"../AiuiProvider/index.js";import{formatVariantPrice as L}from"./shelfDisplay.js";import O from"../../components/picture.js";import z from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as F}from"../../components/text.js";import N from"../../components/button.js";import{gaTrack as U}from"../../shared/track.js";import{trackUrlRef as W}from"../../shared/trackUrlRef.js";import{Heading as R}from"../../components/heading.js";import{useEffect as M,useState as V}from"react";import{useExposure as q}from"../../hooks/useExposure.js";import{useRef as G}from"react";const T="image",B="product_shelf",J=999999999e-2,pe=({data:e,configuration:t})=>{const{itemShape:D,metafields:k}=t||{},{locale:x="us",copyWriting:C}=H(),{discounts:h}=k||{},[$,I]=V([]),w=G(null),S=(o,r,l)=>t?.event?.primaryButton?.(o,r+1,l),P=(o,r,l)=>t?.event?.secondaryButton?.(o,r+1,l),i=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},a=!i?.availableForSale&&i?.price?.amount===J,E=t?.isShowTag,_=t?.isShowOriginalPrice,f=i?.coupons?.[0],{price:g,basePrice:j,discount:v}=L({locale:x,amount:_&&f?f.variant_price4wscode:i?.price,baseAmount:_&&f?i?.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const o=e?.sku,r=e?.variants;return r?.find(n=>n?.sku===o)?.image?.url||r?.[0]?.image?.url||""},u=e?.custom_name||e?.title||e?.name,m=e?.custom_description||e?.description;M(()=>{let o=[];if(v){const l=`${v}${h?.off||""}`;o.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,v?1:2);I(o.concat(r))},[e?.tags,v]),q(w,{componentType:T,componentName:B,componentTitle:u,componentDescription:m,position:t?.index+1});const y=()=>c(A,{children:[E?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:$?.map?.((o,r)=>s(z,{children:o},r))}):null,u?s(R,{as:"h3",title:u||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2 text-info-primary",html:u||""}):null,m?s(F,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm text-info-primary",html:m||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:a?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:C?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&g||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&j||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(N,{variant:"secondary",onClick:()=>P(e,t?.index,t),className:`
+                ${t.direction==="vertical"?"w-full":""}
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(N,{variant:"primary",onClick:()=>S(e,t?.index,t),className:`
+              ${t.direction==="vertical"?"w-full":""}
+            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:w,className:d("bg-[#EAEAEC] tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",D==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]",{"aiui-dark":e?.custom_theme==="dark"}),children:e?.custom_image?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(O,{alt:"",source:e?.custom_image,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:y()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[s("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":u,target:t?.target,href:W(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${T}_${B}`),onClick:()=>{U({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(O,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),y()]})},e?.id||e?.handle)},me=({data:e,configuration:t})=>{const{itemShape:D,itemLength:k,metafields:x}=t||{},{discounts:C}=x||{},{locale:h="us",copyWriting:$}=H(),[I,w]=V([]),S=G(null),P=(l,n,p)=>t?.event?.primaryButton?.(l,n+1,p),i=(l,n,p)=>t?.event?.secondaryButton?.(l,n+1,p),a=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},E=!a?.availableForSale&&a?.price?.amount===J,_=t?.isShowTag,f=t?.isShowOriginalPrice,g=a?.coupons?.[0],{price:j,basePrice:v,discount:b}=L({locale:h,amount:f&&g?g.variant_price4wscode:a.price,baseAmount:f&&g?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const l=e?.sku,n=e?.variants;return n?.find(K=>K?.sku===l)?.image?.url||n?.[0]?.image?.url||""},m=e?.custom_name||e?.title,y=e?.custom_description||e?.description;q(S,{componentType:T,componentName:B,componentTitle:m,componentDescription:y,position:t?.index+1});const o=()=>k>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},r=()=>k>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return M(()=>{let l=[];if(b){const p=`${b}${C?.off||""}`;l.push(p)}const n=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,b?1:2);w(l.concat(n))},[e?.tags,b]),s("div",{ref:S,className:d(o().wrap,D==="round"?"rounded-2xl":"rounded-none","bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 gap-6","box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]",{"aiui-dark":e.custom_theme==="dark"}),children:c("div",{className:d(r(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(o().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:s("a",{"aria-label":m,target:t?.target,href:W(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${T}_${B}`),onClick:()=>{U({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,price:a?.price,item_variant:a?.name,index:t?.index+1}]}})},children:s(O,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:d("flex flex-col justify-center items-start",o().boxItem),children:[_?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:I?.map?.((l,n)=>s(z,{children:l},n))}):null,m?s(R,{as:"h3",title:m||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2 text-info-primary",html:m||""}):null,y?s(F,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm text-info-primary",html:y||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:E?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:$?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&v||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(N,{variant:"secondary",onClick:()=>i(e,t?.index,t),className:`
+                ${t.direction==="vertical"?"w-full":""}
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(N,{variant:"primary",onClick:()=>P(e,t?.index,t),className:`
+              ${t.direction==="vertical"?"w-full":""}
+            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{me as ShelfDisplayHorizontalItem,pe as ShelfDisplayWrapItem};
 //# sourceMappingURL=shelfDisplayItem.js.map

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { isDisplayBackImage = false, itemShape } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const bottomContent = () => {\n    return (\n      <>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title mb-1 line-clamp-2\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-5 flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          <div\n            className={cn(\n              'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n   useExposure(ref, {\n     componentType,\n     componentName,\n     componentTitle: displayTitle,\n     componentDescription: displayDescription,\n     position: configuration?.index + 1,\n   })\n\n  const showSizeClass = (): {\n    boxItem: string     \n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n        wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n      wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n    }\n  }\n    \n    const handleWrapClass = () => {\n        if (itemLength >= 2) {\n            return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n        }\n        return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n    }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\n      )}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div className={cn(showSizeClass().imgItem, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      item_variant: variant?.name,\n                      price: variant?.price,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {data?.tags\n                ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n                ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n                ?.slice?.(0, 2)\n                ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title mb-1 line-clamp-2\"\n              html={displayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton ? (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n                className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                variant=\"primary\"\n                onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n                className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "locale", "copyWriting", "ref", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
+  "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useEffect, useState } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, metafields } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts } = metafields || {}\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant?.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant?.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title || data?.name\n  const displayDescription = data?.custom_description || data?.description\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const bottomContent = () => {\n    return (\n      <>\n        {isShowTag ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {showTags?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n          </div>\n        ) : null}\n        {displayTitle ? (\n          <Heading\n            as=\"h3\"\n            title={displayTitle || ''}\n            size={2}\n            className=\"shelf-display-product-title mb-1 line-clamp-2 text-info-primary\"\n            html={displayTitle || ''}\n          />\n        ) : null}\n        {displayDescription ? (\n          <Text\n            size={2}\n            className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm text-info-primary\"\n            html={displayDescription || ''}\n          />\n        ) : null}\n        <div className=\"mb-2 mt-5 flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                {variant?.availableForSale ? price || '' : ''}\n              </div>\n              <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                {variant?.availableForSale ? basePrice || '' : ''}\n              </div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'shelf-flex-button-group',\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-[#EAEAEC] tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]',\n        {\n          'aiui-dark': data?.custom_theme === 'dark',\n        }\n      )}\n    >\n      {data?.custom_image ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture\n              alt=\"\"\n              source={data?.custom_image}\n              className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n            />\n            <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n              {bottomContent()}\n            </div>\n          </div>\n        </div>\n      ) : (\n        <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n          <div\n            className={cn(\n              'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n            )}\n          >\n            <a\n              aria-label={displayTitle}\n              target={configuration?.target}\n              href={trackUrlRef(\n                `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n                `${componentType}_${componentName}`\n              )}\n              onClick={() => {\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'select_item',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    item_list_name: 'Home_Page_Bundle',\n                    items: [\n                      {\n                        item_id: data?.sku || variant?.sku,\n                        item_name: data?.name,\n                        item_variant: variant?.name,\n                        price: variant?.price,\n                        index: configuration?.index + 1,\n                      },\n                    ],\n                  },\n                })\n              }}\n            >\n              <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n            </a>\n          </div>\n          {bottomContent()}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { itemShape, itemLength, metafields } = configuration || {}\n  const { discounts } = metafields || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const [showTags, setShowTags] = useState<string[]>([])\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n  const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n  // active \u7684 \u901A\u7528\u6298\u6263\n  const coupon = variant?.coupons?.[0]\n\n  const { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: displayTitle,\n    componentDescription: displayDescription,\n    position: configuration?.index + 1,\n  })\n\n  const showSizeClass = (): {\n    boxItem: string\n    imgItem: string\n    wrap: string\n  } => {\n    if (itemLength >= 2) {\n      return {\n        boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n        imgItem:\n          'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n        wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n      }\n    }\n    return {\n      boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n      imgItem:\n        'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n      wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n    }\n  }\n\n  const handleWrapClass = () => {\n    if (itemLength >= 2) {\n      return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n    }\n    return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n  }\n\n  // \u5904\u7406\u6807\u7B7E\n  useEffect(() => {\n    let handleTags: string[] = []\n    if (discount) {\n      const discountTag = `${discount}${discounts?.off || ''}`\n      handleTags.push(discountTag)\n    }\n    const newTags = data?.tags\n      ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, discount ? 1 : 2)\n    setShowTags(handleTags.concat(newTags))\n  }, [data?.tags, discount])\n\n  return (\n    <div\n      ref={ref}\n      key={data?.id || data?.handle}\n      className={cn(\n        showSizeClass().wrap,\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]',\n        {\n          'aiui-dark': data.custom_theme === 'dark',\n        }\n      )}\n    >\n      <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n        <div className={cn(showSizeClass().imgItem, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n              `${componentType}_${componentName}`\n            )}\n            onClick={() => {\n              gaTrack({\n                event: 'ga4Event',\n                event_name: 'select_item',\n                event_parameters: {\n                  page_group: 'Home Page',\n                  item_list_name: 'Home_Page_Bundle',\n                  items: [\n                    {\n                      item_id: data?.sku || variant?.sku,\n                      item_name: data?.name,\n                      price: variant?.price,\n                      item_variant: variant?.name,\n                      index: configuration?.index + 1,\n                    },\n                  ],\n                },\n              })\n            }}\n          >\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {showTags?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n            </div>\n          ) : null}\n          {displayTitle ? (\n            <Heading\n              as=\"h3\"\n              title={displayTitle || ''}\n              size={2}\n              className=\"shelf-display-product-title mb-1 line-clamp-2 text-info-primary\"\n              html={displayTitle || ''}\n            />\n          ) : null}\n          {displayDescription ? (\n            <Text\n              size={2}\n              className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm text-info-primary\"\n              html={displayDescription || ''}\n            />\n          ) : null}\n          <div className=\"mb-2 mt-5 flex items-center\">\n            {isSoldOut ? (\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n            ) : (\n              <>\n                <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n                  {variant?.availableForSale ? price || '' : ''}\n                </div>\n                <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n                  {variant?.availableForSale ? basePrice || '' : ''}\n                </div>\n              </>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div\n            className={cn(\n              'shelf-flex-button-group',\n              'lg-desktop:gap-3 flex items-center gap-2',\n              configuration.direction === 'vertical' ? 'flex-col' : ''\n            )}\n          >\n            {configuration?.secondaryButton ? (\n              <Button\n                variant=\"secondary\"\n                onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n                className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n              >\n                {configuration?.secondaryButton || ''}\n              </Button>\n            ) : null}\n            {configuration?.primaryButton ? (\n              <Button\n                variant=\"primary\"\n                onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n                className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n              >\n                {configuration?.primaryButton || ''}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useEffect", "useState", "useExposure", "useRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "itemShape", "metafields", "locale", "copyWriting", "discounts", "showTags", "setShowTags", "ref", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
 }

package/dist/esm/biz-components/Specs/dropdown.d.ts

@@ -0,0 +1,11 @@
+export type DropDownProps = {
+    index: number;
+    active: any;
+    list: any;
+    setActive: any;
+    setVisible: any;
+    visible: any;
+    filterActive: any;
+};
+declare const DropDown: ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
+export default DropDown;

package/dist/esm/biz-components/Specs/dropdown.js

@@ -0,0 +1,3 @@
+import{jsx as a}from"react/jsx-runtime";import{useEffect as b,useRef as h,useMemo as x}from"react";const m="openDropDown",v=({index:l,active:s,list:d,setActive:p,setVisible:c,visible:t,filterActive:r})=>{const u=h(null);b(()=>{const e=n=>{const o=n?.target?.getAttribute?.("class");!u?.current?.contains(n?.target)&&!o?.includes(m)&&c({...t,[l]:!1})};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)},[]);const f=x(()=>{const e=Object.keys(r||{});return d?.filter(n=>!e?.find(i=>r?.[i]?.handle===n?.handle))},[r,d]);return a("div",{ref:u,className:`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${t?.[l]?"block":"hidden"}`,children:a("div",{className:"m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0",children:f?.map((e,n)=>{const o=e?.sku||e?.variants?.[0]?.sku;return a("div",{onClick:()=>{p({...s,[n]:{sku:o,name:e?.name,handle:e?.handle}}),c({...t,[n]:!1})},title:e?.name,className:`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]
+                ${e?.handle===s?.handle?"bg-[#EAEAEC]":""}`,children:e?.name},n)})})})};var D=v;export{D as default};
+//# sourceMappingURL=dropdown.js.map

package/dist/esm/biz-components/Specs/dropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Specs/dropdown.tsx"],
+  "sourcesContent": ["import { useEffect, useRef, useMemo } from 'react'\n\nconst clickContent = 'openDropDown'\n\nexport type DropDownProps = {\n  index: number\n  active: any\n  list: any\n  setActive: any\n  setVisible: any\n  visible: any\n  filterActive: any\n}\n\nconst DropDown = ({ index, active, list, setActive, setVisible, visible, filterActive }: DropDownProps) => {\n  const dropDownRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: any) => {\n      const isDel = event?.target?.getAttribute?.('class')\n      const isContainer = !dropDownRef?.current?.contains(event?.target)\n      if (isContainer && !isDel?.includes(clickContent)) {\n        setVisible({ ...visible, [index]: false })\n      }\n    }\n    document.addEventListener('click', handleClickOutside)\n    return () => document.removeEventListener('click', handleClickOutside)\n  }, [])\n\n  const handleList = useMemo(() => {\n    const activeIndex = Object.keys(filterActive || {})\n    return list?.filter((item: { handle: any }) => {\n      const currentIndex = activeIndex?.find((items: string) => filterActive?.[items]?.handle === item?.handle)\n      return !currentIndex\n    })\n  }, [filterActive, list])\n\n  return (\n    <div\n      ref={dropDownRef}\n      className={`absolute left-0 top-[104%] z-30 box-border max-h-[340px] w-full overflow-hidden rounded-lg bg-[#F5F5F7] ${visible?.[index] ? 'block' : 'hidden'}`}\n    >\n      <div className={'m-0 box-border h-full flex-1 overflow-y-auto overflow-x-hidden p-0 [&:last-child]:border-r-0'}>\n        {handleList?.map((item: any, index: number) => {\n          const currentSku = item?.sku || item?.variants?.[0]?.sku\n          return (\n            <div\n              key={index}\n              onClick={() => {\n                setActive({\n                  ...active,\n                  [index]: {\n                    sku: currentSku,\n                    name: item?.name,\n                    handle: item?.handle,\n                  },\n                })\n                setVisible({ ...visible, [index]: false })\n              }}\n              title={item?.name}\n              className={`openDropDown box-border cursor-pointer truncate px-6 py-4 text-base font-bold min-xl:text-lg min-xxl:text-lg [&:hover]:bg-[#EAEAEC]\n                ${item?.handle === active?.handle ? 'bg-[#EAEAEC]' : ''}`}\n            >\n              {item?.name}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default DropDown\n"],
+  "mappings": "AA8CY,cAAAA,MAAA,oBA9CZ,OAAS,aAAAC,EAAW,UAAAC,EAAQ,WAAAC,MAAe,QAE3C,MAAMC,EAAe,eAYfC,EAAW,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAY,QAAAC,EAAS,aAAAC,CAAa,IAAqB,CACzG,MAAMC,EAAcX,EAAuB,IAAI,EAE/CD,EAAU,IAAM,CACd,MAAMa,EAAsBC,GAAe,CACzC,MAAMC,EAAQD,GAAO,QAAQ,eAAe,OAAO,EAC/B,CAACF,GAAa,SAAS,SAASE,GAAO,MAAM,GAC9C,CAACC,GAAO,SAASZ,CAAY,GAC9CM,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAE7C,EACA,gBAAS,iBAAiB,QAASQ,CAAkB,EAC9C,IAAM,SAAS,oBAAoB,QAASA,CAAkB,CACvE,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAad,EAAQ,IAAM,CAC/B,MAAMe,EAAc,OAAO,KAAKN,GAAgB,CAAC,CAAC,EAClD,OAAOJ,GAAM,OAAQW,GAEZ,CADcD,GAAa,KAAME,GAAkBR,IAAeQ,CAAK,GAAG,SAAWD,GAAM,MAAM,CAEzG,CACH,EAAG,CAACP,EAAcJ,CAAI,CAAC,EAEvB,OACER,EAAC,OACC,IAAKa,EACL,UAAW,2GAA2GF,IAAUL,CAAK,EAAI,QAAU,QAAQ,GAE3J,SAAAN,EAAC,OAAI,UAAW,+FACb,SAAAiB,GAAY,IAAI,CAACE,EAAWb,IAAkB,CAC7C,MAAMe,EAAaF,GAAM,KAAOA,GAAM,WAAW,CAAC,GAAG,IACrD,OACEnB,EAAC,OAEC,QAAS,IAAM,CACbS,EAAU,CACR,GAAGF,EACH,CAACD,CAAK,EAAG,CACP,IAAKe,EACL,KAAMF,GAAM,KACZ,OAAQA,GAAM,MAChB,CACF,CAAC,EACDT,EAAW,CAAE,GAAGC,EAAS,CAACL,CAAK,EAAG,EAAM,CAAC,CAC3C,EACA,MAAOa,GAAM,KACb,UAAW;AAAA,kBACPA,GAAM,SAAWZ,GAAQ,OAAS,eAAiB,EAAE,GAExD,SAAAY,GAAM,MAhBFb,CAiBP,CAEJ,CAAC,EACH,EACF,CAEJ,EAEA,IAAOgB,EAAQjB",
+  "names": ["jsx", "useEffect", "useRef", "useMemo", "clickContent", "DropDown", "index", "active", "list", "setActive", "setVisible", "visible", "filterActive", "dropDownRef", "handleClickOutside", "event", "isDel", "handleList", "activeIndex", "item", "items", "currentSku", "dropdown_default"]
+}

package/dist/esm/biz-components/Specs/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/Specs/index.js

@@ -0,0 +1,2 @@
+import{Fragment as Q,jsx as s,jsxs as c}from"react/jsx-runtime";import R from"./dropdown";import{useRouter as P}from"next/router";import{useMediaQuery as _}from"react-responsive";import{useMemo as I,useState as N,useEffect as D}from"react";import{withLayout as U}from"../../shared/Styles.js";import{formatVariantPrice as B}from"../ShelfDisplay/shelfDisplay.js";import{Picture as b,Text as O,Button as V,Heading as E}from"../../components/index.js";import $,{useImperativeHandle as q,useRef as z}from"react";const C=$.forwardRef((M,F)=>{const{data:x,buildData:p,onChange:S}=M||{},g=_({query:"(max-width: 768px)"}),[o,u]=N({}),[m,v]=N({}),h=z(null),{locale:j}=P(),{LeftMenu:w,RightMenu:k,DefaultSelectMenu:f}=I(()=>x?.data||{},[x?.data]),L=e=>{try{const a=new URL(e).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(a)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(e)}},T=(e,t)=>{const a=k?.menus?.find?.(r=>r?.handle===e?.handle),l=e?.variants?.find?.(r=>r?.sku===e?.sku||a?.sku),n=l?.coupons?.[0],{price:i,basePrice:d}=B({locale:j||"us",amount:n?n?.variant_price4wscode:l?.price,baseAmount:n?l?.price:0,currencyCode:e?.price?.currencyCode||"USD"});return c("div",{className:"box-border overflow-hidden specs-sku-node-wrap",children:[c(O,{className:"relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text",onClick:()=>v({...m,[t]:!m?.[t]}),children:[c("div",{className:"flex items-center justify-between overflow-hidden",children:[s("div",{className:"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title",title:o?.[t]?.name,children:o?.[t]?.name||""}),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:s("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})})]}),s(R,{index:t,list:p?.products,active:o,filterActive:o,setActive:u,visible:m,setVisible:v})]}),s("div",{className:"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]",children:s(b,{source:l?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover"})}),l?.availableForSale?c("div",{className:"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl",children:[s("div",{className:"text-[#1D1D1F] specs-sku-node-price",children:i||""}),d&&s("div",{className:"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price",children:d})]}):!1,f?.buttonText?s(V,{onClick:()=>S?.(e),className:"specs-sku-node-button",children:f?.buttonText}):null]})},A=e=>{if(e)return e&&typeof e!="string"?c("div",{className:"size-full",children:[s("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:e?.text||""}}),s(b,{source:e?.imgUrl,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"})]}):s("div",{className:"break-all",children:L(e)?s(b,{source:e,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"}):s("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:e||""}})})},y=e=>e.map((t,a)=>{const l=a===0;return c("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col  specs-product-node-wrap",children:[s(E,{as:"h3",html:t||"",className:"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title"}),s("div",{className:"col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body",children:Object.keys(o)?.map?.(n=>{const i=o?.[n],d=k?.menus?.find?.(r=>r?.handle===i?.handle)?.subTitle;return A(d?.[t])})})]},t)}),H=e=>{if(!o)return;const{subTitle:t,isProduct:a}=e;return a?c(Q,{children:[c("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product",children:[e?.title&&s(E,{as:"h3",html:e?.title||"",className:"l:hidden specs-item-product-title"}),s("div",{className:"col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body",children:Object.keys(o)?.map((l,n)=>{const i=o?.[l],d=p?.products?.find?.(r=>r?.handle===i?.handle);return s("div",{children:T({...d,sku:i?.sku,item:l},n)},l)})})]}),t?.length?y(t):null]}):y(t)};return q(F,()=>h.current),D(()=>{if(!p?.products?.length)return;const e=f?.sku?.split?.(",")||[];let t={};e?.forEach?.((a,l)=>{const n=p?.products?.find?.(i=>{if(i?.variants?.find?.(r=>r?.sku===a))return!0});n&&(t={...t,[l]:{sku:a,name:n?.name,handle:n?.handle}})}),u(t)},[p]),D(()=>{if(g){const e=Object.keys(o||{});if(e?.length>2){const t=e?.slice?.(0,2);let a={};t?.forEach?.(l=>{a={...a,[l]:o?.[l]}}),u(a)}}},[g]),s("div",{className:"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper",ref:h,children:w?.data?s("div",{className:"box-border w-full overflow-hidden specs-wrapper-content",children:w?.data?.map?.((e,t)=>s("div",{className:"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item",children:H(e)},t))}):null})});C.displayName="Specs";var se=U(C);export{se as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Specs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Specs/index.tsx"],
+  "sourcesContent": ["/* eslint-disable no-undef */\nimport DropDown from './dropdown'\nimport { useRouter } from 'next/router'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale } = useRouter()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    return (\n      <div className=\"box-border overflow-hidden specs-sku-node-wrap\">\n        <Text\n          className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n          onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n              title={active?.[index]?.name}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"25\"\n              viewBox=\"0 0 24 25\"\n              fill=\"none\"\n              className=\"openDropDown\"\n            >\n              <path\n                d=\"M6 9.5L12 15.5L18 9.5\"\n                stroke=\"#1D1D1F\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n            <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {DefaultSelectMenu?.buttonText ? (\n          <Button onClick={() => onChange?.(product)} className=\"specs-sku-node-button\">\n            {DefaultSelectMenu?.buttonText}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (!v) return\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n          />\n          <div\n            className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "DropDown", "useRouter", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "React", "useImperativeHandle", "useRef", "Specs", "page", "ref", "data", "buildData", "onChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive", "Specs_default"]
+}

package/dist/esm/biz-components/Subscribe/index.d.ts

@@ -7,7 +7,13 @@
  */
 declare const Subscribe: ({ subscribeMetadata, onSubmit, className, }: {
     subscribeMetadata: any;
-    onSubmit?: (formData: FormData) => void;
+    onSubmit?: ({ email, terms, news, dealsType, onSuccess, }: {
+        email: string;
+        terms: string;
+        news: string;
+        dealsType?: string;
+        onSuccess?: () => void;
+    }) => void;
     className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Subscribe;

package/dist/esm/biz-components/Subscribe/index.js

@@ -1,2 +1,11 @@
-import{jsx as t,jsxs as l}from"react/jsx-runtime";import{useState as p}from"react";import{Text as a,Checkbox as x}from"../../components/index.js";import{cn as g}from"../../helpers/utils.js";const u=({subscribeMetadata:e,onSubmit:c,className:f})=>{const[r,o]=p(null),[n,d]=p(null),b=s=>{s.preventDefault();const m=new FormData(s.target),i=m.get("email"),h=m.get("terms");if(!i){o(e?.emptyError);return}if(!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(i)){o(e?.formatError);return}if(!h){d(e?.termsError);return}c?.(m)};return l("div",{className:g("laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",f),children:[l("div",{children:[t(a,{as:"p",html:e?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),t(a,{as:"p",html:e?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),l("form",{onSubmit:b,children:[l("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[t("input",{name:"email",onFocus:()=>o(null),placeholder:e?.placeholder,className:"desktop:text-base tablet:max-w-[320px] laptop:max-w-none h-full flex-1 border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),t("button",{type:"submit",className:"desktop:px-7 desktop:text-base h-full rounded-none bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:t(a,{html:e?.button,className:"text-base font-bold leading-[1.2]"})})]}),r&&t(a,{as:"p",html:r,className:"mt-2 text-base font-bold leading-[1.2] text-red-500"}),l("div",{className:"mt-4 flex flex-col gap-2",children:[l("div",{className:"flex items-start gap-2",children:[t(x,{name:"terms",id:"terms",size:"base",onCheckedChange:s=>s&&d(null),className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),t("label",{htmlFor:"terms",children:t(a,{as:"p",html:e?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),n&&t(a,{as:"p",html:n,className:"text-base font-bold leading-[1.2] text-red-500"}),l("div",{className:"flex items-start gap-2",children:[t(x,{name:"news",id:"news",size:"base",className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),t("label",{htmlFor:"news",children:t(a,{as:"p",html:e?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]})]})]})]})};var w=u;export{w as default};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as o}from"react";import{Text as s,Checkbox as u,Button as F}from"../../components/index.js";import{cn as g}from"../../helpers/utils.js";const y=({subscribeMetadata:t,onSubmit:h,className:k})=>{const[i,n]=o(null),[d,c]=o(null),[w,p]=o(!1),[x,b]=o(""),v=a=>{a.preventDefault();const r=new FormData(a.target),m=r.get("email"),f=r.get("terms"),N=r.get("news");if(!m){n(t?.emptyError);return}if(!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(m)){n(t?.formatError);return}if(!f){c(t?.termsError);return}h?.({email:m,terms:f,news:N,dealsType:t?.dealsType,onSuccess:()=>{p(!0);let B=setTimeout(()=>{p(!1),clearTimeout(B)},3e3)}})};return l("div",{className:g("subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4",k),children:[e("style",{jsx:!0,global:!0,children:`
+          .subscribe-component input:-webkit-autofill,
+          .subscribe-component input:-webkit-autofill:hover,
+          .subscribe-component input:-webkit-autofill:focus {
+            -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */
+            -webkit-text-fill-color: #fff !important;
+            transition: background-color 9999s ease-in-out 0s !important;
+            caret-color: #fff;
+          }
+        `}),l("div",{className:"laptop:flex-1",children:[e(s,{as:"p",html:t?.title,className:"desktop:text-base text-sm font-bold leading-[1.4] text-white"}),e(s,{as:"p",html:t?.subtitle,className:"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white"})]}),l("form",{className:"laptop:flex-1",onSubmit:v,children:[l("div",{className:"desktop:h-[48px] flex h-[38px] items-center",children:[l("div",{className:"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]",children:[e("input",{name:"email",onFocus:()=>n(null),value:x,onChange:a=>b(a.target.value),placeholder:t?.placeholder,className:"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white"}),e("button",{onClick:()=>b(""),className:g("absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600",{hidden:!x}),children:"\u2715"})]}),e(F,{type:"submit",className:"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black",children:e(s,{html:t?.button,className:"text-sm desktop:text-base font-bold leading-[1.2]"})})]}),i&&e(s,{as:"p",html:i,className:"mt-2 text-base font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"mt-4 flex flex-col gap-2",children:[l("div",{className:"flex items-start gap-2",children:[e(u,{name:"terms",id:"terms",size:"base",onCheckedChange:a=>a&&c(null),className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),e("label",{htmlFor:"terms",children:e(s,{as:"p",html:t?.terms,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),d&&e(s,{as:"p",html:d,className:"text-base font-bold leading-[1.2] text-[#F84D4F]"}),l("div",{className:"flex items-start gap-2",children:[e(u,{name:"news",id:"news",size:"base",className:"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]"}),e("label",{htmlFor:"news",children:e(s,{as:"p",html:t?.news,className:"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]"})})]}),w&&e(s,{as:"p",html:t?.successMessage,className:"text-base text-brand-0 font-bold leading-[1.2]"})]})]})]})};var A=y;export{A as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Subscribe/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Subscribe/index.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n  subscribeMetadata,\n  onSubmit,\n  className,\n}: {\n  subscribeMetadata: any\n  onSubmit?: (formData: FormData) => void\n  className?: string\n}) => {\n  const [error, setError] = useState<string | null>(null)\n  const [termsError, setTermsError] = useState<string | null>(null)\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const email = formData.get('email')\n    const terms = formData.get('terms')\n    if (!email) {\n      setError(subscribeMetadata?.emptyError)\n      return\n    }\n    if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n      setError(subscribeMetadata?.formatError)\n      return\n    }\n    if (!terms) {\n      setTermsError(subscribeMetadata?.termsError)\n      return\n    }\n    onSubmit?.(formData)\n  }\n\n  return (\n    <div className={cn('laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4', className)}>\n      <div>\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.title}\n          className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n        />\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.subtitle}\n          className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n        />\n      </div>\n      <form onSubmit={handleSubmit}>\n        <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n          <input\n            name=\"email\"\n            onFocus={() => setError(null)}\n            placeholder={subscribeMetadata?.placeholder}\n            className=\"desktop:text-base tablet:max-w-[320px] laptop:max-w-none h-full flex-1 border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n          />\n          <button\n            type=\"submit\"\n            className=\"desktop:px-7 desktop:text-base h-full rounded-none bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n          >\n            <Text html={subscribeMetadata?.button} className=\"text-base font-bold leading-[1.2]\" />\n          </button>\n        </div>\n        {error && <Text as=\"p\" html={error} className=\"mt-2 text-base font-bold leading-[1.2] text-red-500\" />}\n        <div className=\"mt-4 flex flex-col gap-2\">\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"terms\"\n              id=\"terms\"\n              size=\"base\"\n              onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n            />\n            <label htmlFor=\"terms\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.terms}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {termsError && <Text as=\"p\" html={termsError} className=\"text-base font-bold leading-[1.2] text-red-500\" />}\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"news\"\n              id=\"news\"\n              size=\"base\"\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n            />\n            <label htmlFor=\"news\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.news}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Subscribe\n"],
-  "mappings": "AA6CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA7CN,OAAgB,YAAAC,MAAgB,QAChC,OAAS,QAAAC,EAAM,YAAAC,MAAgB,4BAC/B,OAAS,MAAAC,MAAU,yBASnB,MAAMC,EAAY,CAAC,CACjB,kBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAIM,CACJ,KAAM,CAACC,EAAOC,CAAQ,EAAIT,EAAwB,IAAI,EAChD,CAACU,EAAYC,CAAa,EAAIX,EAAwB,IAAI,EAE1DY,EAAgBC,GAAwC,CAC5DA,EAAE,eAAe,EACjB,MAAMC,EAAW,IAAI,SAASD,EAAE,MAAyB,EACnDE,EAAQD,EAAS,IAAI,OAAO,EAC5BE,EAAQF,EAAS,IAAI,OAAO,EAClC,GAAI,CAACC,EAAO,CACVN,EAASJ,GAAmB,UAAU,EACtC,MACF,CACA,GAAI,CAAC,mDAAmD,KAAKU,CAAe,EAAG,CAC7EN,EAASJ,GAAmB,WAAW,EACvC,MACF,CACA,GAAI,CAACW,EAAO,CACVL,EAAcN,GAAmB,UAAU,EAC3C,MACF,CACAC,IAAWQ,CAAQ,CACrB,EAEA,OACEf,EAAC,OAAI,UAAWI,EAAG,kFAAmFI,CAAS,EAC7G,UAAAR,EAAC,OACC,UAAAD,EAACG,EAAA,CACC,GAAG,IACH,KAAMI,GAAmB,MACzB,UAAU,+DACZ,EACAP,EAACG,EAAA,CACC,GAAG,IACH,KAAMI,GAAmB,SACzB,UAAU,oFACZ,GACF,EACAN,EAAC,QAAK,SAAUa,EACd,UAAAb,EAAC,OAAI,UAAU,8CACb,UAAAD,EAAC,SACC,KAAK,QACL,QAAS,IAAMW,EAAS,IAAI,EAC5B,YAAaJ,GAAmB,YAChC,UAAU,gKACZ,EACAP,EAAC,UACC,KAAK,SACL,UAAU,8GAEV,SAAAA,EAACG,EAAA,CAAK,KAAMI,GAAmB,OAAQ,UAAU,oCAAoC,EACvF,GACF,EACCG,GAASV,EAACG,EAAA,CAAK,GAAG,IAAI,KAAMO,EAAO,UAAU,sDAAsD,EACpGT,EAAC,OAAI,UAAU,2BACb,UAAAA,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACI,EAAA,CACC,KAAK,QACL,GAAG,QACH,KAAK,OACL,gBAAkBe,GAAqBA,GAAWN,EAAc,IAAI,EACpE,UAAU,qFACZ,EACAb,EAAC,SAAM,QAAQ,QACb,SAAAA,EAACG,EAAA,CACC,GAAG,IACH,KAAMI,GAAmB,MACzB,UAAU,mEACZ,EACF,GACF,EACCK,GAAcZ,EAACG,EAAA,CAAK,GAAG,IAAI,KAAMS,EAAY,UAAU,iDAAiD,EACzGX,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACI,EAAA,CACC,KAAK,OACL,GAAG,OACH,KAAK,OACL,UAAU,qFACZ,EACAJ,EAAC,SAAM,QAAQ,OACb,SAAAA,EAACG,EAAA,CACC,GAAG,IACH,KAAMI,GAAmB,KACzB,UAAU,mEACZ,EACF,GACF,GACF,GACF,GACF,CAEJ,EAEA,IAAOa,EAAQd",
-  "names": ["jsx", "jsxs", "useState", "Text", "Checkbox", "cn", "Subscribe", "subscribeMetadata", "onSubmit", "className", "error", "setError", "termsError", "setTermsError", "handleSubmit", "e", "formData", "email", "terms", "checked", "Subscribe_default"]
+  "sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n  subscribeMetadata,\n  onSubmit,\n  className,\n}: {\n  subscribeMetadata: any\n  onSubmit?: ({\n    email,\n    terms,\n    news,\n    dealsType,\n    onSuccess,\n  }: {\n    email: string\n    terms: string\n    news: string\n    dealsType?: string\n    onSuccess?: () => void\n  }) => void\n  className?: string\n}) => {\n  const [error, setError] = useState<string | null>(null)\n  const [termsError, setTermsError] = useState<string | null>(null)\n  const [success, setSuccess] = useState<boolean>(false)\n  const [email, setEmail] = useState<string>('')\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const email = formData.get('email')\n    const terms = formData.get('terms')\n    const news = formData.get('news')\n    if (!email) {\n      setError(subscribeMetadata?.emptyError)\n      return\n    }\n    if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n      setError(subscribeMetadata?.formatError)\n      return\n    }\n    if (!terms) {\n      setTermsError(subscribeMetadata?.termsError)\n      return\n    }\n    onSubmit?.({\n      email: email as string,\n      terms: terms as string,\n      news: news as string,\n      dealsType: subscribeMetadata?.dealsType,\n      onSuccess: () => {\n        setSuccess(true)\n        let timer = setTimeout(() => {\n          setSuccess(false)\n          clearTimeout(timer)\n        }, 3000)\n      },\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n        className\n      )}\n    >\n      <style jsx global>\n        {`\n          .subscribe-component input:-webkit-autofill,\n          .subscribe-component input:-webkit-autofill:hover,\n          .subscribe-component input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n            -webkit-text-fill-color: #fff !important;\n            transition: background-color 9999s ease-in-out 0s !important;\n            caret-color: #fff;\n          }\n        `}\n      </style>\n      <div className=\"laptop:flex-1\">\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.title}\n          className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n        />\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.subtitle}\n          className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n        />\n      </div>\n      <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n        <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n          <div className=\"relative h-full flex-1 tablet:max-w-[320px] laptop:max-w-[404px]\">\n            <input\n              name=\"email\"\n              onFocus={() => setError(null)}\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              placeholder={subscribeMetadata?.placeholder}\n              className=\"desktop:text-base rounded-l-btn rounded-r-none size-full border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n            />\n            <button\n              onClick={() => setEmail('')}\n              className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n                hidden: !email,\n              })}\n            >\n              \u2715\n            </button>\n          </div>\n          <Button\n            type=\"submit\"\n            className=\"desktop:px-7 rounded-r-btn !rounded-l-none desktop:text-base h-full bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n          >\n            <Text html={subscribeMetadata?.button} className=\"text-sm desktop:text-base font-bold leading-[1.2]\" />\n          </Button>\n        </div>\n        {error && <Text as=\"p\" html={error} className=\"mt-2 text-base font-bold leading-[1.2] text-[#F84D4F]\" />}\n        <div className=\"mt-4 flex flex-col gap-2\">\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"terms\"\n              id=\"terms\"\n              size=\"base\"\n              onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n            />\n            <label htmlFor=\"terms\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.terms}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {termsError && <Text as=\"p\" html={termsError} className=\"text-base font-bold leading-[1.2] text-[#F84D4F]\" />}\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"news\"\n              id=\"news\"\n              size=\"base\"\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#1D1D1F]\"\n            />\n            <label htmlFor=\"news\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.news}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {success && (\n            <Text\n              as=\"p\"\n              html={subscribeMetadata?.successMessage}\n              className=\"text-base text-brand-0 font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Subscribe\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "Text", "Checkbox", "Button", "cn", "Subscribe", "subscribeMetadata", "onSubmit", "className", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked", "Subscribe_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{withLayout as f}from"../../shared/Styles.js";import*as i from"../../components/tabs.js";import{cn as u}from"../../helpers/index.js";import n from"react";import d from"../ShelfDisplay/index.js";import y from"../AccordionCards/index.js";import k from"../Faq/index.js";import N from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import h from"../Title/index.js";import g from"../Graphic/index.js";const v=n.forwardRef(({data:o,className:m},l)=>{const{theme:p,shape:c,align:T,tabs:r,sectionTitle:s}=o,b=a=>a?.blockType==="ipc-shelfdisplay"?e(d,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?e(N,{data:a}):a?.blockType==="ipc-accordioncards"?e(y,{data:a}):a?.blockType==="ipc-faq"?e(k,{data:a}):a?.blockType==="ipc-graphic"?e(g,{data:a}):null;return t("section",{ref:l,className:u(p==="dark"?"aiui-dark":"",m),children:[s&&e(h,{className:"section-title",data:{title:s}}),t(i.Tabs,{shape:c,align:T,defaultValue:r[0].tabName,children:[e(i.TabsList,{className:"tabs-list",children:r.map(a=>e(i.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),r.map(a=>e(i.TabsContent,{value:a.tabName,className:"tabs-content",children:a.tabContent?.[0]?b(a.tabContent?.[0]):null},a.tabName))]})]})});var A=f(v);export{A as default};
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{withLayout as f}from"../../shared/Styles.js";import*as i from"../../components/tabs.js";import{cn as u}from"../../helpers/index.js";import n from"react";import d from"../ShelfDisplay/index.js";import y from"../AccordionCards/index.js";import k from"../Faq/index.js";import N from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import h from"../Title/index.js";import g from"../Graphic/index.js";const v=n.forwardRef(({data:o,className:m},l)=>{const{theme:p,shape:c,align:T,tabs:r,sectionTitle:s}=o,b=a=>a?.blockType==="ipc-shelfdisplay"?e(d,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?e(N,{data:a}):a?.blockType==="ipc-accordioncards"?e(y,{data:a}):a?.blockType==="ipc-faq"?e(k,{data:a}):a?.blockType==="ipc-graphic"?e(g,{data:a}):null;return t("section",{ref:l,className:u(p==="dark"?"aiui-dark":"",m),children:[s&&e(h,{className:"section-title",data:{title:s}}),t(i.Tabs,{shape:c,align:T,defaultValue:r[0].tabName,children:[e(i.TabsList,{className:"tabs-list",children:r.map(a=>e(i.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),r.map(a=>e(i.TabsContent,{value:a.tabName,className:"tabs-content mt-[24px]",children:a.tabContent?.[0]?b(a.tabContent?.[0]):null},a.tabName))]})]})});var x=f(v);export{x as default};
 //# sourceMappingURL=Tabs.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
-  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs, sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-graphic') {\n      return <Graphic data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(Tabs)\n"],
-  "mappings": "aAkBa,cAAAA,EAiBP,QAAAC,MAjBO,oBAjBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAa,sBAEpB,MAAMC,EAAOP,EAAM,WAAsC,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,aAAAC,CAAa,EAAIP,EAE9CQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrBtB,EAACM,EAAA,CAAa,KAAMgB,EAAY,EAC9BA,GAAY,YAAc,8BAC5BtB,EAACS,EAAA,CAAwB,KAAMa,EAAY,EACzCA,GAAY,YAAc,qBAC5BtB,EAACO,EAAA,CAAe,KAAMe,EAAY,EAChCA,GAAY,YAAc,UAC5BtB,EAACQ,EAAA,CAAI,KAAMc,EAAY,EACrBA,GAAY,YAAc,cAC5BtB,EAACW,EAAA,CAAQ,KAAMW,EAAY,EAE3B,KAIX,OACErB,EAAC,WAAQ,IAAKc,EAAc,UAAWX,EAAGY,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBpB,EAACU,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOU,CAAa,EAAG,EACjFnB,EAACE,EAAc,KAAd,CAAmB,MAAOc,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAnB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAgB,EAAK,IAAII,GACRvB,EAACG,EAAc,YAAd,CAA4C,MAAOoB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCJ,EAAK,IAAII,GACRvB,EAACG,EAAc,YAAd,CAA4C,MAAOoB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,MADjCA,EAAI,OAEpC,CACD,GACH,GACF,CAEJ,CAAC,EAED,IAAOC,EAAQtB,EAAWU,CAAI",
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs, sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabsProps['data']['tabs'][number]['tabContent'][number]) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-graphic') {\n      return <Graphic data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className,)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content mt-[24px]\">\n            {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(Tabs)\n"],
+  "mappings": "aAkBa,cAAAA,EAiBP,QAAAC,MAjBO,oBAjBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAa,sBAEpB,MAAMC,EAAOP,EAAM,WAAsC,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,aAAAC,CAAa,EAAIP,EAE9CQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrBtB,EAACM,EAAA,CAAa,KAAMgB,EAAY,EAC9BA,GAAY,YAAc,8BAC5BtB,EAACS,EAAA,CAAwB,KAAMa,EAAY,EACzCA,GAAY,YAAc,qBAC5BtB,EAACO,EAAA,CAAe,KAAMe,EAAY,EAChCA,GAAY,YAAc,UAC5BtB,EAACQ,EAAA,CAAI,KAAMc,EAAY,EACrBA,GAAY,YAAc,cAC5BtB,EAACW,EAAA,CAAQ,KAAMW,EAAY,EAE3B,KAIX,OACErB,EAAC,WAAQ,IAAKc,EAAc,UAAWX,EAAGY,IAAU,OAAS,YAAc,GAAIF,CAAU,EACtF,UAAAM,GAAgBpB,EAACU,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOU,CAAa,EAAG,EACjFnB,EAACE,EAAc,KAAd,CAAmB,MAAOc,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAnB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAgB,EAAK,IAAII,GACRvB,EAACG,EAAc,YAAd,CAA4C,MAAOoB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCJ,EAAK,IAAII,GACRvB,EAACG,EAAc,YAAd,CAA4C,MAAOoB,EAAI,QAAS,UAAU,yBACxE,SAAAA,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,MADjCA,EAAI,OAEpC,CACD,GACH,GACF,CAEJ,CAAC,EAED,IAAOC,EAAQtB,EAAWU,CAAI",
   "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "React", "ShelfDisplay", "AccordionCards", "Faq", "MultiLayoutGraphicBlock", "Title", "Graphic", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
 }

package/dist/esm/biz-components/TabsGroup/index.d.ts

@@ -0,0 +1,7 @@
+import type { TabsGroupProps } from './types.js';
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TabsGroupProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/TabsGroup/index.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as s,jsxs as u}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as e from"../../components/tabs.js";import{cn as p}from"../../helpers/index.js";import l from"react";const c=l.forwardRef(({data:i,className:r},m)=>{const{theme:o,shape:b,align:T,tabs:t}=i;return s("section",{ref:m,className:p(o==="dark"?"aiui-dark":"",r),children:u(e.Tabs,{shape:b,align:T,defaultValue:t[0].tabName,children:[s(e.TabsList,{className:"tabs-list",children:t.map(a=>s(e.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),t.map(a=>s(e.TabsContent,{value:a.tabName,className:"tabs-content",children:a.children(a.tabContent?.[0])},a.tabName))]})})});var v=n(c);export{v as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/TabsGroup/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/TabsGroup/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsGroupProps } from './types.js'\nimport React from 'react'\n\nconst TabsGroup = React.forwardRef<HTMLDivElement, TabsGroupProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs } = data\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {tab.children(tab.tabContent?.[0])}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(TabsGroup)\n"],
+  "mappings": "aAYM,OAGM,OAAAA,EAHN,QAAAC,MAAA,oBAXN,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAElB,MAAMC,EAAYD,EAAM,WAA2C,CAAC,CAAE,KAAAE,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CACxG,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,CAAK,EAAIN,EAEtC,OACEP,EAAC,WAAQ,IAAKS,EAAc,UAAWL,EAAGM,IAAU,OAAS,YAAc,GAAIF,CAAS,EACtF,SAAAP,EAACE,EAAc,KAAd,CAAmB,MAAOQ,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAb,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAU,EAAK,IAAIC,GACRd,EAACG,EAAc,YAAd,CAA4C,MAAOW,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCD,EAAK,IAAIC,GACRd,EAACG,EAAc,YAAd,CAA4C,MAAOW,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SAASA,EAAI,aAAa,CAAC,CAAC,GADHA,EAAI,OAEpC,CACD,GACH,EACF,CAEJ,CAAC,EAED,IAAOC,EAAQb,EAAWI,CAAS",
+  "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "React", "TabsGroup", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "tab", "TabsGroup_default"]
+}