@anker-in/headless-ui 1.0.15 → 1.0.16

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["/* 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-fr': '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    'eu-de': 'de-de',\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"],
-  "mappings": "AACO,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,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,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,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",
+  "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  })[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,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"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.d.ts

@@ -0,0 +1,8 @@
+export declare const ShelfDisplayWrapItem: ({ data, configuration }: {
+    data: any;
+    configuration?: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ShelfDisplayHorizontalItem: ({ data, configuration }: {
+    data: any;
+    configuration?: any;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import{Fragment as D,jsx as l,jsxs as p}from"react/jsx-runtime";import{useAiuiContext as I}from"../AiuiProvider/index.js";import{formatVariantPrice as T}from"./shelfDisplay.js";import C from"../../components/picture.js";import P from"../../components/badge.js";import{cn as m}from"../../helpers/utils.js";import{Text as $}from"../../components/text.js";import y from"../../components/button.js";import{gaTrack as j}from"../../shared/track.js";import{trackUrlRef as O}from"../../shared/trackUrlRef.js";import{Heading as z}from"../../components/heading.js";const F="image",H="product_shelf",L=999999999e-2,Q=({data:e,configuration:t})=>{const{isDisplayBackImage:f=!1,itemShape:h}=t||{},{locale:r="us",copyWriting:k}=I(),w=(o,s,i)=>t?.event?.primaryButton?.(o,s+1,i),g=(o,s,i)=>t?.event?.secondaryButton?.(o,s+1,i),a=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},S=!a?.availableForSale&&a?.price?.amount===L,_=t?.isShowTag,u=t?.isShowOriginalPrice,c=a?.coupons?.[0],{price:N,basePrice:B}=T({locale:r,amount:u&&c?c.variant_price4wscode:a.price,baseAmount:u&&c?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const o=e?.sku,s=e?.variants;return s?.find(x=>x?.sku===o)?.image?.url||s?.[0]?.image?.url||""},n=e?.custom_name||e?.title,v=e?.custom_description||e?.description,d=()=>p(D,{children:[_?l("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,s)=>l(P,{children:o},s))}):null,n?l(z,{as:"h3",title:n||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:n||""}):null,v?l($,{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:v||""}):null,l("div",{className:"mb-2 mt-5 flex items-center",children:S?l("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k?.soldOutText}):p(D,{children:[l("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&N||""}),l("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&B||""})]})}),p("div",{className:m("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?l(y,{variant:"secondary",onClick:()=>g(e,t?.index,t),className:`
+                ${t.direction==="vertical"?"w-full":""}
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?l(y,{variant:"primary",onClick:()=>w(e,t?.index,t),className:`
+              ${t.direction==="vertical"?"w-full":""}
+            `,children:t?.primaryButton||""}):null]})]});return l("div",{className:m("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",h==="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:f?l("div",{className:"absolute inset-0 box-border overflow-hidden",children:p("div",{className:"relative inset-0 size-full",children:[l(C,{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:d()})]})}):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":n,target:t?.target,href:O(`${r==="us"||!r?"":`/${r}`}/products/${e?.handle}`,`${F}_${H}`),onClick:()=>{j({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,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:l(C,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),d()]})},e?.id||e?.handle)},X=({data:e,configuration:t})=>{const{itemShape:f,itemLength:h}=t||{},{locale:r="us",copyWriting:k}=I(),w=(s,i,x)=>t?.event?.primaryButton?.(s,i+1,x),g=(s,i,x)=>t?.event?.secondaryButton?.(s,i+1,x),a=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},S=!a?.availableForSale&&a?.price?.amount===L,_=t?.isShowTag,u=t?.isShowOriginalPrice,c=a?.coupons?.[0],{price:N,basePrice:B}=T({locale:r,amount:u&&c?c.variant_price4wscode:a.price,baseAmount:u&&c?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const s=e?.sku,i=e?.variants;return i?.find(U=>U?.sku===s)?.image?.url||i?.[0]?.image?.url||""},n=e?.custom_name||e?.title,v=e?.custom_description||e?.description,d=()=>h>=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=()=>h>=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",{className:m(d().wrap,f==="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(d().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:l("a",{"aria-label":n,target:t?.target,href:O(`${r==="us"||!r?"":`/${r}`}/products/${e?.handle}`,`${F}_${H}`),onClick:()=>{j({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,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:l(C,{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",d().boxItem),children:[_?l("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,i)=>l(P,{children:s},i))}):null,n?l(z,{as:"h3",title:n||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:n||""}):null,v?l($,{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:v||""}):null,l("div",{className:"mb-2 mt-5 flex items-center",children:S?l("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k?.soldOutText}):p(D,{children:[l("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&N||""}),l("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&B||""})]})}),p("div",{className:m("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?l(y,{variant:"secondary",onClick:()=>g(e,t?.index,t),className:`
+                ${t.direction==="vertical"?"w-full":""}
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?l(y,{variant:"primary",onClick:()=>w(e,t?.index,t),className:`
+              ${t.direction==="vertical"?"w-full":""}
+            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{X as ShelfDisplayHorizontalItem,Q as ShelfDisplayWrapItem};
+//# sourceMappingURL=shelfDisplayItem.js.map

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

@@ -0,0 +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'\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\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  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      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\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  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      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", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
+}

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as s}from"react/jsx-runtime";import m,{useState as t}from"react";import{cn as u}from"../../helpers/utils.js";import{Swiper as c,SwiperSlide as d}from"swiper/react";import{Navigation as S,FreeMode as g,Mousewheel as x}from"swiper/modules";const n=m.forwardRef(({data:o,breakpoints:p,Slide:a,className:l,id:i})=>{const[B,f]=t(!0),[M,w]=t(!1);return s(c,{className:u(l),navigation:{nextEl:`.${i}-custom-swiper-button-next`,prevEl:`.${i}-custom-swiper-button-prev`},onProgress:e=>{f(e.isBeginning),w(e.isEnd)},modules:[S,g,x],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:p||{0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,slidesPerView:1.2,freeMode:!1},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},children:o?.list?.map((e,r)=>s(d,{className:"!flex !h-[unset]",children:s(a,{data:e,configuration:o?.configuration?{...o?.configuration,index:r}:{index:r},jIndex:r})},i+"SwiperSlide"+r))})});n.displayName="SwiperBox";var N=n;export{N as default};
+"use client";import{jsx as s}from"react/jsx-runtime";import c,{useState as t}from"react";import{cn as n}from"../../helpers/utils.js";import{Swiper as d,SwiperSlide as S}from"swiper/react";import{Navigation as g,FreeMode as x,Mousewheel as B}from"swiper/modules";const p=c.forwardRef(({data:o,breakpoints:a,Slide:l,className:f,id:i,itemClassName:w})=>{const[M,m]=t(!0),[E,u]=t(!1);return s(d,{className:n(f),navigation:{nextEl:`.${i}-custom-swiper-button-next`,prevEl:`.${i}-custom-swiper-button-prev`},onProgress:e=>{m(e.isBeginning),u(e.isEnd)},modules:[g,x,B],freeMode:!0,mousewheel:{forceToAxis:!0},breakpoints:a||{0:{spaceBetween:12,slidesPerView:1,freeMode:!1},374:{spaceBetween:12,slidesPerView:1.2,freeMode:!1},768:{spaceBetween:16,slidesPerView:2,freeMode:!1}},children:o?.list?.map((e,r)=>s(S,{className:n("!flex !h-[unset]",w),children:s(l,{data:e,configuration:o?.configuration?{...o?.configuration,index:r}:{index:r},jIndex:r})},i+"SwiperSlide"+r))})});p.displayName="SwiperBox";var b=p;export{b as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SwiperBox/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, breakpoints, Slide, className, id }) => {\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n\n  return (\n    <Swiper\n      className={cn(className)}\n      navigation={{\n        nextEl: `.${id}-custom-swiper-button-next`,\n        prevEl: `.${id}-custom-swiper-button-prev`,\n      }}\n      onProgress={swiper => {\n        setStart(swiper.isBeginning)\n        setEnd(swiper.isEnd)\n      }}\n      modules={[Navigation, FreeMode, Mousewheel]}\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      breakpoints={\n        breakpoints || {\n          0: {\n            spaceBetween: 12,\n            slidesPerView: 1,\n            freeMode: false,\n          },\n          374: {\n            spaceBetween: 12,\n            slidesPerView: 1.2,\n            freeMode: false,\n          },\n          768: {\n            spaceBetween: 16,\n            slidesPerView: 2,\n            freeMode: false,\n          },\n        }\n      }\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className=\"!flex !h-[unset]\">\n          <Slide\n            data={item}\n            configuration={data?.configuration ? { ...data?.configuration, index: jIndex } : { index: jIndex }}\n            jIndex={jIndex}\n          />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
-  "mappings": "aAmDU,cAAAA,MAAA,oBAlDV,OAAOC,GAAS,YAAAC,MAAgB,QAChC,OAAS,MAAAC,MAAU,yBAGnB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBAGjD,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,CAAG,IAAM,CAClH,KAAM,CAACC,EAASC,CAAQ,EAAId,EAAS,EAAI,EACnC,CAACe,EAAOC,CAAM,EAAIhB,EAAS,EAAK,EAEtC,OACEF,EAACI,EAAA,CACC,UAAWD,EAAGU,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYK,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAACb,EAAYC,EAAUC,CAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACEG,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,IACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACU,EAAMC,IACtBrB,EAACK,EAAA,CAA8C,UAAU,mBACvD,SAAAL,EAACY,EAAA,CACC,KAAMQ,EACN,cAAeV,GAAM,cAAgB,CAAE,GAAGA,GAAM,cAAe,MAAOW,CAAO,EAAI,CAAE,MAAOA,CAAO,EACjG,OAAQA,EACV,GALgBP,EAAK,cAAgBO,CAMvC,CACD,EACH,CAEJ,CAAC,EAEDZ,EAAU,YAAc,YAExB,IAAOa,EAAQb",
-  "names": ["jsx", "React", "useState", "cn", "Swiper", "SwiperSlide", "Navigation", "FreeMode", "Mousewheel", "SwiperBox", "data", "breakpoints", "Slide", "className", "id", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex", "SwiperBox_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\n// import 'swiper/css'\n// import 'swiper/css/free-mode'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, FreeMode, Mousewheel } from 'swiper/modules'\nimport type { SwiperBoxProps } from './types.js'\n\nconst SwiperBox = React.forwardRef<HTMLDivElement, SwiperBoxProps>(({ data, breakpoints, Slide, className, id, itemClassName }) => {\n  const [isStart, setStart] = useState(true)\n  const [isEnd, setEnd] = useState(false)\n\n  return (\n    <Swiper\n      className={cn(className)}\n      navigation={{\n        nextEl: `.${id}-custom-swiper-button-next`,\n        prevEl: `.${id}-custom-swiper-button-prev`,\n      }}\n      onProgress={swiper => {\n        setStart(swiper.isBeginning)\n        setEnd(swiper.isEnd)\n      }}\n      modules={[Navigation, FreeMode, Mousewheel]}\n      freeMode={true}\n      mousewheel={{\n        forceToAxis: true,\n      }}\n      breakpoints={\n        breakpoints || {\n          0: {\n            spaceBetween: 12,\n            slidesPerView: 1,\n            freeMode: false,\n          },\n          374: {\n            spaceBetween: 12,\n            slidesPerView: 1.2,\n            freeMode: false,\n          },\n          768: {\n            spaceBetween: 16,\n            slidesPerView: 2,\n            freeMode: false,\n          },\n        }\n      }\n    >\n      {data?.list?.map((item, jIndex) => (\n        <SwiperSlide key={id + 'SwiperSlide' + jIndex} className={cn('!flex !h-[unset]', itemClassName)}>\n          <Slide\n            data={item}\n            configuration={data?.configuration ? { ...data?.configuration, index: jIndex } : { index: jIndex }}\n            jIndex={jIndex}\n          />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\n\nSwiperBox.displayName = 'SwiperBox'\n\nexport default SwiperBox\n"],
+  "mappings": "aAmDU,cAAAA,MAAA,oBAlDV,OAAOC,GAAS,YAAAC,MAAgB,QAChC,OAAS,MAAAC,MAAU,yBAGnB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,YAAAC,EAAU,cAAAC,MAAkB,iBAGjD,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,YAAAC,EAAa,MAAAC,EAAO,UAAAC,EAAW,GAAAC,EAAI,cAAAC,CAAc,IAAM,CACjI,KAAM,CAACC,EAASC,CAAQ,EAAIf,EAAS,EAAI,EACnC,CAACgB,EAAOC,CAAM,EAAIjB,EAAS,EAAK,EAEtC,OACEF,EAACI,EAAA,CACC,UAAWD,EAAGU,CAAS,EACvB,WAAY,CACV,OAAQ,IAAIC,CAAE,6BACd,OAAQ,IAAIA,CAAE,4BAChB,EACA,WAAYM,GAAU,CACpBH,EAASG,EAAO,WAAW,EAC3BD,EAAOC,EAAO,KAAK,CACrB,EACA,QAAS,CAACd,EAAYC,EAAUC,CAAU,EAC1C,SAAU,GACV,WAAY,CACV,YAAa,EACf,EACA,YACEG,GAAe,CACb,EAAG,CACD,aAAc,GACd,cAAe,EACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,IACf,SAAU,EACZ,EACA,IAAK,CACH,aAAc,GACd,cAAe,EACf,SAAU,EACZ,CACF,EAGD,SAAAD,GAAM,MAAM,IAAI,CAACW,EAAMC,IACtBtB,EAACK,EAAA,CAA8C,UAAWF,EAAG,mBAAoBY,CAAa,EAC5F,SAAAf,EAACY,EAAA,CACC,KAAMS,EACN,cAAeX,GAAM,cAAgB,CAAE,GAAGA,GAAM,cAAe,MAAOY,CAAO,EAAI,CAAE,MAAOA,CAAO,EACjG,OAAQA,EACV,GALgBR,EAAK,cAAgBQ,CAMvC,CACD,EACH,CAEJ,CAAC,EAEDb,EAAU,YAAc,YAExB,IAAOc,EAAQd",
+  "names": ["jsx", "React", "useState", "cn", "Swiper", "SwiperSlide", "Navigation", "FreeMode", "Mousewheel", "SwiperBox", "data", "breakpoints", "Slide", "className", "id", "itemClassName", "isStart", "setStart", "isEnd", "setEnd", "swiper", "item", "jIndex", "SwiperBox_default"]
 }

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

@@ -7,6 +7,7 @@ export interface SwiperBoxProps {
     };
     id: string;
     className?: string;
+    itemClassName?: string;
     breakpoints?: Record<number, Object>;
     Slide: React.ComponentType<{
         data: any;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SwiperBox/types.ts"],
-  "sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n    onVideoPlayBtnClick?: (jIndex: number) => void\n  }\n  id: string\n  className?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any; jIndex?: number }>\n}\n"],
+  "sourcesContent": ["import React from 'react'\n\nexport interface SwiperBoxProps {\n  data: {\n    list: any[]\n    configuration?: any\n    onVideoPlayBtnClick?: (jIndex: number) => void\n  }\n  id: string\n  className?: string\n  itemClassName?: string\n  breakpoints?: Record<number, Object>\n  Slide: React.ComponentType<{ data: any; configuration?: any; jIndex?: number }>\n}\n"],
   "mappings": "AAAA,MAAkB",
   "names": []
 }

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 n}from"../../shared/Styles.js";import*as i from"../../components/tabs.js";import{cn as f}from"../../helpers/index.js";import u from"react";import d from"../ShelfDisplay/index.js";import y from"../AccordionCards/index.js";import N from"../Faq/index.js";import k from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import g from"../Title/index.js";const h=u.forwardRef(({data:o,className:m},l)=>{const{theme:c,shape:p,align:T,tabs:r,sectionTitle:s}=o,b=a=>a?.blockType==="ipc-shelfdisplay"?e(d,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?e(k,{data:a}):a?.blockType==="ipc-accordioncards"?e(y,{data:a}):a?.blockType==="ipc-faq"?e(N,{data:a}):null;return t("section",{ref:l,className:f(c==="dark"?"aiui-dark":"",m),children:[s&&e(g,{className:"section-title",data:{title:s}}),t(i.Tabs,{shape:p,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 M=n(h);export{M 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",children:a.tabContent?.[0]?b(a.tabContent?.[0]):null},a.tabName))]})]})});var A=f(v);export{A 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'\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 {\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": "aAiBa,cAAAA,EAeP,QAAAC,MAfO,oBAhBb,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,oBAElB,MAAMC,EAAON,EAAM,WAAsC,CAAC,CAAE,KAAAO,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAM,aAAAC,CAAa,EAAIP,EAE9CQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrBrB,EAACM,EAAA,CAAa,KAAMe,EAAY,EAC9BA,GAAY,YAAc,8BAC5BrB,EAACS,EAAA,CAAwB,KAAMY,EAAY,EACzCA,GAAY,YAAc,qBAC5BrB,EAACO,EAAA,CAAe,KAAMc,EAAY,EAChCA,GAAY,YAAc,UAC5BrB,EAACQ,EAAA,CAAI,KAAMa,EAAY,EAEvB,KAIX,OACEpB,EAAC,WAAQ,IAAKa,EAAc,UAAWV,EAAGW,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBnB,EAACU,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOS,CAAa,EAAG,EACjFlB,EAACE,EAAc,KAAd,CAAmB,MAAOa,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAlB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAe,EAAK,IAAII,GACRtB,EAACG,EAAc,YAAd,CAA4C,MAAOmB,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCJ,EAAK,IAAII,GACRtB,EAACG,EAAc,YAAd,CAA4C,MAAOmB,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,EAAQrB,EAAWS,CAAI",
-  "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "React", "ShelfDisplay", "AccordionCards", "Faq", "MultiLayoutGraphicBlock", "Title", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
+  "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",
+  "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/Tabs/types.d.ts

@@ -1,8 +1,9 @@
 import type { Align, Shape, Theme } from '../../types/props.js';
 import type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js';
-import type { ShelfDisplayProps } from '../ShelfDisplay/index.js';
+import type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js';
 import type { AccordionCardsType } from '../AccordionCards/index.js';
 import type { FaqProps } from '../Faq/types.js';
+import type { GraphicProps } from '../Graphic/index.js';
 export type TabsProps = {
     data: {
         sectionTitle?: string;
@@ -19,6 +20,8 @@ export type TabsProps = {
                 blockType: 'ipc-accordioncards';
             })[] | (FaqProps['data'] & {
                 blockType: 'ipc-faq';
+            })[] | (GraphicProps['data'] & {
+                blockType: 'ipc-graphic';
             })[];
         }[];
     };

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Dialog as x,DialogContent as p}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";import"../../helpers/index.js";const m=a=>{const{textVisible:s,extension:e,onCloseModal:i}=a;return t(x,{open:s,onOpenChange:()=>i(),children:t(p,{className:" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:o("div",{className:" relative",children:[t(n,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:" w-full",imgClassName:" object-cover"}),t("div",{className:" tablet:inset-x-[32px] tablet:top-[32px] absolute inset-x-[16px] top-[16px]",children:o("div",{className:"flex items-center justify-between text-white",children:[t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"}),t("div",{onClick:()=>i(),className:" cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{"clip-path":"url(#clip0_2548_10038)",children:t("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})})]})}),o("div",{className:"tablet:p-[32px] p-[16px] text-[#1D1D1F]",children:[t(l,{html:e?.text,className:" tablet:text-[24px] text-[20px] font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-[16px] font-bold leading-[1.4]"})]})]})})})};export{m as TextModal};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as n,DialogContent as x}from"../../components/dialog.js";import{Picture as d,Text as l}from"../../components/index.js";import"../../helpers/index.js";const p=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(n,{open:s,onOpenChange:()=>o(),children:t(x,{className:" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:a("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg",children:[t("div",{className:"min-h-[260px] w-full",children:t(d,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),t("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),t("div",{onClick:()=>o(),className:"absolute right-4 top-4 cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{"clip-path":"url(#clip0_2548_10038)",children:t("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),a("div",{className:"tablet:p-8 p-4 text-[#1D1D1F]",children:[t(l,{html:e?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};export{p as TextModal};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TextModal/index.tsx"],
-  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n  textVisible: boolean\n  extension?: {\n    textPcImg: Img\n    textMobileImg: Img\n    textTitle: string\n    text: string\n    textDesc: string\n  }\n  onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n  const { textVisible, extension, onCloseModal } = props\n\n  return (\n    <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n        <div className=\" relative\">\n          <Picture\n            source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n            className=\" w-full\"\n            imgClassName=\" object-cover\"\n          />\n          <div className=\" tablet:inset-x-[32px] tablet:top-[32px] absolute inset-x-[16px] top-[16px]\">\n            <div className=\"flex items-center justify-between text-white\">\n              <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n              <div onClick={() => onCloseModal()} className=\" cursor-pointer\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n                  <g clip-path=\"url(#clip0_2548_10038)\">\n                    <path\n                      d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n                      fill=\"white\"\n                    />\n                  </g>\n                </svg>\n              </div>\n            </div>\n          </div>\n          <div className=\"tablet:p-[32px] p-[16px] text-[#1D1D1F]\">\n            <Text html={extension?.text} className=\" tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n            <br />\n            <Text\n              html={extension?.textDesc}\n              className=\"tablet:leading-[1.2] pt-1 text-[16px] font-bold leading-[1.4]\"\n            />\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { TextModal }\n"],
-  "mappings": "AAyBU,cAAAA,EAME,QAAAC,MANF,oBAxBV,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,MAAmB,yBAenB,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,sKACvB,SAAAF,EAAC,OAAI,UAAU,YACb,UAAAD,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,UACV,aAAa,gBACf,EACAT,EAAC,OAAI,UAAU,8EACb,SAAAC,EAAC,OAAI,UAAU,+CACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACrGT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,kBAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,YAAU,yBACX,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,GACF,EACF,EACAC,EAAC,OAAI,UAAU,0CACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,0DAA0D,EACjGT,EAAC,OAAG,EACJA,EAACK,EAAA,CACC,KAAMI,GAAW,SACjB,UAAU,gEACZ,GACF,GACF,EACF,EACF,CAEJ",
+  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n  textVisible: boolean\n  extension?: {\n    textPcImg: Img\n    textMobileImg: Img\n    textTitle: string\n    text: string\n    textDesc: string\n  }\n  onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n  const { textVisible, extension, onCloseModal } = props\n\n  return (\n    <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n        <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg\">\n          <div className=\"min-h-[260px] w-full\">\n            <Picture\n              source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n              className=\"size-full\"\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          </div>\n          <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n            <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n          </div>\n          <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n              <g clip-path=\"url(#clip0_2548_10038)\">\n                <path\n                  d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n                  fill=\"white\"\n                />\n              </g>\n            </svg>\n          </div>\n          <div className=\"tablet:p-8 p-4 text-[#1D1D1F]\">\n            <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n            <br />\n            <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { TextModal }\n"],
+  "mappings": "AA0BY,cAAAA,EAmBF,QAAAC,MAnBE,oBAzBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,MAAmB,yBAenB,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,sKACvB,SAAAF,EAAC,OAAI,UAAU,gDACb,UAAAD,EAAC,OAAI,UAAU,uBACb,SAAAA,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,EACAT,EAAC,OAAI,UAAU,yDACb,SAAAA,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACvG,EACAT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,wCAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,YAAU,yBACX,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,EACAC,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,mDAAmD,EAC1FT,EAAC,OAAG,EACJA,EAACK,EAAA,CAAK,KAAMI,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
   "names": ["jsx", "jsxs", "Dialog", "DialogContent", "Picture", "Text", "TextModal", "props", "textVisible", "extension", "onCloseModal"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as n,jsxs as b}from"react/jsx-runtime";import z,{useEffect as U,useRef as r,useImperativeHandle as j}from"react";import{gsap as c}from"gsap";import{SplitText as w}from"gsap/dist/SplitText";import{ScrollTrigger as x}from"gsap/dist/ScrollTrigger";import{cn as v}from"../../helpers/utils.js";import{Heading as B}from"../../components/index.js";import{withLayout as C}from"../../shared/Styles.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useInView as q}from"react-intersection-observer";const T="link",k="title",y=z.forwardRef(({data:m,className:L},R)=>{const{title:p,caption:u,theme:f,extensions:o}=m,i=r(null),t=r(null),e=r(null),s=r(null),{ref:H,inView:d}=q();return j(R,()=>i.current),F(i,{componentType:T,componentName:k,componentTitle:m?.title}),U(()=>{c.registerPlugin(w,x);function E(){if(!t.current)return;const M=t.current?.clientHeight||80;e.current=new w(t.current,{type:"words",wordsClass:"word"});const l=e.current.words;c.set(l,{opacity:0}),s.current=x.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${M*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:N=>{const D=N.progress,g=l.length,S=1/g,h=.5;l.forEach((I,P)=>{const V=P/g*(1-h),$=S*(1+h);let a=(D-V)/$;a=Math.max(0,Math.min(a,1)),c.set(I,{opacity:a})})}})}return d&&E(),()=>{e.current&&e.current.revert(),s.current&&s.current.kill()}},[d]),(p||u)&&b("div",{className:"mb-6 flex items-end justify-between overflow-hidden",ref:i,children:[n("div",{ref:H,className:v("space-y-4 flex-1",L,{"aiui-dark":f==="dark"}),children:n(B,{ref:t,as:"h2",size:4,html:u||p})}),o?.textLink&&b("a",{className:v({"aiui-dark":f==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:_(o?.link,`${T}_${k}`),children:[o?.textLink,n("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:n("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});y.displayName="Title";var tt=C(y);export{tt as default};
+"use client";import{jsx as n,jsxs as b}from"react/jsx-runtime";import z,{useEffect as U,useRef as r,useImperativeHandle as j}from"react";import{gsap as p}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as k}from"../../helpers/utils.js";import{Heading as B}from"../../components/index.js";import{withLayout as C}from"../../shared/Styles.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useInView as q}from"react-intersection-observer";const u="link",f="title",y=z.forwardRef(({data:d,className:L},R)=>{const{title:o,caption:i,theme:g,extensions:s}=d,l=r(null),t=r(null),e=r(null),a=r(null),{ref:H,inView:h}=q();return j(R,()=>l.current),F(l,{componentType:u,componentName:f,componentTitle:d?.title}),U(()=>{p.registerPlugin(v,T);function E(){if(!t.current)return;const M=t.current?.clientHeight||80;e.current=new v(t.current,{type:"words",wordsClass:"word"});const c=e.current.words;p.set(c,{opacity:0}),a.current=T.create({trigger:t.current,start:"bottom bottom-=4%",end:`bottom+=${M*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:N=>{const $=N.progress,w=c.length,D=1/w,x=.5;c.forEach((S,I)=>{const P=I/w*(1-x),V=D*(1+x);let m=($-P)/V;m=Math.max(0,Math.min(m,1)),p.set(S,{opacity:m})})}})}return h&&E(),()=>{e.current&&e.current.revert(),a.current&&a.current.kill()}},[h]),(o||i)&&b("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:l,children:[n("div",{ref:H,className:k("space-y-4 flex-1",L,{"aiui-dark":g==="dark"}),children:n(B,{ref:t,as:"h1",size:4,html:i||o})}),s?.textLink&&b("a",{className:k({"aiui-dark":g==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:_(s?.link,`${u}_${f}`),"data-headless-type-name":`${u}#${f}`,"data-headless-title-desc-button":`${o}#${i}`,children:[s?.textLink,n("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:n("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});y.displayName="Title";var tt=C(y);export{tt as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, caption, theme, extensions } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between overflow-hidden\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n          >\n            {extensions?.textLink}\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              ></path>\n            </svg>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }, ref) => {\n  const { title, caption, theme, extensions } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length\n          const interval = 1 / total\n          const overlap = 0.5\n          words.forEach((word: any, i: number) => {\n            const start = (i / total) * (1 - overlap)\n            const width = interval * (1 + overlap)\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h1\" size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            {extensions?.textLink}\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              ></path>\n            </svg>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "useExposure", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "Title_default"]
 }

package/dist/esm/biz-components/VideoModal/YouTubePlayer.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{cn as l}from"../../helpers/utils.js";import o from"react-youtube";function u({youTubeId:e,className:r}){return e?t(o,{className:l("relative size-full",r),videoId:e,opts:{playerVars:{autoplay:1,rel:0,mute:1},width:"100%",height:"100%"}}):null}export{u as YouTubePlayer};
+import{jsx as t}from"react/jsx-runtime";import{cn as r}from"../../helpers/utils.js";import l from"react-youtube";function a({youTubeId:e,className:o}){return e?t(l,{className:r("relative size-full overflow-hidden rounded-2xl",o),videoId:e,opts:{playerVars:{autoplay:1,rel:0,mute:1},width:"100%",height:"100%"}}):null}export{a as YouTubePlayer};
 //# sourceMappingURL=YouTubePlayer.js.map

package/dist/esm/biz-components/VideoModal/YouTubePlayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/VideoModal/YouTubePlayer.tsx"],
-  "sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport YouTube from 'react-youtube'\n\nexport function YouTubePlayer({ youTubeId, className }: { youTubeId?: string; className?: string }) {\n  //   const onReady = event => {\n  //     // event.target.playVideo();\n  //   }\n\n  return youTubeId ? (\n    <YouTube\n      className={cn('relative size-full', className)}\n      videoId={youTubeId}\n      opts={{\n        playerVars: { autoplay: 1, rel: 0, mute: 1 },\n        width: '100%',\n        height: '100%',\n      }}\n    />\n  ) : null\n}\n"],
-  "mappings": "AASI,cAAAA,MAAA,oBATJ,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,gBAEb,SAASC,EAAc,CAAE,UAAAC,EAAW,UAAAC,CAAU,EAA+C,CAKlG,OAAOD,EACLJ,EAACE,EAAA,CACC,UAAWD,EAAG,qBAAsBI,CAAS,EAC7C,QAASD,EACT,KAAM,CACJ,WAAY,CAAE,SAAU,EAAG,IAAK,EAAG,KAAM,CAAE,EAC3C,MAAO,OACP,OAAQ,MACV,EACF,EACE,IACN",
+  "sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport YouTube from 'react-youtube'\n\nexport function YouTubePlayer({ youTubeId, className }: { youTubeId?: string; className?: string }) {\n  //   const onReady = event => {\n  //     // event.target.playVideo();\n  //   }\n\n  return youTubeId ? (\n    <YouTube\n      className={cn('relative size-full overflow-hidden rounded-2xl', className)}\n      videoId={youTubeId}\n      opts={{\n        playerVars: { autoplay: 1, rel: 0, mute: 1 },\n        width: '100%',\n        height: '100%',\n      }}\n    />\n  ) : null\n}\n"],
+  "mappings": "AASI,cAAAA,MAAA,oBATJ,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,gBAEb,SAASC,EAAc,CAAE,UAAAC,EAAW,UAAAC,CAAU,EAA+C,CAKlG,OAAOD,EACLJ,EAACE,EAAA,CACC,UAAWD,EAAG,iDAAkDI,CAAS,EACzE,QAASD,EACT,KAAM,CACJ,WAAY,CAAE,SAAU,EAAG,IAAK,EAAG,KAAM,CAAE,EAC3C,MAAO,OACP,OAAQ,MACV,EACF,EACE,IACN",
   "names": ["jsx", "cn", "YouTube", "YouTubePlayer", "youTubeId", "className"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Dialog as a,DialogContent as n}from"../../components/dialog.js";import{YouTubePlayer as s}from"../VideoModal/YouTubePlayer.js";const d=r=>{const{visible:i,youTubeId:e,videoUrl:t,onCloseModal:l}=r;return o(a,{open:i,onOpenChange:()=>l(),children:p(n,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[e?o(s,{youTubeId:e}):null,t?o("video",{className:"size-full object-cover",src:t,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,o("div",{onClick:()=>l(),className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:o("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};export{d as VideoModal};
+import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Dialog as a,DialogContent as n}from"../../components/dialog.js";import{YouTubePlayer as s}from"../VideoModal/YouTubePlayer.js";const d=r=>{const{visible:i,youTubeId:e,videoUrl:t,onCloseModal:l}=r;return o(a,{open:i,onOpenChange:()=>l(),children:p(n,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[e?o(s,{youTubeId:e}):null,t?o("video",{className:"size-full object-cover rounded-2xl overflow-hidden",src:t,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,o("div",{onClick:()=>l(),className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:o("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};export{d as VideoModal};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/VideoModal/index.tsx"],
-  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\n\nexport type VideoModalType = {\n  visible: boolean\n  youTubeId?: string\n  videoUrl?: string\n  onCloseModal: () => void\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, youTubeId, videoUrl, onCloseModal } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n        {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n        {videoUrl ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n        <div\n          onClick={() => onCloseModal()}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
-  "mappings": "AAgBM,OACe,OAAAA,EADf,QAAAC,MAAA,oBAfN,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,iBAAAC,MAAqB,iCAS9B,MAAMC,EAAcC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,aAAAC,CAAa,EAAIJ,EAEvD,OACEN,EAACE,EAAA,CAAO,KAAMK,EAAS,aAAc,IAAMG,EAAa,EACtD,SAAAT,EAACE,EAAA,CAAc,UAAU,wFACtB,UAAAK,EAAYR,EAACI,EAAA,CAAc,UAAWI,EAAW,EAAK,KACtDC,EAAWT,EAAC,SAAM,UAAU,yBAAyB,IAAKS,EAAU,MAAK,GAAC,KAAI,GAAC,SAAQ,GAAC,SAAQ,GAAC,EAAK,KACvGT,EAAC,OACC,QAAS,IAAMU,EAAa,EAC5B,UAAU,wHAEV,SAAAV,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,eAAa,MACb,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,iBAAe,QAAQ,kBAAgB,QAAQ,EAAE,uBAAuB,EAChF,EACF,GACF,EACF,CAEJ",
+  "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\n\nexport type VideoModalType = {\n  visible: boolean\n  youTubeId?: string\n  videoUrl?: string\n  onCloseModal: () => void\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, youTubeId, videoUrl, onCloseModal } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n        {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n        {videoUrl ? <video className=\"size-full object-cover rounded-2xl overflow-hidden\" src={videoUrl} muted loop autoPlay controls /> : null}\n        <div\n          onClick={() => onCloseModal()}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
+  "mappings": "AAgBM,OACe,OAAAA,EADf,QAAAC,MAAA,oBAfN,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,iBAAAC,MAAqB,iCAS9B,MAAMC,EAAcC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,aAAAC,CAAa,EAAIJ,EAEvD,OACEN,EAACE,EAAA,CAAO,KAAMK,EAAS,aAAc,IAAMG,EAAa,EACtD,SAAAT,EAACE,EAAA,CAAc,UAAU,wFACtB,UAAAK,EAAYR,EAACI,EAAA,CAAc,UAAWI,EAAW,EAAK,KACtDC,EAAWT,EAAC,SAAM,UAAU,qDAAqD,IAAKS,EAAU,MAAK,GAAC,KAAI,GAAC,SAAQ,GAAC,SAAQ,GAAC,EAAK,KACnIT,EAAC,OACC,QAAS,IAAMU,EAAa,EAC5B,UAAU,wHAEV,SAAAV,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,eAAa,MACb,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,iBAAe,QAAQ,kBAAgB,QAAQ,EAAE,uBAAuB,EAChF,EACF,GACF,EACF,CAEJ",
   "names": ["jsx", "jsxs", "Dialog", "DialogContent", "YouTubePlayer", "VideoModal", "props", "visible", "youTubeId", "videoUrl", "onCloseModal"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import d,{useImperativeHandle as m,useRef as n}from"react";import{Picture as c,Text as o}from"../../components/index.js";import{cn as h}from"../../helpers/index.js";import{withLayout as w}from"../../shared/Styles.js";import f from"../SwiperBox/index.js";const r=d.forwardRef(({data:s,className:p},a)=>{const t=n(null);return m(a,()=>t.current),e("div",{ref:t,className:h(p),children:e(f,{className:"!overflow-visible [&_.swiper-wrapper]:flex",data:{list:s?.productData||[],configuration:{shape:"card",isTab:!0}},Slide:i,breakpoints:{0:{slidesPerView:1,spaceBetween:12},374:{slidesPerView:1.2,spaceBetween:12},768:{slidesPerView:2.3,spaceBetween:16},1025:{slidesPerView:4,spaceBetween:16},1440:{slidesPerView:4,spaceBetween:16},1920:{slidesPerView:4,spaceBetween:16}},id:""})})});r.displayName="WhyChoose";const i=({data:s})=>l("div",{className:" laptop:p-[24px] laptop:shrink box-border w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]",children:[e(c,{source:s.img.url,className:"w-[36px]"}),l("div",{className:"py-[16px]",children:[e(o,{html:s?.title,className:"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]"}),e("div",{className:"mt-[8px]",children:e(o,{html:s?.desc,className:"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]"})})]})]});i.displayName="WhyChooseItem";var P=w(r);export{i as WhyChooseItem,P as default};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import m,{useImperativeHandle as d,useRef as n}from"react";import{Picture as c,Text as t}from"../../components/index.js";import{cn as h}from"../../helpers/index.js";import{withLayout as w}from"../../shared/Styles.js";import f from"../SwiperBox/index.js";const l=m.forwardRef(({data:s,className:p},a)=>{const o=n(null);return d(a,()=>o.current),e("div",{ref:o,className:h(p),children:e(f,{className:"!overflow-visible [&_.swiper-wrapper]:flex",data:{list:s?.productData||[],configuration:{shape:"card",isTab:!0}},Slide:i,breakpoints:{0:{slidesPerView:1,spaceBetween:12},374:{slidesPerView:1.2,spaceBetween:12},768:{slidesPerView:2.3,spaceBetween:16},1025:{slidesPerView:4,spaceBetween:16},1440:{slidesPerView:4,spaceBetween:16},1920:{slidesPerView:4,spaceBetween:16}},id:""})})});l.displayName="WhyChoose";const i=({data:s})=>r("div",{className:"whyChooseBlock laptop:p-[24px] laptop:shrink box-border w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]",children:[e(c,{source:s.img.url,className:"w-[36px]"}),r("div",{className:"mt-[16px]",children:[e(t,{html:s?.title,className:"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]"}),e("div",{className:"mt-[8px]",children:e(t,{html:s?.desc,className:"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]"})})]})]});i.displayName="WhyChooseItem";var C=w(l);export{i as WhyChooseItem,C as default};
 //# sourceMappingURL=WhyChoose.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/WhyChoose/WhyChoose.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n// import { withStyles } from '../../shared/Styles.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nconst WhyChoose = React.forwardRef<HTMLDivElement, WhyChooseProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <SwiperBox\n        className=\"!overflow-visible [&_.swiper-wrapper]:flex\"\n        data={{\n          list: data?.productData || [],\n          configuration: { shape: 'card', isTab: true },\n        }}\n        Slide={WhyChooseItem}\n        breakpoints={{\n          0: { slidesPerView: 1, spaceBetween: 12 },\n          374: { slidesPerView: 1.2, spaceBetween: 12 },\n          768: { slidesPerView: 2.3, spaceBetween: 16 },\n          1025: { slidesPerView: 4, spaceBetween: 16 },\n          1440: { slidesPerView: 4, spaceBetween: 16 },\n          1920: { slidesPerView: 4, spaceBetween: 16 },\n        }}\n        id={''}\n      />\n    </div>\n  )\n})\n\nWhyChoose.displayName = 'WhyChoose'\n\nconst WhyChooseItem = ({ data }: { data: ItemType }) => {\n  return (\n    <div className=\" laptop:p-[24px] laptop:shrink box-border w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]\">\n      <Picture source={data.img.url} className=\"w-[36px]\" />\n      <div className=\"py-[16px]\">\n        <Text\n          html={data?.title}\n          className=\"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]\"\n        />\n        <div className=\"mt-[8px]\">\n          <Text\n            html={data?.desc}\n            className=\"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nWhyChooseItem.displayName = 'WhyChooseItem'\n\nexport default withLayout(WhyChoose)\nexport { WhyChooseItem }\n"],
-  "mappings": "aAeM,cAAAA,EA2BA,QAAAC,MA3BA,oBAdN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QAEnD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBAEtB,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC/F,MAAMC,EAAWV,EAAuB,IAAI,EAC5C,OAAAD,EAAoBU,EAAK,IAAMC,EAAS,OAAQ,EAG9Cd,EAAC,OAAI,IAAKc,EAAU,UAAWP,EAAGK,CAAS,EACzC,SAAAZ,EAACS,EAAA,CACC,UAAU,6CACV,KAAM,CACJ,KAAME,GAAM,aAAe,CAAC,EAC5B,cAAe,CAAE,MAAO,OAAQ,MAAO,EAAK,CAC9C,EACA,MAAOI,EACP,YAAa,CACX,EAAG,CAAE,cAAe,EAAG,aAAc,EAAG,EACxC,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,CAC7C,EACA,GAAI,GACN,EACF,CAEJ,CAAC,EAEDL,EAAU,YAAc,YAExB,MAAMK,EAAgB,CAAC,CAAE,KAAAJ,CAAK,IAE1BV,EAAC,OAAI,UAAU,iGACb,UAAAD,EAACK,EAAA,CAAQ,OAAQM,EAAK,IAAI,IAAK,UAAU,WAAW,EACpDV,EAAC,OAAI,UAAU,YACb,UAAAD,EAACM,EAAA,CACC,KAAMK,GAAM,MACZ,UAAU,iFACZ,EACAX,EAAC,OAAI,UAAU,WACb,SAAAA,EAACM,EAAA,CACC,KAAMK,GAAM,KACZ,UAAU,iFACZ,EACF,GACF,GACF,EAIJI,EAAc,YAAc,gBAE5B,IAAOC,EAAQR,EAAWE,CAAS",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport type { WhyChooseProps, WhyChooseItem as ItemType } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n// import { withStyles } from '../../shared/Styles.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nconst WhyChoose = React.forwardRef<HTMLDivElement, WhyChooseProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <SwiperBox\n        className=\"!overflow-visible [&_.swiper-wrapper]:flex\"\n        data={{\n          list: data?.productData || [],\n          configuration: { shape: 'card', isTab: true },\n        }}\n        Slide={WhyChooseItem}\n        breakpoints={{\n          0: { slidesPerView: 1, spaceBetween: 12 },\n          374: { slidesPerView: 1.2, spaceBetween: 12 },\n          768: { slidesPerView: 2.3, spaceBetween: 16 },\n          1025: { slidesPerView: 4, spaceBetween: 16 },\n          1440: { slidesPerView: 4, spaceBetween: 16 },\n          1920: { slidesPerView: 4, spaceBetween: 16 },\n        }}\n        id={''}\n      />\n    </div>\n  )\n})\n\nWhyChoose.displayName = 'WhyChoose'\n\nconst WhyChooseItem = ({ data }: { data: ItemType }) => {\n  return (\n    <div className=\"whyChooseBlock laptop:p-[24px] laptop:shrink box-border w-full shrink-0 rounded-[16px] bg-[#EAEAEC] p-[16px]\">\n      <Picture source={data.img.url} className=\"w-[36px]\" />\n      <div className=\"mt-[16px]\">\n        <Text\n          html={data?.title}\n          className=\"line-clamp-2 overflow-hidden text-ellipsis text-[20px] font-bold leading-[1.2]\"\n        />\n        <div className=\"mt-[8px]\">\n          <Text\n            html={data?.desc}\n            className=\"line-clamp-2 overflow-hidden text-ellipsis text-[14px] font-bold leading-[1.2]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nWhyChooseItem.displayName = 'WhyChooseItem'\n\nexport default withLayout(WhyChoose)\nexport { WhyChooseItem }\n"],
+  "mappings": "aAeM,cAAAA,EA2BA,QAAAC,MA3BA,oBAdN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QAEnD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBAEtB,MAAMC,EAAYR,EAAM,WAA2C,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC/F,MAAMC,EAAWV,EAAuB,IAAI,EAC5C,OAAAD,EAAoBU,EAAK,IAAMC,EAAS,OAAQ,EAG9Cd,EAAC,OAAI,IAAKc,EAAU,UAAWP,EAAGK,CAAS,EACzC,SAAAZ,EAACS,EAAA,CACC,UAAU,6CACV,KAAM,CACJ,KAAME,GAAM,aAAe,CAAC,EAC5B,cAAe,CAAE,MAAO,OAAQ,MAAO,EAAK,CAC9C,EACA,MAAOI,EACP,YAAa,CACX,EAAG,CAAE,cAAe,EAAG,aAAc,EAAG,EACxC,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,IAAK,CAAE,cAAe,IAAK,aAAc,EAAG,EAC5C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,EAC3C,KAAM,CAAE,cAAe,EAAG,aAAc,EAAG,CAC7C,EACA,GAAI,GACN,EACF,CAEJ,CAAC,EAEDL,EAAU,YAAc,YAExB,MAAMK,EAAgB,CAAC,CAAE,KAAAJ,CAAK,IAE1BV,EAAC,OAAI,UAAU,+GACb,UAAAD,EAACK,EAAA,CAAQ,OAAQM,EAAK,IAAI,IAAK,UAAU,WAAW,EACpDV,EAAC,OAAI,UAAU,YACb,UAAAD,EAACM,EAAA,CACC,KAAMK,GAAM,MACZ,UAAU,iFACZ,EACAX,EAAC,OAAI,UAAU,WACb,SAAAA,EAACM,EAAA,CACC,KAAMK,GAAM,KACZ,UAAU,iFACZ,EACF,GACF,GACF,EAIJI,EAAc,YAAc,gBAE5B,IAAOC,EAAQR,EAAWE,CAAS",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withLayout", "SwiperBox", "WhyChoose", "data", "className", "ref", "innerRef", "WhyChooseItem", "WhyChoose_default"]
 }

package/dist/esm/components/button.d.ts

@@ -33,6 +33,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
     as?: 'button' | 'a';
     href?: string;
+    iconClassName?: string;
     /** 自定义loading  */
     spinner?: React.ReactNode;
 }

package/dist/esm/components/button.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as f,jsx as e,jsxs as c}from"react/jsx-runtime";import*as v from"react";import{VisuallyHidden as h}from"@radix-ui/react-visually-hidden";import{cva as l}from"class-variance-authority";import x from"../icons/spinner.js";import{cn as k}from"../helpers/index.js";const w={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},B=({size:s="base"})=>{const{width:t,height:a}=w[s];return e("svg",{width:t,height:a,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},V=l("rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1]  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),L=l("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),p=v.forwardRef(({asChild:s=!1,as:t="button",href:a,size:r="lg",children:o,variant:n,hoverEffect:u="none",className:g,disabled:d=!1,loading:i=!1,spinner:b,...y},m)=>e(t,{disabled:d||i,className:k(V({variant:n,size:r,hoverEffect:u,state:i?"loading":d?"disabled":"default"}),g),ref:m,...t==="a"?{href:a}:{},...y,children:i?c(f,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:o}),e("span",{className:"absolute",children:b||e(x,{className:L({variant:n})})}),e(h,{children:o})]}):c(f,{children:[o,n==="link"&&r&&r!=="icon"&&e(B,{size:r})]})}));p.displayName="Button";var R=p;export{R as default,w as sizeMap};
+"use client";import{Fragment as f,jsx as e,jsxs as c}from"react/jsx-runtime";import*as h from"react";import{VisuallyHidden as x}from"@radix-ui/react-visually-hidden";import{cva as l}from"class-variance-authority";import k from"../icons/spinner.js";import{cn as w}from"../helpers/index.js";const B={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},V=({size:s="base",...r})=>{const{width:a,height:t}=B[s];return e("svg",{width:a,height:t,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},L=l("rounded-btn inline-flex cursor-pointer items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1]  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),N=l("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),p=h.forwardRef(({asChild:s=!1,as:r="button",href:a,size:t="lg",children:o,variant:n,hoverEffect:u="none",className:g,disabled:d=!1,loading:i=!1,spinner:b,iconClassName:y,...m},v)=>e(r,{disabled:d||i,className:w(L({variant:n,size:t,hoverEffect:u,state:i?"loading":d?"disabled":"default"}),g),ref:v,...r==="a"?{href:a}:{},...m,children:i?c(f,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:o}),e("span",{className:"absolute",children:b||e(k,{className:N({variant:n})})}),e(x,{children:o})]}):c(f,{children:[o,n==="link"&&t&&t!=="icon"&&e(V,{className:y,size:t})]})}));p.displayName="Button";var I=p;export{I as default,B as sizeMap};
 //# sourceMappingURL=button.js.map