@shopify/shop-minis-react 0.0.0-snapshot.20251211183509 → 0.0.0-snapshot.20251215163043

package/dist/components/atoms/product-variant-price.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as h, Fragment as d } from "react/jsx-runtime";
-import { formatMoney as a } from "../../lib/formatMoney.js";
 import { cn as i } from "../../lib/utils.js";
+import { formatMoney as a } from "../../utils/formatMoney.js";
 function N({
   amount: r,
   currencyCode: t,

package/dist/components/atoms/product-variant-price.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-variant-price.js","sources":["../../../src/components/atoms/product-variant-price.tsx"],"sourcesContent":["import {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\n\nexport interface ProductVariantPriceProps {\n  amount: number | string\n  currencyCode?: string\n  compareAtPriceAmount?: number | string\n  compareAtPriceCurrencyCode?: string\n  currentPriceClassName?: string\n  originalPriceClassName?: string\n  className?: string\n}\n\nexport function ProductVariantPrice({\n  amount,\n  currencyCode,\n  compareAtPriceAmount,\n  compareAtPriceCurrencyCode,\n  currentPriceClassName,\n  originalPriceClassName,\n  className,\n}: ProductVariantPriceProps) {\n  if (!amount || !currencyCode) {\n    return null\n  }\n\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const amountStr = String(amount)\n  const compareAtPriceAmountStr = compareAtPriceAmount\n    ? String(compareAtPriceAmount)\n    : undefined\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      {hasDiscount ? (\n        <>\n          <span\n            className={cn(\n              'text-sm font-semibold text-gray-900',\n              currentPriceClassName\n            )}\n          >\n            {formatMoney(amountStr, currencyCode)}\n          </span>\n          <span\n            className={cn(\n              'text-sm text-gray-500 line-through',\n              originalPriceClassName\n            )}\n          >\n            {formatMoney(\n              compareAtPriceAmountStr!,\n              compareAtPriceCurrencyCode || currencyCode\n            )}\n          </span>\n        </>\n      ) : (\n        <span\n          className={cn(\n            'text-sm font-semibold text-gray-900',\n            currentPriceClassName\n          )}\n        >\n          {formatMoney(amountStr, currencyCode)}\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["ProductVariantPrice","amount","currencyCode","compareAtPriceAmount","compareAtPriceCurrencyCode","currentPriceClassName","originalPriceClassName","className","hasDiscount","amountStr","compareAtPriceAmountStr","jsx","cn","jsxs","Fragment","formatMoney"],"mappings":";;;AAaO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AACvB,MAAA,CAACN,KAAU,CAACC;AACP,WAAA;AAGH,QAAAM,IAAcL,KAAwBA,MAAyBF,GAE/DQ,IAAY,OAAOR,CAAM,GACzBS,IAA0BP,IAC5B,OAAOA,CAAoB,IAC3B;AAGF,SAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAG,2BAA2BL,CAAS,GACpD,cAEG,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAP;AAAA,QACF;AAAA,QAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,MAAA;AAAA,IACtC;AAAA,IACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QACF;AAAA,QAEC,UAAAS;AAAA,UACCL;AAAA,UACAN,KAA8BF;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,EACF,EAAA,CACF,IAEA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP;AAAA,MACF;AAAA,MAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,IAAA;AAAA,EAAA,GAG1C;AAEJ;"}
+{"version":3,"file":"product-variant-price.js","sources":["../../../src/components/atoms/product-variant-price.tsx"],"sourcesContent":["import {cn} from '../../lib/utils'\nimport {formatMoney} from '../../utils/formatMoney'\n\nexport interface ProductVariantPriceProps {\n  amount: number | string\n  currencyCode?: string\n  compareAtPriceAmount?: number | string\n  compareAtPriceCurrencyCode?: string\n  currentPriceClassName?: string\n  originalPriceClassName?: string\n  className?: string\n}\n\nexport function ProductVariantPrice({\n  amount,\n  currencyCode,\n  compareAtPriceAmount,\n  compareAtPriceCurrencyCode,\n  currentPriceClassName,\n  originalPriceClassName,\n  className,\n}: ProductVariantPriceProps) {\n  if (!amount || !currencyCode) {\n    return null\n  }\n\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const amountStr = String(amount)\n  const compareAtPriceAmountStr = compareAtPriceAmount\n    ? String(compareAtPriceAmount)\n    : undefined\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      {hasDiscount ? (\n        <>\n          <span\n            className={cn(\n              'text-sm font-semibold text-gray-900',\n              currentPriceClassName\n            )}\n          >\n            {formatMoney(amountStr, currencyCode)}\n          </span>\n          <span\n            className={cn(\n              'text-sm text-gray-500 line-through',\n              originalPriceClassName\n            )}\n          >\n            {formatMoney(\n              compareAtPriceAmountStr!,\n              compareAtPriceCurrencyCode || currencyCode\n            )}\n          </span>\n        </>\n      ) : (\n        <span\n          className={cn(\n            'text-sm font-semibold text-gray-900',\n            currentPriceClassName\n          )}\n        >\n          {formatMoney(amountStr, currencyCode)}\n        </span>\n      )}\n    </div>\n  )\n}\n"],"names":["ProductVariantPrice","amount","currencyCode","compareAtPriceAmount","compareAtPriceCurrencyCode","currentPriceClassName","originalPriceClassName","className","hasDiscount","amountStr","compareAtPriceAmountStr","jsx","cn","jsxs","Fragment","formatMoney"],"mappings":";;;AAaO,SAASA,EAAoB;AAAA,EAClC,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,WAAAC;AACF,GAA6B;AACvB,MAAA,CAACN,KAAU,CAACC;AACP,WAAA;AAGH,QAAAM,IAAcL,KAAwBA,MAAyBF,GAE/DQ,IAAY,OAAOR,CAAM,GACzBS,IAA0BP,IAC5B,OAAOA,CAAoB,IAC3B;AAGF,SAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAG,2BAA2BL,CAAS,GACpD,cAEG,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAP;AAAA,QACF;AAAA,QAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,MAAA;AAAA,IACtC;AAAA,IACA,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAN;AAAA,QACF;AAAA,QAEC,UAAAS;AAAA,UACCL;AAAA,UACAN,KAA8BF;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,EACF,EAAA,CACF,IAEA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAP;AAAA,MACF;AAAA,MAEC,UAAAU,EAAYN,GAAWP,CAAY;AAAA,IAAA;AAAA,EAAA,GAG1C;AAEJ;"}

package/dist/components/commerce/merchant-card.js

@@ -29,7 +29,7 @@ function B({
         backgroundColor: n.backgroundColor
       },
       className: c(
-        "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square",
+        "relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square isolate",
         a
       ),
       ...r

package/dist/components/commerce/merchant-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useCallback, useContext, useMemo} from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {Star} from 'lucide-react'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {Image} from '../atoms/image'\nimport {Touchable} from '../atoms/touchable'\n\ninterface MerchantCardContextValue {\n  // Core data\n  shop: Shop\n\n  // Derived data\n  cardTheme: ExtractedBrandTheme\n\n  // UI configuration\n  touchable: boolean\n  featuredImagesLimit: number\n\n  // Actions\n  onClick: () => void\n}\n\nconst MerchantCardContext = createContext<MerchantCardContextValue | undefined>(\n  undefined\n)\n\nfunction useMerchantCardContext() {\n  const context = useContext(MerchantCardContext)\n  if (!context) {\n    throw new Error(\n      'useMerchantCardContext must be used within a MerchantCardProvider'\n    )\n  }\n  return context\n}\n\nfunction MerchantCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, cardTheme, onClick} = useMerchantCardContext()\n\n  const content = (\n    <div\n      style={{\n        backgroundColor: cardTheme.backgroundColor,\n      }}\n      className={cn(\n        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square',\n\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <Image\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn(className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('size-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardLogo({className, ...props}: React.ComponentProps<'div'>) {\n  const {shop} = useMerchantCardContext()\n  const {name, visualTheme} = shop\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const logoUrl = visualTheme?.logoImage?.url\n  const altText = `${name} logo`\n\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n        'flex items-center justify-center overflow-hidden',\n        logoBackgroundClassName,\n        className\n      )}\n      {...props}\n    >\n      {logoUrl ? (\n        <img\n          src={logoUrl}\n          alt={altText}\n          className=\"w-full h-full object-cover\"\n        />\n      ) : (\n        <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {name?.slice(0, 1)}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isDarkTheme = useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn(\n        'p-3 flex-shrink-0 flex flex-col min-w-0',\n        textColor,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {shop} = useMerchantCardContext()\n  const {name} = shop\n  const nameContent = children ?? name\n\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn('text-sm font-medium truncate', className)}\n      {...props}\n    >\n      {nameContent}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  const {shop} = useMerchantCardContext()\n\n  const {\n    reviewAnalytics: {averageRating, reviewCount},\n  } = shop\n\n  if (!averageRating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(averageRating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme, featuredImagesLimit} = useMerchantCardContext()\n  const {visualTheme} = shop\n\n  const featuredImages = useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const displayDefaultCover = () => {\n    if (numberOfFeaturedImages > 0) {\n      const heightClass = numberOfFeaturedImages === 2 ? 'h-full' : 'h-1/2'\n      return featuredImages?.map((image, index) => (\n        <div className={`z-0 w-1/2 ${heightClass}`} key={image.url || index}>\n          <MerchantCardImage\n            src={image.url}\n            alt={image.altText ?? undefined}\n            thumbhash={image.thumbhash ?? undefined}\n            className=\"aspect-square\"\n          />\n        </div>\n      ))\n    } else if (cardTheme.type === 'coverImage') {\n      return (\n        <MerchantCardImage\n          src={cardTheme.coverImageUrl}\n          thumbhash={cardTheme.coverImageThumbhash}\n        />\n      )\n    }\n\n    return null\n  }\n\n  return (\n    <div className=\"w-full h-full bg-muted relative flex flex-wrap overflow-hidden\">\n      {withLogo && (\n        <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n          <MerchantCardLogo />\n        </div>\n      )}\n\n      {displayDefaultCover()}\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme} = useMerchantCardContext()\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      {withLogo && (\n        <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n          {wordmarkImage ? (\n            <img\n              src={wordmarkImage.url}\n              alt={wordmarkImage.altText || shop.name}\n              className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n              data-testid=\"store-data-wordmark\"\n            />\n          ) : (\n            <MerchantCardLogo />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\ninterface MerchantCardHeaderProps {\n  isDefault?: boolean\n  withLogo?: boolean\n}\n\nfunction MerchantCardHeader({\n  isDefault,\n  withLogo,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & MerchantCardHeaderProps) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isBranded =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div\n      className={cn('relative overflow-hidden flex-1 flex-wrap', className)}\n      {...props}\n    >\n      {isBranded && !isDefault ? (\n        <MerchantCardBrandedHeader withLogo={withLogo} />\n      ) : (\n        <MerchantCardDefaultHeader withLogo={withLogo} />\n      )}\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  featuredImagesLimit?: number\n  children?: React.ReactNode\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  featuredImagesLimit = 4,\n  children,\n}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {id, visualTheme} = shop\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  const cardTheme = useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const contextValue = useMemo<MerchantCardContextValue>(\n    () => ({\n      shop,\n      cardTheme,\n      touchable,\n      featuredImagesLimit,\n      onClick: handleClick,\n    }),\n    [shop, cardTheme, touchable, featuredImagesLimit, handleClick]\n  )\n\n  return (\n    <MerchantCardContext.Provider value={contextValue}>\n      {children ?? (\n        <MerchantCardContainer>\n          <MerchantCardHeader withLogo />\n          <MerchantCardInfo>\n            <MerchantCardName />\n            <MerchantCardRating />\n          </MerchantCardInfo>\n        </MerchantCardContainer>\n      )}\n    </MerchantCardContext.Provider>\n  )\n}\n\nexport {\n  MerchantCard,\n  MerchantCardContainer,\n  MerchantCardHeader,\n  MerchantCardInfo,\n  MerchantCardName,\n  MerchantCardRating,\n}\n"],"names":["MerchantCardContext","createContext","useMerchantCardContext","context","useContext","MerchantCardContainer","className","props","touchable","cardTheme","onClick","content","jsx","cn","Touchable","MerchantCardImage","src","alt","thumbhash","Image","MerchantCardLogo","shop","name","visualTheme","logoAverageColor","logoDominantColor","logoColor","logoBackgroundClassName","useMemo","isDarkColor","logoUrl","altText","MerchantCardInfo","textColor","MerchantCardName","children","nameContent","MerchantCardRating","averageRating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardDefaultHeader","withLogo","featuredImagesLimit","featuredImages","getFeaturedImages","numberOfFeaturedImages","heightClass","image","index","MerchantCardBrandedHeader","wordmarkImage","Fragment","MerchantCardHeader","isDefault","isBranded","MerchantCard","navigateToShop","useShopNavigation","id","handleClick","useCallback","extractBrandTheme","contextValue"],"mappings":"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"}
+{"version":3,"file":"merchant-card.js","sources":["../../../src/components/commerce/merchant-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {createContext, useCallback, useContext, useMemo} from 'react'\n\nimport {type Shop} from '@shopify/shop-minis-platform'\nimport {Star} from 'lucide-react'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {cn} from '../../lib/utils'\nimport {\n  type ExtractedBrandTheme,\n  extractBrandTheme,\n  formatReviewCount,\n  getFeaturedImages,\n  normalizeRating,\n} from '../../utils'\nimport {isDarkColor} from '../../utils/colors'\nimport {Image} from '../atoms/image'\nimport {Touchable} from '../atoms/touchable'\n\ninterface MerchantCardContextValue {\n  // Core data\n  shop: Shop\n\n  // Derived data\n  cardTheme: ExtractedBrandTheme\n\n  // UI configuration\n  touchable: boolean\n  featuredImagesLimit: number\n\n  // Actions\n  onClick: () => void\n}\n\nconst MerchantCardContext = createContext<MerchantCardContextValue | undefined>(\n  undefined\n)\n\nfunction useMerchantCardContext() {\n  const context = useContext(MerchantCardContext)\n  if (!context) {\n    throw new Error(\n      'useMerchantCardContext must be used within a MerchantCardProvider'\n    )\n  }\n  return context\n}\n\nfunction MerchantCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, cardTheme, onClick} = useMerchantCardContext()\n\n  const content = (\n    <div\n      style={{\n        backgroundColor: cardTheme.backgroundColor,\n      }}\n      className={cn(\n        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square isolate',\n\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction MerchantCardImage({\n  className,\n  src,\n  alt,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  thumbhash?: string\n}) {\n  if (!src) {\n    return <div className=\"w-full h-full bg-gray-100\" />\n  }\n\n  if (thumbhash) {\n    return (\n      <Image\n        data-slot=\"merchant-card-image\"\n        src={src}\n        alt={alt}\n        thumbhash={thumbhash}\n        className={cn(className)}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <img\n      data-slot=\"merchant-card-image\"\n      src={src}\n      alt={alt}\n      className={cn('size-full object-cover', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardLogo({className, ...props}: React.ComponentProps<'div'>) {\n  const {shop} = useMerchantCardContext()\n  const {name, visualTheme} = shop\n\n  const logoAverageColor = visualTheme?.brandSettings?.colors?.logoAverage\n  const logoDominantColor = visualTheme?.brandSettings?.colors?.logoDominant\n  const logoColor = logoAverageColor || logoDominantColor\n\n  const logoBackgroundClassName = useMemo(\n    () => (logoColor && isDarkColor(logoColor) ? 'bg-white' : 'bg-gray-800'),\n    [logoColor]\n  )\n\n  const logoUrl = visualTheme?.logoImage?.url\n  const altText = `${name} logo`\n\n  return (\n    <div\n      data-slot=\"merchant-card-logo\"\n      className={cn(\n        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10',\n        'w-16 h-16 rounded-xl bg-white border-2 border-white shadow-sm',\n        'flex items-center justify-center overflow-hidden',\n        logoBackgroundClassName,\n        className\n      )}\n      {...props}\n    >\n      {logoUrl ? (\n        <img\n          src={logoUrl}\n          alt={altText}\n          className=\"w-full h-full object-cover\"\n        />\n      ) : (\n        <div className=\"w-full h-full bg-gray-200 flex items-center justify-center\">\n          <span className=\"text-gray-600 font-semibold text-lg\">\n            {name?.slice(0, 1)}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction MerchantCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isDarkTheme = useMemo(() => {\n    return (\n      cardTheme.backgroundColor !== 'white' &&\n      isDarkColor(cardTheme.backgroundColor)\n    )\n  }, [cardTheme.backgroundColor])\n\n  const textColor = isDarkTheme ? 'text-primary-foreground' : 'text-foreground'\n\n  return (\n    <div\n      data-slot=\"merchant-card-info\"\n      className={cn(\n        'p-3 flex-shrink-0 flex flex-col min-w-0',\n        textColor,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MerchantCardName({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {shop} = useMerchantCardContext()\n  const {name} = shop\n  const nameContent = children ?? name\n\n  return (\n    <h3\n      data-slot=\"merchant-card-name\"\n      className={cn('text-sm font-medium truncate', className)}\n      {...props}\n    >\n      {nameContent}\n    </h3>\n  )\n}\n\nfunction MerchantCardRating({\n  className,\n\n  ...props\n}: React.ComponentProps<'div'> & {\n  rating?: number | null\n  reviewCount?: number\n}) {\n  const {shop} = useMerchantCardContext()\n\n  const {\n    reviewAnalytics: {averageRating, reviewCount},\n  } = shop\n\n  if (!averageRating || !reviewCount) return null\n\n  return (\n    <div\n      data-slot=\"merchant-card-rating\"\n      className={cn('flex items-center gap-1 text-xs', className)}\n      {...props}\n    >\n      <Star className=\"h-3 w-3 fill-current\" />\n      <span className=\"text-xs\">\n        {normalizeRating(averageRating)} ({formatReviewCount(reviewCount)})\n      </span>\n    </div>\n  )\n}\n\nfunction MerchantCardDefaultHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme, featuredImagesLimit} = useMerchantCardContext()\n  const {visualTheme} = shop\n\n  const featuredImages = useMemo(\n    () => getFeaturedImages(visualTheme, featuredImagesLimit),\n    [visualTheme, featuredImagesLimit]\n  )\n\n  const numberOfFeaturedImages = featuredImages?.length ?? 0\n\n  const displayDefaultCover = () => {\n    if (numberOfFeaturedImages > 0) {\n      const heightClass = numberOfFeaturedImages === 2 ? 'h-full' : 'h-1/2'\n      return featuredImages?.map((image, index) => (\n        <div className={`z-0 w-1/2 ${heightClass}`} key={image.url || index}>\n          <MerchantCardImage\n            src={image.url}\n            alt={image.altText ?? undefined}\n            thumbhash={image.thumbhash ?? undefined}\n            className=\"aspect-square\"\n          />\n        </div>\n      ))\n    } else if (cardTheme.type === 'coverImage') {\n      return (\n        <MerchantCardImage\n          src={cardTheme.coverImageUrl}\n          thumbhash={cardTheme.coverImageThumbhash}\n        />\n      )\n    }\n\n    return null\n  }\n\n  return (\n    <div className=\"w-full h-full bg-muted relative flex flex-wrap overflow-hidden\">\n      {withLogo && (\n        <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10\">\n          <MerchantCardLogo />\n        </div>\n      )}\n\n      {displayDefaultCover()}\n    </div>\n  )\n}\n\nfunction MerchantCardBrandedHeader({withLogo = false}: {withLogo?: boolean}) {\n  const {shop, cardTheme} = useMerchantCardContext()\n  const wordmarkImage = shop.visualTheme?.brandSettings?.headerTheme?.wordmark\n\n  return (\n    <div className=\"size-full relative\">\n      {cardTheme.type === 'coverImage' && (\n        <>\n          <MerchantCardImage\n            src={cardTheme.coverImageUrl}\n            alt={shop.name}\n            thumbhash={cardTheme.coverImageThumbhash ?? undefined}\n          />\n\n          <div className=\"absolute inset-0 z-[1] bg-black/20\" />\n\n          <div\n            className=\"absolute bottom-0 z-[1] size-full\"\n            style={{\n              background: `linear-gradient(to top, ${cardTheme.backgroundColor} 0%, ${cardTheme.backgroundColor}00 40%)`,\n            }}\n          />\n        </>\n      )}\n\n      {withLogo && (\n        <div className=\"absolute inset-0 z-[1] flex items-center justify-center\">\n          {wordmarkImage ? (\n            <img\n              src={wordmarkImage.url}\n              alt={wordmarkImage.altText || shop.name}\n              className=\"max-h-16 min-h-10 max-w-28 object-contain\"\n              data-testid=\"store-data-wordmark\"\n            />\n          ) : (\n            <MerchantCardLogo />\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\ninterface MerchantCardHeaderProps {\n  isDefault?: boolean\n  withLogo?: boolean\n}\n\nfunction MerchantCardHeader({\n  isDefault,\n  withLogo,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & MerchantCardHeaderProps) {\n  const {cardTheme} = useMerchantCardContext()\n\n  const isBranded =\n    cardTheme.type === 'coverImage' || cardTheme.type === 'brandColor'\n\n  return (\n    <div\n      className={cn('relative overflow-hidden flex-1 flex-wrap', className)}\n      {...props}\n    >\n      {isBranded && !isDefault ? (\n        <MerchantCardBrandedHeader withLogo={withLogo} />\n      ) : (\n        <MerchantCardDefaultHeader withLogo={withLogo} />\n      )}\n    </div>\n  )\n}\n\nexport interface MerchantCardProps {\n  shop: Shop\n  touchable?: boolean\n  featuredImagesLimit?: number\n  children?: React.ReactNode\n}\n\nfunction MerchantCard({\n  shop,\n  touchable = true,\n  featuredImagesLimit = 4,\n  children,\n}: MerchantCardProps) {\n  const {navigateToShop} = useShopNavigation()\n\n  const {id, visualTheme} = shop\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n    navigateToShop({shopId: id})\n  }, [navigateToShop, id, touchable])\n\n  const cardTheme = useMemo(\n    () => extractBrandTheme(visualTheme?.brandSettings),\n    [visualTheme?.brandSettings]\n  )\n\n  const contextValue = useMemo<MerchantCardContextValue>(\n    () => ({\n      shop,\n      cardTheme,\n      touchable,\n      featuredImagesLimit,\n      onClick: handleClick,\n    }),\n    [shop, cardTheme, touchable, featuredImagesLimit, handleClick]\n  )\n\n  return (\n    <MerchantCardContext.Provider value={contextValue}>\n      {children ?? (\n        <MerchantCardContainer>\n          <MerchantCardHeader withLogo />\n          <MerchantCardInfo>\n            <MerchantCardName />\n            <MerchantCardRating />\n          </MerchantCardInfo>\n        </MerchantCardContainer>\n      )}\n    </MerchantCardContext.Provider>\n  )\n}\n\nexport {\n  MerchantCard,\n  MerchantCardContainer,\n  MerchantCardHeader,\n  MerchantCardInfo,\n  MerchantCardName,\n  MerchantCardRating,\n}\n"],"names":["MerchantCardContext","createContext","useMerchantCardContext","context","useContext","MerchantCardContainer","className","props","touchable","cardTheme","onClick","content","jsx","cn","Touchable","MerchantCardImage","src","alt","thumbhash","Image","MerchantCardLogo","shop","name","visualTheme","logoAverageColor","logoDominantColor","logoColor","logoBackgroundClassName","useMemo","isDarkColor","logoUrl","altText","MerchantCardInfo","textColor","MerchantCardName","children","nameContent","MerchantCardRating","averageRating","reviewCount","jsxs","Star","normalizeRating","formatReviewCount","MerchantCardDefaultHeader","withLogo","featuredImagesLimit","featuredImages","getFeaturedImages","numberOfFeaturedImages","heightClass","image","index","MerchantCardBrandedHeader","wordmarkImage","Fragment","MerchantCardHeader","isDefault","isBranded","MerchantCard","navigateToShop","useShopNavigation","id","handleClick","useCallback","extractBrandTheme","contextValue"],"mappings":"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"}

package/dist/components/commerce/product-card.js

@@ -4,8 +4,8 @@ import { useState as R, useCallback as C, useMemo as k, useContext as z } from "
 import { useShopNavigation as S } from "../../hooks/navigation/useShopNavigation.js";
 import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
 import { ProductReviewStars as j } from "../../internal/components/product-review-stars.js";
-import { formatMoney as B } from "../../lib/formatMoney.js";
 import { cn as d } from "../../lib/utils.js";
+import { formatMoney as B } from "../../utils/formatMoney.js";
 import { Image as T } from "../atoms/image.js";
 import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
 import { Touchable as O } from "../atoms/touchable.js";
@@ -28,7 +28,7 @@ function q({
     "div",
     {
       className: d(
-        "relative size-full overflow-hidden rounded-xl border-0",
+        "relative size-full overflow-hidden rounded-xl border-0 isolate",
         t
       ),
       ...e

package/dist/components/commerce/product-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-card.js","sources":["../../../src/components/commerce/product-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useCallback, useContext, useMemo, useState} from 'react'\n\nimport {type Product, type ProductVariant} from '@shopify/shop-minis-platform'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {ProductReviewStars} from '../../internal/components/product-review-stars'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {Image} from '../atoms/image'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nimport {FavoriteButton} from './favorite-button'\n\n// Context definition\ninterface ProductCardContextValue {\n  // Core data\n  product: Product\n  selectedProductVariant?: ProductVariant\n\n  // UI configuration\n  variant: 'default' | 'priceOverlay' | 'compact'\n  touchable: boolean\n  badgeText?: string\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  favoriteButtonDisabled: boolean\n  reviewsDisabled: boolean\n\n  // State\n  isFavorited: boolean\n\n  // Actions\n  onClick: () => void\n  onFavoriteToggle: () => void\n}\n\nconst ProductCardContext = React.createContext<\n  ProductCardContextValue | undefined\n>(undefined)\n\nfunction useProductCardContext() {\n  const context = useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      'ProductCard components must be used within a ProductCard provider'\n    )\n  }\n  return context\n}\n\n// Primitive components (building blocks)\nfunction ProductCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, onClick} = useProductCardContext()\n\n  const content = (\n    <div\n      className={cn(\n        'relative size-full overflow-hidden rounded-xl border-0',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction ProductCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive display image locally\n  const displayImage = selectedProductVariant?.image || product.featuredImage\n  const src = displayImage?.url\n  const alt = displayImage?.altText || product.title\n  const thumbhash = product.featuredImage?.thumbhash\n\n  const renderImageElement = useCallback(\n    (src: string) => {\n      const imageElement = thumbhash ? (\n        <Image\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          objectFit=\"cover\"\n          className={cn('size-full', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('size-full object-cover', className)}\n          {...props}\n        />\n      )\n\n      return imageElement\n    },\n    [alt, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center size-full\">\n      {src ? (\n        renderImageElement(src)\n      ) : (\n        <div className=\"text-gray-400 text-sm w-full text-center\">No Image</div>\n      )}\n    </div>\n  )\n}\n\nfunction ProductCardBadge({\n  className,\n  position = 'bottom-left',\n  variant,\n  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\n}) {\n  const {badgeText, badgeVariant} = useProductCardContext()\n  // If no children provided, use badgeText from context\n  const content = children || badgeText\n\n  if (!content) return null\n\n  return (\n    <div\n      className={cn(\n        'absolute z-10',\n        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'\n      )}\n    >\n      <Badge\n        variant={variant ?? badgeVariant ?? 'none'}\n        className={cn(\n          !badgeVariant &&\n            !variant &&\n            'bg-black/50 text-white border-transparent',\n          'rounded',\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {isFavorited, favoriteButtonDisabled, onFavoriteToggle} =\n    useProductCardContext()\n  if (favoriteButtonDisabled) return null\n\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-testid=\"product-card-info\"\n      className={cn('px-1 pt-2 pb-0 space-y-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {product} = useProductCardContext()\n  return (\n    <h3\n      data-slot=\"product-card-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children || product.title}\n    </h3>\n  )\n}\n\nfunction ProductCardReviewStars({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {product, reviewsDisabled} = useProductCardContext()\n  const reviewAnalytics = product.reviewAnalytics\n\n  if (reviewsDisabled || !reviewAnalytics?.averageRating) {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"product-card-review-stars\"\n      className={cn('', className)}\n      {...props}\n    >\n      <ProductReviewStars\n        averageRating={reviewAnalytics.averageRating}\n        reviewCount={reviewAnalytics.reviewCount}\n      />\n    </div>\n  )\n}\n\nfunction ProductCardPrice({className}: {className?: string}) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive price data locally\n  const displayPrice = selectedProductVariant?.price || product?.price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || product?.compareAtPrice\n\n  return (\n    <ProductVariantPrice\n      amount={displayPrice?.amount || ''}\n      currencyCode={displayPrice?.currencyCode || ''}\n      compareAtPriceAmount={displayCompareAtPrice?.amount}\n      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n      className={className}\n    />\n  )\n}\n\n// Special PriceOverlayBadge for price overlay variant\nfunction ProductCardPriceOverlayBadge() {\n  const {product, selectedProductVariant, variant} = useProductCardContext()\n  if (variant !== 'priceOverlay') return null\n  const displayPrice = selectedProductVariant?.price || product.price\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n\n  if (!currencyCode || !amount) return null\n  return (\n    <ProductCardBadge position=\"top-left\">\n      {formatMoney(amount, currencyCode)}\n    </ProductCardBadge>\n  )\n}\n\nexport interface ProductCardProps {\n  /** The product to display in the card */\n  product: Product\n  /** Optional selected variant of the product to show specific variant data */\n  selectedProductVariant?: ProductVariant\n  /** Visual style variant of the card */\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  /** Whether the card can be clicked/tapped to navigate to product details */\n  touchable?: boolean\n  /** Optional text to display in a badge on the card */\n  badgeText?: string\n  /** Visual style variant for the badge */\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  /** Callback fired when the product is clicked */\n  onProductClick?: () => void\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Custom layout via children */\n  children?: React.ReactNode\n  /** Whether the favorite button is disabled */\n  favoriteButtonDisabled?: boolean\n  /** Whether review stars are disabled */\n  reviewsDisabled?: boolean\n}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\n  favoriteButtonDisabled = false,\n  reviewsDisabled = false,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n\n    onProductClick?.()\n\n    navigateToProduct({\n      productId: product.id,\n    })\n  }, [navigateToProduct, product.id, touchable, onProductClick])\n\n  const handleFavoriteClick = useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n    onFavoriteToggled?.(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    product.id,\n    product.shop.id,\n    product.defaultVariantId,\n    selectedProductVariant?.id,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  const contextValue = useMemo<ProductCardContextValue>(\n    () => ({\n      // Core data\n      product,\n      selectedProductVariant,\n\n      // UI configuration\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n\n      // State\n      isFavorited: isFavoritedLocal,\n      // Actions\n      onClick: handleClick,\n      onFavoriteToggle: handleFavoriteClick,\n    }),\n    [\n      product,\n      selectedProductVariant,\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      isFavoritedLocal,\n      handleClick,\n      handleFavoriteClick,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n    ]\n  )\n\n  return (\n    <ProductCardContext.Provider value={contextValue}>\n      {children ?? (\n        <ProductCardContainer>\n          <ProductCardImageContainer>\n            <ProductCardImage />\n            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}\n            <ProductCardBadge />\n            <ProductCardFavoriteButton />\n          </ProductCardImageContainer>\n          {variant === 'default' && (\n            <ProductCardInfo>\n              <ProductCardTitle />\n              <ProductCardReviewStars />\n              <ProductCardPrice />\n            </ProductCardInfo>\n          )}\n        </ProductCardContainer>\n      )}\n    </ProductCardContext.Provider>\n  )\n}\n\nexport {\n  ProductCard,\n  ProductCardContainer,\n  ProductCardImageContainer,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardFavoriteButton,\n  ProductCardInfo,\n  ProductCardTitle,\n  ProductCardReviewStars,\n  ProductCardPrice,\n}\n"],"names":["ProductCardContext","React","useProductCardContext","context","useContext","ProductCardContainer","className","props","touchable","onClick","content","jsx","cn","Touchable","ProductCardImageContainer","variant","ProductCardImage","product","selectedProductVariant","displayImage","src","alt","thumbhash","renderImageElement","useCallback","Image","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","favoriteButtonDisabled","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCardReviewStars","reviewsDisabled","reviewAnalytics","ProductReviewStars","ProductCardPrice","displayPrice","displayCompareAtPrice","ProductVariantPrice","ProductCardPriceOverlayBadge","currencyCode","amount","formatMoney","ProductCard","onProductClick","onFavoriteToggled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","isFavoritedLocal","setIsFavoritedLocal","useState","handleClick","handleFavoriteClick","previousState","contextValue","useMemo","jsxs"],"mappings":";;;;;;;;;;;;;AAuCA,MAAMA,IAAqBC,EAAM,cAE/B,MAAS;AAEX,SAASC,IAAwB;AACzB,QAAAC,IAAUC,EAAWJ,CAAkB;AAC7C,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAEK,SAAAA;AACT;AAGA,SAASE,EAAqB;AAAA,EAC5B,WAAAC;AAAA,EACA,GAAGC;AACL,GAAgC;AAC9B,QAAM,EAAC,WAAAC,GAAW,SAAAC,EAAO,IAAIP,EAAsB,GAE7CQ,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAGF,SAAIC,KAAaC,IAEb,gBAAAE;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAAAJ;AAAA,MACA,UAAU,EAAC,SAAS,IAAG;AAAA,MACvB,YAAY;AAAA,QACV,SAAS,EAAC,MAAM,SAAS,UAAU,MAAM,MAAM,YAAW;AAAA,MAC5D;AAAA,MAEC,UAAAC;AAAA,IAAA;AAAA,EACH,IAIGA;AACT;AAEA,SAASI,EAA0B;AAAA,EACjC,WAAAR;AAAA,EACA,GAAGC;AACL,GAAgC;AACxB,QAAA,EAAC,SAAAQ,EAAO,IAAIb,EAAsB;AAGtC,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAG,MAAY,YAAY,kBAAkB;AAAA,QAC1CT;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASS,EAAiB,EAAC,WAAAV,GAAW,GAAGC,KAAqC;AAC5E,QAAM,EAAC,SAAAU,GAAS,wBAAAC,EAAsB,IAAIhB,EAAsB,GAG1DiB,IAAeD,GAAwB,SAASD,EAAQ,eACxDG,IAAMD,GAAc,KACpBE,IAAMF,GAAc,WAAWF,EAAQ,OACvCK,IAAYL,EAAQ,eAAe,WAEnCM,IAAqBC;AAAA,IACzB,CAACJ,MACsBE,IACnB,gBAAAX;AAAA,MAACc;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,KAAKL;AAAAA,QACL,KAAAC;AAAA,QACA,aAAa;AAAA,QACb,WAAAC;AAAA,QACA,WAAU;AAAA,QACV,WAAWV,EAAG,aAAaN,CAAS;AAAA,QACnC,GAAGC;AAAA,MAAA;AAAA,IAAA,IAGN,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,KAAKS;AAAAA,QACL,KAAAC;AAAA,QACA,WAAWT,EAAG,0BAA0BN,CAAS;AAAA,QAChD,GAAGC;AAAA,MAAA;AAAA,IACN;AAAA,IAKJ,CAACc,GAAKf,GAAWC,GAAOe,CAAS;AAAA,EACnC;AAEA,SACG,gBAAAX,EAAA,OAAA,EAAI,WAAU,0DACZ,UACCS,IAAAG,EAAmBH,CAAG,IAErB,gBAAAT,EAAA,OAAA,EAAI,WAAU,4CAA2C,qBAAQ,CAAA,GAEtE;AAEJ;AAEA,SAASe,EAAiB;AAAA,EACxB,WAAApB;AAAA,EACA,UAAAqB,IAAW;AAAA,EACX,SAAAZ;AAAA,EACA,UAAAa;AAAA,EACA,GAAGrB;AACL,GAEG;AACD,QAAM,EAAC,WAAAsB,GAAW,cAAAC,EAAY,IAAI5B,EAAsB,GAElDQ,IAAUkB,KAAYC;AAExB,SAACnB,IAGH,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAe,MAAa,aAAa,iBAAiB;AAAA,MAC7C;AAAA,MAEA,UAAA,gBAAAhB;AAAA,QAACoB;AAAA,QAAA;AAAA,UACC,SAAShB,KAAWe,KAAgB;AAAA,UACpC,WAAWlB;AAAA,YACT,CAACkB,KACC,CAACf,KACD;AAAA,YACF;AAAA,YACAT;AAAA,UACF;AAAA,UACC,GAAGC;AAAA,UAEH,UAAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF,IAtBmB;AAwBvB;AAEA,SAASsB,EAA0B;AAAA,EACjC,WAAA1B;AAAA,EACA,GAAGC;AACL,GAAgC;AAC9B,QAAM,EAAC,aAAA0B,GAAa,wBAAAC,GAAwB,kBAAAC,EAAA,IAC1CjC,EAAsB;AACxB,SAAIgC,IAA+B,OAGhC,gBAAAvB,EAAA,OAAA,EAAI,WAAWC,EAAG,kCAAkCN,CAAS,GAAI,GAAGC,GACnE,4BAAC6B,GAAe,EAAA,SAASD,GAAkB,QAAQF,EAAa,CAAA,GAClE;AAEJ;AAEA,SAASI,EAAgB,EAAC,WAAA/B,GAAW,GAAGC,KAAqC;AACrE,QAAA,EAAC,SAAAQ,EAAO,IAAIb,EAAsB;AACxC,SAAIa,MAAY,YACP,OAIP,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAG,4BAA4BN,CAAS;AAAA,MAClD,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAAS+B,EAAiB;AAAA,EACxB,WAAAhC;AAAA,EACA,UAAAsB;AAAA,EACA,GAAGrB;AACL,GAA+B;AACvB,QAAA,EAAC,SAAAU,EAAO,IAAIf,EAAsB;AAEtC,SAAA,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAN;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MAEH,eAAYU,EAAQ;AAAA,IAAA;AAAA,EACvB;AAEJ;AAEA,SAASsB,EAAuB;AAAA,EAC9B,WAAAjC;AAAA,EACA,GAAGC;AACL,GAAgC;AAC9B,QAAM,EAAC,SAAAU,GAAS,iBAAAuB,EAAe,IAAItC,EAAsB,GACnDuC,IAAkBxB,EAAQ;AAE5B,SAAAuB,KAAmB,CAACC,GAAiB,gBAChC,OAIP,gBAAA9B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,IAAIN,CAAS;AAAA,MAC1B,GAAGC;AAAA,MAEJ,UAAA,gBAAAI;AAAA,QAAC+B;AAAA,QAAA;AAAA,UACC,eAAeD,EAAgB;AAAA,UAC/B,aAAaA,EAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAEJ;AAEA,SAASE,EAAiB,EAAC,WAAArC,KAAkC;AAC3D,QAAM,EAAC,SAAAW,GAAS,wBAAAC,EAAsB,IAAIhB,EAAsB,GAG1D0C,IAAe1B,GAAwB,SAASD,GAAS,OACzD4B,IACJ3B,GAAwB,kBAAkBD,GAAS;AAGnD,SAAA,gBAAAN;AAAA,IAACmC;AAAA,IAAA;AAAA,MACC,QAAQF,GAAc,UAAU;AAAA,MAChC,cAAcA,GAAc,gBAAgB;AAAA,MAC5C,sBAAsBC,GAAuB;AAAA,MAC7C,4BAA4BA,GAAuB;AAAA,MACnD,WAAAvC;AAAA,IAAA;AAAA,EACF;AAEJ;AAGA,SAASyC,IAA+B;AACtC,QAAM,EAAC,SAAA9B,GAAS,wBAAAC,GAAwB,SAAAH,EAAA,IAAWb,EAAsB;AACrE,MAAAa,MAAY,eAAuB,QAAA;AACjC,QAAA6B,IAAe1B,GAAwB,SAASD,EAAQ,OACxD+B,IAAeJ,GAAc,cAC7BK,IAASL,GAAc;AAE7B,SAAI,CAACI,KAAgB,CAACC,IAAe,yBAElCvB,GAAiB,EAAA,UAAS,YACxB,UAAYwB,EAAAD,GAAQD,CAAY,GACnC;AAEJ;AA2BA,SAASG,GAAY;AAAA,EACnB,SAAAlC;AAAA,EACA,wBAAAC;AAAA,EACA,SAAAH,IAAU;AAAA,EACV,WAAAP,IAAY;AAAA,EACZ,WAAAqB;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAsB;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAzB;AAAA,EACA,wBAAAM,IAAyB;AAAA,EACzB,iBAAAM,IAAkB;AACpB,GAAqB;AACb,QAAA,EAAC,mBAAAc,EAAiB,IAAIC,EAAkB,GACxC,EAAC,aAAAC,GAAa,eAAAC,EAAa,IAAIC,EAAwB,GAGvD,CAACC,GAAkBC,CAAmB,IAAIC,EAAS5C,EAAQ,WAAW,GAEtE6C,IAActC,EAAY,MAAM;AACpC,IAAKhB,MAEY4C,IAAA,GAECE,EAAA;AAAA,MAChB,WAAWrC,EAAQ;AAAA,IAAA,CACpB;AAAA,EAAA,GACA,CAACqC,GAAmBrC,EAAQ,IAAIT,GAAW4C,CAAc,CAAC,GAEvDW,IAAsBvC,EAAY,YAAY;AAClD,UAAMwC,IAAgBL;AAGtB,IAAAC,EAAoB,CAACI,CAAa,GAClCX,IAAoB,CAACW,CAAa;AAE9B,QAAA;AACF,MAAIA,IACF,MAAMP,EAAc;AAAA,QAClB,WAAWxC,EAAQ;AAAA,QACnB,QAAQA,EAAQ,KAAK;AAAA,QACrB,kBACEC,GAAwB,MAAMD,EAAQ;AAAA,MAAA,CACzC,IAED,MAAMuC,EAAY;AAAA,QAChB,WAAWvC,EAAQ;AAAA,QACnB,QAAQA,EAAQ,KAAK;AAAA,QACrB,kBACEC,GAAwB,MAAMD,EAAQ;AAAA,MAAA,CACzC;AAAA,YAEW;AAEd,MAAA2C,EAAoBI,CAAa,GACjCX,IAAoBW,CAAa;AAAA,IAAA;AAAA,EACnC,GACC;AAAA,IACDL;AAAA,IACA1C,EAAQ;AAAA,IACRA,EAAQ,KAAK;AAAA,IACbA,EAAQ;AAAA,IACRC,GAAwB;AAAA,IACxBsC;AAAA,IACAC;AAAA,IACAJ;AAAA,EAAA,CACD,GAEKY,IAAeC;AAAA,IACnB,OAAO;AAAA;AAAA,MAEL,SAAAjD;AAAA,MACA,wBAAAC;AAAA;AAAA,MAGA,SAAAH;AAAA,MACA,WAAAP;AAAA,MACA,WAAAqB;AAAA,MACA,cAAAC;AAAA,MACA,wBAAAI;AAAA,MACA,iBAAAM;AAAA;AAAA,MAGA,aAAamB;AAAA;AAAA,MAEb,SAASG;AAAA,MACT,kBAAkBC;AAAA,IAAA;AAAA,IAEpB;AAAA,MACE9C;AAAA,MACAC;AAAA,MACAH;AAAA,MACAP;AAAA,MACAqB;AAAA,MACAC;AAAA,MACA6B;AAAA,MACAG;AAAA,MACAC;AAAA,MACA7B;AAAA,MACAM;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAA,gBAAA7B,EAACX,EAAmB,UAAnB,EAA4B,OAAOiE,GACjC,UAAArC,uBACEvB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAA8D,EAACrD,GACC,EAAA,UAAA;AAAA,MAAA,gBAAAH,EAACK,GAAiB,EAAA;AAAA,MACjBD,MAAY,kBAAkB,gBAAAJ,EAACoC,GAA6B,CAAA,CAAA;AAAA,wBAC5DrB,GAAiB,EAAA;AAAA,wBACjBM,GAA0B,CAAA,CAAA;AAAA,IAAA,GAC7B;AAAA,IACCjB,MAAY,aACX,gBAAAoD,EAAC9B,GACC,EAAA,UAAA;AAAA,MAAA,gBAAA1B,EAAC2B,GAAiB,EAAA;AAAA,wBACjBC,GAAuB,EAAA;AAAA,wBACvBI,GAAiB,CAAA,CAAA;AAAA,IAAA,EACpB,CAAA;AAAA,EAAA,EAAA,CAEJ,EAEJ,CAAA;AAEJ;"}
+{"version":3,"file":"product-card.js","sources":["../../../src/components/commerce/product-card.tsx"],"sourcesContent":["import * as React from 'react'\nimport {useCallback, useContext, useMemo, useState} from 'react'\n\nimport {type Product, type ProductVariant} from '@shopify/shop-minis-platform'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {ProductReviewStars} from '../../internal/components/product-review-stars'\nimport {cn} from '../../lib/utils'\nimport {formatMoney} from '../../utils/formatMoney'\nimport {Image} from '../atoms/image'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nimport {FavoriteButton} from './favorite-button'\n\n// Context definition\ninterface ProductCardContextValue {\n  // Core data\n  product: Product\n  selectedProductVariant?: ProductVariant\n\n  // UI configuration\n  variant: 'default' | 'priceOverlay' | 'compact'\n  touchable: boolean\n  badgeText?: string\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  favoriteButtonDisabled: boolean\n  reviewsDisabled: boolean\n\n  // State\n  isFavorited: boolean\n\n  // Actions\n  onClick: () => void\n  onFavoriteToggle: () => void\n}\n\nconst ProductCardContext = React.createContext<\n  ProductCardContextValue | undefined\n>(undefined)\n\nfunction useProductCardContext() {\n  const context = useContext(ProductCardContext)\n  if (!context) {\n    throw new Error(\n      'ProductCard components must be used within a ProductCard provider'\n    )\n  }\n  return context\n}\n\n// Primitive components (building blocks)\nfunction ProductCardContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {touchable, onClick} = useProductCardContext()\n\n  const content = (\n    <div\n      className={cn(\n        'relative size-full overflow-hidden rounded-xl border-0 isolate',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onClick) {\n    return (\n      <Touchable\n        onClick={onClick}\n        whileTap={{opacity: 0.7}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction ProductCardImageContainer({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive display image locally\n  const displayImage = selectedProductVariant?.image || product.featuredImage\n  const src = displayImage?.url\n  const alt = displayImage?.altText || product.title\n  const thumbhash = product.featuredImage?.thumbhash\n\n  const renderImageElement = useCallback(\n    (src: string) => {\n      const imageElement = thumbhash ? (\n        <Image\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          objectFit=\"cover\"\n          className={cn('size-full', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('size-full object-cover', className)}\n          {...props}\n        />\n      )\n\n      return imageElement\n    },\n    [alt, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center size-full\">\n      {src ? (\n        renderImageElement(src)\n      ) : (\n        <div className=\"text-gray-400 text-sm w-full text-center\">No Image</div>\n      )}\n    </div>\n  )\n}\n\nfunction ProductCardBadge({\n  className,\n  position = 'bottom-left',\n  variant,\n  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\n}) {\n  const {badgeText, badgeVariant} = useProductCardContext()\n  // If no children provided, use badgeText from context\n  const content = children || badgeText\n\n  if (!content) return null\n\n  return (\n    <div\n      className={cn(\n        'absolute z-10',\n        position === 'top-left' ? 'top-3 left-3' : 'bottom-2 left-2'\n      )}\n    >\n      <Badge\n        variant={variant ?? badgeVariant ?? 'none'}\n        className={cn(\n          !badgeVariant &&\n            !variant &&\n            'bg-black/50 text-white border-transparent',\n          'rounded',\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {isFavorited, favoriteButtonDisabled, onFavoriteToggle} =\n    useProductCardContext()\n  if (favoriteButtonDisabled) return null\n\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {\n  const {variant} = useProductCardContext()\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-testid=\"product-card-info\"\n      className={cn('px-1 pt-2 pb-0 space-y-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  const {product} = useProductCardContext()\n  return (\n    <h3\n      data-slot=\"product-card-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900',\n        'truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children || product.title}\n    </h3>\n  )\n}\n\nfunction ProductCardReviewStars({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  const {product, reviewsDisabled} = useProductCardContext()\n  const reviewAnalytics = product.reviewAnalytics\n\n  if (reviewsDisabled || !reviewAnalytics?.averageRating) {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"product-card-review-stars\"\n      className={cn('', className)}\n      {...props}\n    >\n      <ProductReviewStars\n        averageRating={reviewAnalytics.averageRating}\n        reviewCount={reviewAnalytics.reviewCount}\n      />\n    </div>\n  )\n}\n\nfunction ProductCardPrice({className}: {className?: string}) {\n  const {product, selectedProductVariant} = useProductCardContext()\n\n  // Derive price data locally\n  const displayPrice = selectedProductVariant?.price || product?.price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || product?.compareAtPrice\n\n  return (\n    <ProductVariantPrice\n      amount={displayPrice?.amount || ''}\n      currencyCode={displayPrice?.currencyCode || ''}\n      compareAtPriceAmount={displayCompareAtPrice?.amount}\n      compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n      className={className}\n    />\n  )\n}\n\n// Special PriceOverlayBadge for price overlay variant\nfunction ProductCardPriceOverlayBadge() {\n  const {product, selectedProductVariant, variant} = useProductCardContext()\n  if (variant !== 'priceOverlay') return null\n  const displayPrice = selectedProductVariant?.price || product.price\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n\n  if (!currencyCode || !amount) return null\n  return (\n    <ProductCardBadge position=\"top-left\">\n      {formatMoney(amount, currencyCode)}\n    </ProductCardBadge>\n  )\n}\n\nexport interface ProductCardProps {\n  /** The product to display in the card */\n  product: Product\n  /** Optional selected variant of the product to show specific variant data */\n  selectedProductVariant?: ProductVariant\n  /** Visual style variant of the card */\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  /** Whether the card can be clicked/tapped to navigate to product details */\n  touchable?: boolean\n  /** Optional text to display in a badge on the card */\n  badgeText?: string\n  /** Visual style variant for the badge */\n  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'\n  /** Callback fired when the product is clicked */\n  onProductClick?: () => void\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Custom layout via children */\n  children?: React.ReactNode\n  /** Whether the favorite button is disabled */\n  favoriteButtonDisabled?: boolean\n  /** Whether review stars are disabled */\n  reviewsDisabled?: boolean\n}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\n  favoriteButtonDisabled = false,\n  reviewsDisabled = false,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = useState(product.isFavorited)\n\n  const handleClick = useCallback(() => {\n    if (!touchable) return\n\n    onProductClick?.()\n\n    navigateToProduct({\n      productId: product.id,\n    })\n  }, [navigateToProduct, product.id, touchable, onProductClick])\n\n  const handleFavoriteClick = useCallback(async () => {\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n    onFavoriteToggled?.(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: product.id,\n          shopId: product.shop.id,\n          productVariantId:\n            selectedProductVariant?.id || product.defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    product.id,\n    product.shop.id,\n    product.defaultVariantId,\n    selectedProductVariant?.id,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  const contextValue = useMemo<ProductCardContextValue>(\n    () => ({\n      // Core data\n      product,\n      selectedProductVariant,\n\n      // UI configuration\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n\n      // State\n      isFavorited: isFavoritedLocal,\n      // Actions\n      onClick: handleClick,\n      onFavoriteToggle: handleFavoriteClick,\n    }),\n    [\n      product,\n      selectedProductVariant,\n      variant,\n      touchable,\n      badgeText,\n      badgeVariant,\n      isFavoritedLocal,\n      handleClick,\n      handleFavoriteClick,\n      favoriteButtonDisabled,\n      reviewsDisabled,\n    ]\n  )\n\n  return (\n    <ProductCardContext.Provider value={contextValue}>\n      {children ?? (\n        <ProductCardContainer>\n          <ProductCardImageContainer>\n            <ProductCardImage />\n            {variant === 'priceOverlay' && <ProductCardPriceOverlayBadge />}\n            <ProductCardBadge />\n            <ProductCardFavoriteButton />\n          </ProductCardImageContainer>\n          {variant === 'default' && (\n            <ProductCardInfo>\n              <ProductCardTitle />\n              <ProductCardReviewStars />\n              <ProductCardPrice />\n            </ProductCardInfo>\n          )}\n        </ProductCardContainer>\n      )}\n    </ProductCardContext.Provider>\n  )\n}\n\nexport {\n  ProductCard,\n  ProductCardContainer,\n  ProductCardImageContainer,\n  ProductCardImage,\n  ProductCardBadge,\n  ProductCardFavoriteButton,\n  ProductCardInfo,\n  ProductCardTitle,\n  ProductCardReviewStars,\n  ProductCardPrice,\n}\n"],"names":["ProductCardContext","React","useProductCardContext","context","useContext","ProductCardContainer","className","props","touchable","onClick","content","jsx","cn","Touchable","ProductCardImageContainer","variant","ProductCardImage","product","selectedProductVariant","displayImage","src","alt","thumbhash","renderImageElement","useCallback","Image","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","favoriteButtonDisabled","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCardReviewStars","reviewsDisabled","reviewAnalytics","ProductReviewStars","ProductCardPrice","displayPrice","displayCompareAtPrice","ProductVariantPrice","ProductCardPriceOverlayBadge","currencyCode","amount","formatMoney","ProductCard","onProductClick","onFavoriteToggled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","isFavoritedLocal","setIsFavoritedLocal","useState","handleClick","handleFavoriteClick","previousState","contextValue","useMemo","jsxs"],"mappings":"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"}

package/dist/components/commerce/product-link.js

@@ -4,8 +4,8 @@ import { cva as q } from "../../shop-minis-react/node_modules/.pnpm/class-varian
 import { useShopNavigation as B } from "../../hooks/navigation/useShopNavigation.js";
 import { useSavedProductsActions as M } from "../../hooks/user/useSavedProductsActions.js";
 import { ProductReviewStars as U } from "../../internal/components/product-review-stars.js";
-import { formatMoney as T } from "../../lib/formatMoney.js";
 import { cn as n } from "../../lib/utils.js";
+import { formatMoney as T } from "../../utils/formatMoney.js";
 import { Touchable as V } from "../atoms/touchable.js";
 import { Card as E, CardContent as G, CardAction as H } from "../ui/card.js";
 import { FavoriteButton as J } from "./favorite-button.js";

package/dist/components/commerce/product-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-link.js","sources":["../../../src/components/commerce/product-link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Product} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {ProductReviewStars} from '../../internal/components/product-review-stars'\nimport {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {Touchable} from '../atoms/touchable'\nimport {Card, CardContent, CardAction} from '../ui/card'\n\nimport {FavoriteButton} from './favorite-button'\n\nconst productLinkVariants = cva('', {\n  variants: {\n    layout: {\n      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',\n      vertical: 'flex-col',\n    },\n    discount: {\n      none: '',\n      small: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    discount: 'none',\n  },\n})\n\n// Primitive components (building blocks)\nexport interface ProductLinkRootProps\n  extends React.ComponentProps<typeof Card>,\n    VariantProps<typeof productLinkVariants> {\n  layout?: 'horizontal' | 'vertical'\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductLinkRoot({\n  className,\n  layout,\n  discount,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductLinkRootProps) {\n  const Comp = asChild ? SlotPrimitive.Root : Card\n\n  return (\n    <Touchable\n      onClick={onPress}\n      whileTap={{opacity: 0.7}}\n      transition={{\n        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n      }}\n    >\n      <Comp\n        className={cn(\n          productLinkVariants({layout, discount}),\n          'border-0 bg-white rounded-xl shadow-lg shadow-black/10',\n          className\n        )}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nfunction ProductLinkImage({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> & {layout?: 'horizontal' | 'vertical'}) {\n  return (\n    <div\n      data-slot=\"product-link-image\"\n      className={cn(\n        'overflow-hidden rounded-md bg-muted',\n        layout === 'horizontal'\n          ? 'h-16 w-16 flex-shrink-0'\n          : 'aspect-square w-full',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkInfo({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<typeof CardContent> & {\n  layout?: 'horizontal' | 'vertical'\n}) {\n  return (\n    <CardContent\n      className={cn(\n        layout === 'horizontal'\n          ? 'flex-1 min-w-0 space-y-1 px-0 py-0'\n          : 'space-y-2',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"product-link-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction ProductLinkPrice({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-price\"\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkCurrentPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-current-price\"\n      className={cn('text-sm font-semibold text-gray-900', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkOriginalPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-original-price\"\n      className={cn('text-sm text-gray-500 line-through', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkDiscountPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-discount-price\"\n      className={cn('text-sm font-semibold text-red-600', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-rating\"\n      className={cn('', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkActions({\n  className,\n  hideFavoriteAction = false,\n  onPress,\n  filled = false,\n  customAction,\n  ...props\n}: React.ComponentProps<typeof CardAction> & {\n  hideFavoriteAction?: boolean\n  onPress?: () => void\n  filled?: boolean\n  customAction?: React.ReactNode\n}) {\n  const favoriteAction = hideFavoriteAction ? null : (\n    <FavoriteButton filled={filled} onClick={onPress} />\n  )\n\n  return (\n    <CardAction\n      className={cn('flex-shrink-0 self-center px-0 py-0', className)}\n      {...props}\n    >\n      <Touchable\n        stopPropagation\n        onClick={onPress}\n        whileTap={{opacity: 0.7, scale: 0.95}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n          scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {customAction ? <>{customAction}</> : favoriteAction}\n      </Touchable>\n    </CardAction>\n  )\n}\n\nexport type ProductLinkProps = {\n  product: Product\n  hideFavoriteAction?: boolean\n  onClick?: (product: Product) => void\n  reviewsDisabled?: boolean\n} & (\n  | {\n      customAction?: never\n      onCustomActionClick?: never\n    }\n  | {\n      customAction: React.ReactNode\n      onCustomActionClick: () => void\n    }\n)\n\n// Composed ProductLink component\nfunction ProductLink({\n  product,\n  hideFavoriteAction = false,\n  onClick,\n  customAction,\n  onCustomActionClick,\n  reviewsDisabled = false,\n}: ProductLinkProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    reviewAnalytics,\n    price,\n    compareAtPrice,\n    isFavorited,\n    selectedVariant,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const averageRating = reviewAnalytics?.averageRating\n  const reviewCount = reviewAnalytics?.reviewCount\n  const amount = price?.amount\n    ? formatMoney(price?.amount, price?.currencyCode)\n    : undefined\n  const imageUrl = featuredImage?.url\n  const imageAltText = featuredImage?.altText || title\n  const compareAtPriceAmount = compareAtPrice?.amount\n    ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)\n    : undefined\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const handlePress = React.useCallback(() => {\n    navigateToProduct({\n      productId: id,\n    })\n    onClick?.(product)\n  }, [navigateToProduct, id, onClick, product])\n\n  const handleActionPress = React.useCallback(async () => {\n    if (customAction || onCustomActionClick) {\n      onCustomActionClick?.()\n      return\n    }\n\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n    }\n  }, [\n    customAction,\n    onCustomActionClick,\n    isFavoritedLocal,\n    unsaveProduct,\n    id,\n    shop.id,\n    selectedVariant?.id,\n    defaultVariantId,\n    saveProduct,\n  ])\n\n  return (\n    <ProductLinkRoot\n      layout=\"horizontal\"\n      discount={hasDiscount ? 'small' : 'none'}\n      onPress={handlePress}\n    >\n      <ProductLinkImage layout=\"horizontal\">\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt={imageAltText}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs\">\n            No Image\n          </div>\n        )}\n      </ProductLinkImage>\n\n      <ProductLinkInfo layout=\"horizontal\">\n        <ProductLinkTitle>{title}</ProductLinkTitle>\n\n        {averageRating && !reviewsDisabled ? (\n          <ProductLinkRating>\n            <ProductReviewStars\n              averageRating={averageRating}\n              reviewCount={reviewCount}\n            />\n          </ProductLinkRating>\n        ) : null}\n\n        <ProductLinkPrice>\n          {hasDiscount ? (\n            <>\n              <ProductLinkDiscountPrice>{amount}</ProductLinkDiscountPrice>\n              <ProductLinkOriginalPrice>\n                {compareAtPriceAmount}\n              </ProductLinkOriginalPrice>\n            </>\n          ) : (\n            <ProductLinkCurrentPrice>{amount}</ProductLinkCurrentPrice>\n          )}\n        </ProductLinkPrice>\n      </ProductLinkInfo>\n\n      <ProductLinkActions\n        filled={isFavoritedLocal}\n        onPress={handleActionPress}\n        customAction={customAction}\n        hideFavoriteAction={hideFavoriteAction}\n      />\n    </ProductLinkRoot>\n  )\n}\n\nexport {ProductLink}\n"],"names":["productLinkVariants","cva","ProductLinkRoot","className","layout","discount","asChild","onPress","props","jsx","Touchable","SlotPrimitive.Root","Card","cn","ProductLinkImage","ProductLinkInfo","CardContent","ProductLinkTitle","children","ProductLinkPrice","ProductLinkCurrentPrice","ProductLinkOriginalPrice","ProductLinkDiscountPrice","ProductLinkRating","ProductLinkActions","hideFavoriteAction","filled","customAction","favoriteAction","FavoriteButton","CardAction","Fragment","ProductLink","product","onClick","onCustomActionClick","reviewsDisabled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","reviewAnalytics","price","compareAtPrice","isFavorited","selectedVariant","defaultVariantId","shop","isFavoritedLocal","setIsFavoritedLocal","React","averageRating","reviewCount","amount","formatMoney","imageUrl","imageAltText","compareAtPriceAmount","hasDiscount","handlePress","handleActionPress","previousState","jsxs","ProductReviewStars"],"mappings":"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"}
+{"version":3,"file":"product-link.js","sources":["../../../src/components/commerce/product-link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {type Product} from '@shopify/shop-minis-platform'\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {useShopNavigation} from '../../hooks/navigation/useShopNavigation'\nimport {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'\nimport {ProductReviewStars} from '../../internal/components/product-review-stars'\nimport {cn} from '../../lib/utils'\nimport {formatMoney} from '../../utils/formatMoney'\nimport {Touchable} from '../atoms/touchable'\nimport {Card, CardContent, CardAction} from '../ui/card'\n\nimport {FavoriteButton} from './favorite-button'\n\nconst productLinkVariants = cva('', {\n  variants: {\n    layout: {\n      horizontal: 'w-full !flex-row items-center gap-3 px-4 py-3',\n      vertical: 'flex-col',\n    },\n    discount: {\n      none: '',\n      small: '',\n      large: '',\n    },\n  },\n  defaultVariants: {\n    layout: 'horizontal',\n    discount: 'none',\n  },\n})\n\n// Primitive components (building blocks)\nexport interface ProductLinkRootProps\n  extends React.ComponentProps<typeof Card>,\n    VariantProps<typeof productLinkVariants> {\n  layout?: 'horizontal' | 'vertical'\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductLinkRoot({\n  className,\n  layout,\n  discount,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductLinkRootProps) {\n  const Comp = asChild ? SlotPrimitive.Root : Card\n\n  return (\n    <Touchable\n      onClick={onPress}\n      whileTap={{opacity: 0.7}}\n      transition={{\n        opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n      }}\n    >\n      <Comp\n        className={cn(\n          productLinkVariants({layout, discount}),\n          'border-0 bg-white rounded-xl shadow-lg shadow-black/10',\n          className\n        )}\n        {...props}\n      />\n    </Touchable>\n  )\n}\n\nfunction ProductLinkImage({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<'div'> & {layout?: 'horizontal' | 'vertical'}) {\n  return (\n    <div\n      data-slot=\"product-link-image\"\n      className={cn(\n        'overflow-hidden rounded-md bg-muted',\n        layout === 'horizontal'\n          ? 'h-16 w-16 flex-shrink-0'\n          : 'aspect-square w-full',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkInfo({\n  className,\n  layout = 'horizontal',\n  ...props\n}: React.ComponentProps<typeof CardContent> & {\n  layout?: 'horizontal' | 'vertical'\n}) {\n  return (\n    <CardContent\n      className={cn(\n        layout === 'horizontal'\n          ? 'flex-1 min-w-0 space-y-1 px-0 py-0'\n          : 'space-y-2',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'h3'>) {\n  return (\n    <h3\n      data-slot=\"product-link-title\"\n      className={cn(\n        'text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\nfunction ProductLinkPrice({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-price\"\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkCurrentPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-current-price\"\n      className={cn('text-sm font-semibold text-gray-900', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkOriginalPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-original-price\"\n      className={cn('text-sm text-gray-500 line-through', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkDiscountPrice({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"product-link-discount-price\"\n      className={cn('text-sm font-semibold text-red-600', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"product-link-rating\"\n      className={cn('', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProductLinkActions({\n  className,\n  hideFavoriteAction = false,\n  onPress,\n  filled = false,\n  customAction,\n  ...props\n}: React.ComponentProps<typeof CardAction> & {\n  hideFavoriteAction?: boolean\n  onPress?: () => void\n  filled?: boolean\n  customAction?: React.ReactNode\n}) {\n  const favoriteAction = hideFavoriteAction ? null : (\n    <FavoriteButton filled={filled} onClick={onPress} />\n  )\n\n  return (\n    <CardAction\n      className={cn('flex-shrink-0 self-center px-0 py-0', className)}\n      {...props}\n    >\n      <Touchable\n        stopPropagation\n        onClick={onPress}\n        whileTap={{opacity: 0.7, scale: 0.95}}\n        transition={{\n          opacity: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n          scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},\n        }}\n      >\n        {customAction ? <>{customAction}</> : favoriteAction}\n      </Touchable>\n    </CardAction>\n  )\n}\n\nexport type ProductLinkProps = {\n  product: Product\n  hideFavoriteAction?: boolean\n  onClick?: (product: Product) => void\n  reviewsDisabled?: boolean\n} & (\n  | {\n      customAction?: never\n      onCustomActionClick?: never\n    }\n  | {\n      customAction: React.ReactNode\n      onCustomActionClick: () => void\n    }\n)\n\n// Composed ProductLink component\nfunction ProductLink({\n  product,\n  hideFavoriteAction = false,\n  onClick,\n  customAction,\n  onCustomActionClick,\n  reviewsDisabled = false,\n}: ProductLinkProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    reviewAnalytics,\n    price,\n    compareAtPrice,\n    isFavorited,\n    selectedVariant,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const averageRating = reviewAnalytics?.averageRating\n  const reviewCount = reviewAnalytics?.reviewCount\n  const amount = price?.amount\n    ? formatMoney(price?.amount, price?.currencyCode)\n    : undefined\n  const imageUrl = featuredImage?.url\n  const imageAltText = featuredImage?.altText || title\n  const compareAtPriceAmount = compareAtPrice?.amount\n    ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)\n    : undefined\n  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount\n\n  const handlePress = React.useCallback(() => {\n    navigateToProduct({\n      productId: id,\n    })\n    onClick?.(product)\n  }, [navigateToProduct, id, onClick, product])\n\n  const handleActionPress = React.useCallback(async () => {\n    if (customAction || onCustomActionClick) {\n      onCustomActionClick?.()\n      return\n    }\n\n    const previousState = isFavoritedLocal\n\n    // Optimistic update\n    setIsFavoritedLocal(!previousState)\n\n    try {\n      if (previousState) {\n        await unsaveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n    }\n  }, [\n    customAction,\n    onCustomActionClick,\n    isFavoritedLocal,\n    unsaveProduct,\n    id,\n    shop.id,\n    selectedVariant?.id,\n    defaultVariantId,\n    saveProduct,\n  ])\n\n  return (\n    <ProductLinkRoot\n      layout=\"horizontal\"\n      discount={hasDiscount ? 'small' : 'none'}\n      onPress={handlePress}\n    >\n      <ProductLinkImage layout=\"horizontal\">\n        {imageUrl ? (\n          <img\n            src={imageUrl}\n            alt={imageAltText}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs\">\n            No Image\n          </div>\n        )}\n      </ProductLinkImage>\n\n      <ProductLinkInfo layout=\"horizontal\">\n        <ProductLinkTitle>{title}</ProductLinkTitle>\n\n        {averageRating && !reviewsDisabled ? (\n          <ProductLinkRating>\n            <ProductReviewStars\n              averageRating={averageRating}\n              reviewCount={reviewCount}\n            />\n          </ProductLinkRating>\n        ) : null}\n\n        <ProductLinkPrice>\n          {hasDiscount ? (\n            <>\n              <ProductLinkDiscountPrice>{amount}</ProductLinkDiscountPrice>\n              <ProductLinkOriginalPrice>\n                {compareAtPriceAmount}\n              </ProductLinkOriginalPrice>\n            </>\n          ) : (\n            <ProductLinkCurrentPrice>{amount}</ProductLinkCurrentPrice>\n          )}\n        </ProductLinkPrice>\n      </ProductLinkInfo>\n\n      <ProductLinkActions\n        filled={isFavoritedLocal}\n        onPress={handleActionPress}\n        customAction={customAction}\n        hideFavoriteAction={hideFavoriteAction}\n      />\n    </ProductLinkRoot>\n  )\n}\n\nexport {ProductLink}\n"],"names":["productLinkVariants","cva","ProductLinkRoot","className","layout","discount","asChild","onPress","props","jsx","Touchable","SlotPrimitive.Root","Card","cn","ProductLinkImage","ProductLinkInfo","CardContent","ProductLinkTitle","children","ProductLinkPrice","ProductLinkCurrentPrice","ProductLinkOriginalPrice","ProductLinkDiscountPrice","ProductLinkRating","ProductLinkActions","hideFavoriteAction","filled","customAction","favoriteAction","FavoriteButton","CardAction","Fragment","ProductLink","product","onClick","onCustomActionClick","reviewsDisabled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","reviewAnalytics","price","compareAtPrice","isFavorited","selectedVariant","defaultVariantId","shop","isFavoritedLocal","setIsFavoritedLocal","React","averageRating","reviewCount","amount","formatMoney","imageUrl","imageAltText","compareAtPriceAmount","hasDiscount","handlePress","handleActionPress","previousState","jsxs","ProductReviewStars"],"mappings":"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"}

package/dist/hooks/storage/useImageUpload.js

@@ -1,31 +1,31 @@
-import { useCallback as m } from "react";
-import { useShopActions as c } from "../../internal/useShopActions.js";
-import { fileToDataUri as u } from "../../utils/image.js";
-const d = async (e) => {
-  const r = await u(e), o = await (await fetch(r)).blob();
+import { useCallback as c } from "react";
+import { useShopActions as m } from "../../internal/useShopActions.js";
+import { fileToDataUri as d } from "../../utils/image.js";
+const u = async (e) => {
+  const o = await d(e), a = await (await fetch(o)).blob();
   return {
     mimeType: e.type,
-    fileSize: e.size ?? o.size,
-    fileBlob: o
+    fileSize: e.size ?? a.size,
+    fileBlob: a
   };
-}, f = async (e, r) => {
+}, f = async (e, o) => {
   const t = new FormData();
-  r.parameters.forEach(({ name: s, value: a }) => {
-    t.append(s, a);
+  o.parameters.forEach(({ name: s, value: r }) => {
+    t.append(s, r);
   }), t.append("file", e.fileBlob);
-  const o = await fetch(r.url, {
+  const a = await fetch(o.url, {
     method: "POST",
     body: t
   });
-  return o.ok ? {} : (console.error("Failed to upload image", {
-    response: await o.text()
+  return a.ok ? {} : (console.error("Failed to upload image", {
+    response: await a.text()
   }), { error: "Failed to upload image" });
 }, U = () => {
-  const { createImageUploadLink: e, completeImageUpload: r } = c();
+  const { createImageUploadLink: e, completeImageUpload: o } = m();
   return {
-    uploadImage: m(
-      async (o) => {
-        const s = await d(o), a = await e({
+    uploadImage: c(
+      async (a) => {
+        const s = await u(a), r = await e({
           input: [
             {
               mimeType: s.mimeType,
@@ -33,18 +33,26 @@ const d = async (e) => {
             }
           ]
         });
-        if (!a.ok)
-          throw new Error(a.error.message);
+        if (!r.ok)
+          throw new Error(r.error.message);
+        if (r.mocked)
+          return [
+            {
+              id: "uploaded-image-id",
+              imageUrl: "https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175",
+              resourceUrl: "https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175"
+            }
+          ];
         const { error: n } = await f(
           s,
-          a?.data?.targets?.[0]
+          r?.data?.targets?.[0]
         );
         if (n)
           throw new Error(n);
         let p = 0;
         for (; p < 30; ) {
-          const i = await r({
-            resourceUrls: a?.data?.targets?.map((l) => l.resourceUrl) || []
+          const i = await o({
+            resourceUrls: r?.data?.targets?.map((l) => l.resourceUrl) || []
           });
           if (!i.ok)
             throw new Error(i.error.message);
@@ -53,14 +61,14 @@ const d = async (e) => {
               {
                 id: i.data.files[0].id,
                 imageUrl: i.data.files[0].image?.url,
-                resourceUrl: a?.data?.targets?.[0]?.resourceUrl
+                resourceUrl: r?.data?.targets?.[0]?.resourceUrl
               }
             ];
           await new Promise((l) => setTimeout(l, 1e3)), p++;
         }
         throw new Error("Image upload completion timed out");
       },
-      [e, r]
+      [e, o]
     )
   };
 };

package/dist/hooks/storage/useImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {fileToDataUri} from '../../utils'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The file to upload.\n   */\n  image: File\n}\n\ninterface ProcessedImage {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The file blob of the image.\n   */\n  fileBlob: Blob\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image which will be attached to the current user.\n   */\n  uploadImage: (image: File) => Promise<UploadedImage[]>\n}\n\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: File): Promise<ProcessedImage> => {\n  const uri = await fileToDataUri(image)\n\n  const response = await fetch(uri)\n  const blob = await response.blob()\n\n  return {\n    mimeType: image.type,\n    fileSize: image.size ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (image: ProcessedImage, target: UploadTarget) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n\n  formData.append('file', image.fileBlob)\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (image: File) => {\n      const processedImageParams = await processFileData(image)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["processFileData","image","uri","fileToDataUri","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;;AAqDA,MAAMA,IAAkB,OAAOC,MAAyC;AAChE,QAAAC,IAAM,MAAMC,EAAcF,CAAK,GAG/BG,IAAO,OADI,MAAM,MAAMF,CAAG,GACJ,KAAK;AAE1B,SAAA;AAAA,IACL,UAAUD,EAAM;AAAA,IAChB,UAAUA,EAAM,QAAQG,EAAK;AAAA,IAC7B,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OAAOJ,GAAuBK,MAAyB;AACvE,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEQF,EAAA,OAAO,QAAQN,EAAM,QAAQ;AAEtC,QAAMS,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA4D7D,SAAA;AAAA,IACL,aA3DkBC;AAAA,MAClB,OAAOd,MAAgB;AACf,cAAAe,IAAuB,MAAMhB,EAAgBC,CAAK,GAElDgB,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUI,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAIrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMb;AAAA,UACjCW;AAAA,UACAC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAGtC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}
+{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {fileToDataUri} from '../../utils'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The file to upload.\n   */\n  image: File\n}\n\ninterface ProcessedImage {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The file blob of the image.\n   */\n  fileBlob: Blob\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image which will be attached to the current user.\n   */\n  uploadImage: (image: File) => Promise<UploadedImage[]>\n}\n\n// Fetch file data and detect file sizes if not provided\n// Works with file://, data:, and http(s):// URIs\nconst processFileData = async (image: File): Promise<ProcessedImage> => {\n  const uri = await fileToDataUri(image)\n\n  const response = await fetch(uri)\n  const blob = await response.blob()\n\n  return {\n    mimeType: image.type,\n    fileSize: image.size ?? blob.size,\n    fileBlob: blob,\n  }\n}\n\nconst uploadFileToGCS = async (image: ProcessedImage, target: UploadTarget) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n\n  formData.append('file', image.fileBlob)\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (image: File) => {\n      const processedImageParams = await processFileData(image)\n\n      const links = await createImageUploadLink({\n        input: [\n          {\n            mimeType: processedImageParams.mimeType,\n            fileSize: processedImageParams.fileSize,\n          },\n        ],\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      if (links.mocked) {\n        // Skip upload and return mock data\n        return [\n          {\n            id: 'uploaded-image-id',\n            imageUrl:\n              'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175',\n            resourceUrl:\n              'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175',\n          },\n        ]\n      }\n\n      // Upload single file to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        processedImageParams,\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["processFileData","image","uri","fileToDataUri","blob","uploadFileToGCS","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","processedImageParams","links","uploadError","count","result","resolve"],"mappings":";;;AAqDA,MAAMA,IAAkB,OAAOC,MAAyC;AAChE,QAAAC,IAAM,MAAMC,EAAcF,CAAK,GAG/BG,IAAO,OADI,MAAM,MAAMF,CAAG,GACJ,KAAK;AAE1B,SAAA;AAAA,IACL,UAAUD,EAAM;AAAA,IAChB,UAAUA,EAAM,QAAQG,EAAK;AAAA,IAC7B,UAAUA;AAAA,EACZ;AACF,GAEMC,IAAkB,OAAOJ,GAAuBK,MAAyB;AACvE,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEQF,EAAA,OAAO,QAAQN,EAAM,QAAQ;AAEtC,QAAMS,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AAyE7D,SAAA;AAAA,IACL,aAxEkBC;AAAA,MAClB,OAAOd,MAAgB;AACf,cAAAe,IAAuB,MAAMhB,EAAgBC,CAAK,GAElDgB,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAO;AAAA,YACL;AAAA,cACE,UAAUI,EAAqB;AAAA,cAC/B,UAAUA,EAAqB;AAAA,YAAA;AAAA,UACjC;AAAA,QACF,CACD;AAEG,YAAA,CAACC,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAGrC,YAAIA,EAAM;AAED,iBAAA;AAAA,YACL;AAAA,cACE,IAAI;AAAA,cACJ,UACE;AAAA,cACF,aACE;AAAA,YAAA;AAAA,UAEN;AAIF,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMb;AAAA,UACjCW;AAAA,UACAC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAGtC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}