@shopify/shop-minis-react 0.0.31 → 0.0.33

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

@@ -1,60 +1,42 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import * as g from "react";
-import { useCallback as L } from "react";
-import { cva as q } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { useShopNavigation as E } from "../../hooks/navigation/useShopNavigation.js";
-import { useSavedProductsActions as M } from "../../hooks/user/useSavedProductsActions.js";
-import { formatMoney as U } from "../../lib/formatMoney.js";
-import { cn as c } from "../../lib/utils.js";
-import { FavoriteButton as V } from "../atoms/favorite-button.js";
-import { ProductVariantPrice as D } from "../atoms/product-variant-price.js";
-import { ThumbhashImage as G } from "../atoms/thumbhash-image.js";
-import { Touchable as H } from "../atoms/touchable.js";
-import { Badge as J } from "../ui/badge.js";
-import { Root as K } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
-const Q = q(
-  "relative w-full overflow-hidden rounded-xl border border-gray-200",
-  {
-    variants: {
-      variant: {
-        default: "",
-        priceOverlay: "",
-        compact: ""
-      },
-      touchable: {
-        true: "cursor-pointer",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      touchable: !0
-    }
-  }
-);
-function W({
-  className: o,
-  variant: t,
-  touchable: r = !0,
-  asChild: a = !1,
-  onPress: i,
-  ...d
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import * as N from "react";
+import { useState as F, useCallback as C, useMemo as A, useContext as k } from "react";
+import { useShopNavigation as T } from "../../hooks/navigation/useShopNavigation.js";
+import { useSavedProductsActions as V } from "../../hooks/user/useSavedProductsActions.js";
+import { formatMoney as j } from "../../lib/formatMoney.js";
+import { cn as s } from "../../lib/utils.js";
+import { FavoriteButton as B } from "../atoms/favorite-button.js";
+import { ProductVariantPrice as E } from "../atoms/product-variant-price.js";
+import { ThumbhashImage as O } from "../atoms/thumbhash-image.js";
+import { Touchable as S } from "../atoms/touchable.js";
+import { Badge as z } from "../ui/badge.js";
+const I = N.createContext(void 0);
+function u() {
+  const t = k(I);
+  if (!t)
+    throw new Error(
+      "ProductCard components must be used within a ProductCard provider"
+    );
+  return t;
+}
+function L({
+  className: t,
+  ...e
 }) {
-  const n = /* @__PURE__ */ e(
-    a ? K : "div",
+  const { touchable: r, onClick: a } = u(), n = /* @__PURE__ */ o(
+    "div",
     {
-      className: c(
-        Q({ variant: t, touchable: r }),
-        "border-0",
-        o
+      className: s(
+        "relative w-full overflow-hidden rounded-xl border-0",
+        t
       ),
-      ...d
+      ...e
     }
   );
-  return r && i ? /* @__PURE__ */ e(
-    H,
+  return r && a ? /* @__PURE__ */ o(
+    S,
     {
-      onClick: i,
+      onClick: a,
       whileTap: { opacity: 0.7 },
       transition: {
         opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
@@ -63,218 +45,232 @@ function W({
     }
   ) : n;
 }
-function X({
-  className: o,
-  variant: t = "default",
-  ...r
+function M({
+  className: t,
+  ...e
 }) {
-  return /* @__PURE__ */ e(
+  const { variant: r } = u();
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "product-card-image-container",
-      className: c(
+      className: s(
         // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
         "flex justify-stretch items-stretch",
         "relative overflow-hidden rounded-xl border border-gray-200",
         "w-full  aspect-square",
-        t === "compact" ? "min-h-[104px]" : "min-h-[134px]",
-        o
+        r === "compact" ? "min-h-[104px]" : "min-h-[134px]",
+        t
       ),
-      ...r
+      ...e
     }
   );
 }
-function Y({
-  className: o,
-  src: t,
-  alt: r,
-  aspectRatio: a,
-  thumbhash: i,
-  ...d
-}) {
-  const s = L(
-    (n) => i ? /* @__PURE__ */ e(
-      G,
+function R({ className: t, ...e }) {
+  const { product: r, selectedProductVariant: a } = u(), n = a?.image || r.featuredImage, i = n?.url, d = n?.altText || r.title, c = r.featuredImage?.thumbhash, p = C(
+    (l) => c ? /* @__PURE__ */ o(
+      O,
       {
         "data-slot": "product-card-image",
-        src: n,
-        alt: r,
-        aspectRatio: a,
-        thumbhash: i,
-        className: c("w-full h-full object-cover", o),
-        ...d
+        src: l,
+        alt: d,
+        aspectRatio: 1,
+        thumbhash: c,
+        className: s("w-full h-full object-cover", t),
+        ...e
       }
-    ) : /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ o(
       "img",
       {
         "data-slot": "product-card-image",
-        src: n,
-        alt: r,
-        className: c("w-full h-full", o),
-        ...d
+        src: l,
+        alt: d,
+        className: s("w-full h-full", t),
+        ...e
       }
     ),
-    [r, a, o, d, i]
+    [d, t, e, c]
   );
-  return /* @__PURE__ */ e("div", { className: "bg-gray-100 flex items-center justify-center w-full h-full", children: t ? s(t) : /* @__PURE__ */ e("div", { className: "text-gray-400 text-sm w-full text-center", children: "No Image" }) });
+  return /* @__PURE__ */ o("div", { className: "bg-gray-100 flex items-center justify-center w-full h-full", children: i ? p(i) : /* @__PURE__ */ o("div", { className: "text-gray-400 text-sm w-full text-center", children: "No Image" }) });
 }
-function k({
-  className: o,
-  position: t = "bottom-left",
-  children: r,
-  ...a
+function w({
+  className: t,
+  position: e = "bottom-left",
+  variant: r,
+  children: a,
+  ...n
 }) {
-  return /* @__PURE__ */ e(
+  const { badgeText: i, badgeVariant: d } = u(), c = a || i;
+  return c ? /* @__PURE__ */ o(
     "div",
     {
-      className: c(
+      className: s(
         "absolute z-10",
-        t === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
+        e === "top-left" ? "top-3 left-3" : "bottom-2 left-2"
       ),
-      children: /* @__PURE__ */ e(
-        J,
+      children: /* @__PURE__ */ o(
+        z,
         {
-          className: c("bg-black/50 text-white rounded", o),
-          ...a,
-          children: r
+          variant: r ?? d ?? "none",
+          className: s(
+            !d && !r && "bg-black/50 text-white border-transparent",
+            "rounded",
+            t
+          ),
+          ...n,
+          children: c
         }
       )
     }
-  );
+  ) : null;
 }
-function Z({
-  className: o,
-  onPress: t,
-  filled: r = !1,
-  ...a
+function q({
+  className: t,
+  ...e
 }) {
-  return /* @__PURE__ */ e("div", { className: c("absolute bottom-3 right-3 z-10", o), ...a, children: /* @__PURE__ */ e(V, { onClick: t, filled: r }) });
+  const { isFavorited: r, onFavoriteToggle: a } = u();
+  return /* @__PURE__ */ o("div", { className: s("absolute bottom-3 right-3 z-10", t), ...e, children: /* @__PURE__ */ o(B, { onClick: a, filled: r }) });
 }
-function _({
-  className: o,
-  variant: t = "default",
-  ...r
-}) {
-  return t !== "default" ? null : /* @__PURE__ */ e(
+function D({ className: t, ...e }) {
+  const { variant: r } = u();
+  return r !== "default" ? null : /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "product-card-info",
-      className: c("px-1 pt-2 pb-0 space-y-1", o),
-      ...r
+      className: s("px-1 pt-2 pb-0 space-y-1", t),
+      ...e
     }
   );
 }
-function $({
-  className: o,
-  children: t,
+function G({
+  className: t,
+  children: e,
   ...r
 }) {
-  return /* @__PURE__ */ e(
+  const { product: a } = u();
+  return /* @__PURE__ */ o(
     "h3",
     {
       "data-slot": "product-card-title",
-      className: c(
+      className: s(
         "text-sm font-medium leading-tight text-gray-900",
         "truncate overflow-hidden whitespace-nowrap text-ellipsis",
-        o
+        t
       ),
       ...r,
-      children: t
+      children: e || a.title
+    }
+  );
+}
+function H({ className: t }) {
+  const { product: e, selectedProductVariant: r } = u(), a = r?.price || e?.price, n = r?.compareAtPrice || e?.compareAtPrice;
+  return /* @__PURE__ */ o(
+    E,
+    {
+      amount: a?.amount || "",
+      currencyCode: a?.currencyCode || "",
+      compareAtPriceAmount: n?.amount,
+      compareAtPriceCurrencyCode: n?.currencyCode,
+      className: t
     }
   );
 }
-function pt({
-  product: o,
-  selectedProductVariant: t,
+function J() {
+  const { product: t, selectedProductVariant: e, variant: r } = u();
+  if (r !== "priceOverlay") return null;
+  const a = e?.price || t.price, n = a?.currencyCode, i = a?.amount;
+  return !n || !i ? null : /* @__PURE__ */ o(w, { position: "top-left", children: j(i, n) });
+}
+function ot({
+  product: t,
+  selectedProductVariant: e,
   variant: r = "default",
   touchable: a = !0,
-  badgeText: i,
-  badgeVariant: d = "secondary",
-  onFavoriteToggled: s
+  badgeText: n,
+  badgeVariant: i,
+  onProductClick: d,
+  onFavoriteToggled: c,
+  children: p
 }) {
-  const { navigateToProduct: n } = E(), { saveProduct: C, unsaveProduct: b } = M(), {
-    id: l,
-    title: x,
-    featuredImage: I,
-    price: j,
-    compareAtPrice: S,
-    isFavorited: B,
-    defaultVariantId: m,
-    shop: f
-  } = o, P = t?.image || I, w = t?.price || j, N = t?.compareAtPrice || S, [p, A] = g.useState(B), h = w?.currencyCode, v = w?.amount, F = P?.url, T = P?.altText || x, O = N?.amount, R = g.useCallback(() => {
-    a && n({
-      productId: l
-    });
-  }, [n, l, a]), z = g.useCallback(async () => {
-    const u = p;
-    A(!u), s?.(!u);
+  const { navigateToProduct: l } = T(), { saveProduct: h, unsaveProduct: g } = V(), [f, P] = F(t.isFavorited), y = C(() => {
+    a && (d?.(), l({
+      productId: t.id
+    }));
+  }, [l, t.id, a, d]), x = C(async () => {
+    const m = f;
+    P(!m), c?.(!m);
     try {
-      u ? await b({
-        productId: l,
-        shopId: f.id,
-        productVariantId: t?.id || m
-      }) : await C({
-        productId: l,
-        shopId: f.id,
-        productVariantId: t?.id || m
+      m ? await g({
+        productId: t.id,
+        shopId: t.shop.id,
+        productVariantId: e?.id || t.defaultVariantId
+      }) : await h({
+        productId: t.id,
+        shopId: t.shop.id,
+        productVariantId: e?.id || t.defaultVariantId
       });
     } catch {
-      A(u), s?.(u);
+      P(m), c?.(m);
     }
   }, [
-    p,
-    l,
-    f.id,
-    t?.id,
-    m,
-    C,
-    b,
-    s
-  ]);
-  return /* @__PURE__ */ y(
-    W,
-    {
+    f,
+    t.id,
+    t.shop.id,
+    t.defaultVariantId,
+    e?.id,
+    h,
+    g,
+    c
+  ]), b = A(
+    () => ({
+      // Core data
+      product: t,
+      selectedProductVariant: e,
+      // UI configuration
       variant: r,
       touchable: a,
-      onPress: R,
-      children: [
-        /* @__PURE__ */ y(X, { variant: r, children: [
-          /* @__PURE__ */ e(
-            Y,
-            {
-              src: F,
-              alt: T,
-              aspectRatio: 1,
-              thumbhash: I?.thumbhash ?? void 0
-            }
-          ),
-          r === "priceOverlay" && h && v && /* @__PURE__ */ e(k, { position: "top-left", children: U(v, h) }),
-          i && /* @__PURE__ */ e(k, { position: "bottom-left", variant: d, children: i }),
-          /* @__PURE__ */ e(
-            Z,
-            {
-              filled: p,
-              onPress: z
-            }
-          )
-        ] }),
-        /* @__PURE__ */ y(_, { variant: r, children: [
-          /* @__PURE__ */ e($, { children: x }),
-          /* @__PURE__ */ e(
-            D,
-            {
-              amount: v,
-              currencyCode: h,
-              compareAtPriceAmount: O,
-              compareAtPriceCurrencyCode: N?.currencyCode
-            }
-          )
-        ] })
-      ]
-    }
+      badgeText: n,
+      badgeVariant: i,
+      // State
+      isFavorited: f,
+      // Actions
+      onClick: y,
+      onFavoriteToggle: x
+    }),
+    [
+      t,
+      e,
+      r,
+      a,
+      n,
+      i,
+      f,
+      y,
+      x
+    ]
   );
+  return /* @__PURE__ */ o(I.Provider, { value: b, children: p ?? /* @__PURE__ */ v(L, { children: [
+    /* @__PURE__ */ v(M, { children: [
+      /* @__PURE__ */ o(R, {}),
+      r === "priceOverlay" && /* @__PURE__ */ o(J, {}),
+      /* @__PURE__ */ o(w, {}),
+      /* @__PURE__ */ o(q, {})
+    ] }),
+    r === "default" && /* @__PURE__ */ v(D, { children: [
+      /* @__PURE__ */ o(G, {}),
+      /* @__PURE__ */ o(H, {})
+    ] })
+  ] }) });
 }
 export {
-  pt as ProductCard
+  ot as ProductCard,
+  w as ProductCardBadge,
+  L as ProductCardContainer,
+  q as ProductCardFavoriteButton,
+  R as ProductCardImage,
+  M as ProductCardImageContainer,
+  D as ProductCardInfo,
+  H as ProductCardPrice,
+  G as ProductCardTitle
 };
 //# sourceMappingURL=product-card.js.map

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} from 'react'\n\nimport {type Product, type ProductVariant} 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 {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {FavoriteButton} from '../atoms/favorite-button'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {ThumbhashImage} from '../atoms/thumbhash-image'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\n\nconst productCardVariants = cva(\n  'relative w-full overflow-hidden rounded-xl border border-gray-200',\n  {\n    variants: {\n      variant: {\n        default: '',\n        priceOverlay: '',\n        compact: '',\n      },\n      touchable: {\n        true: 'cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      touchable: true,\n    },\n  }\n)\n\n// Primitive components (building blocks)\nexport interface ProductCardRootProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof productCardVariants> {\n  variant?: 'default' | 'priceOverlay' | 'compact'\n  touchable?: boolean\n  asChild?: boolean\n  onPress?: () => void\n}\n\nfunction ProductCardRoot({\n  className,\n  variant,\n  touchable = true,\n  asChild = false,\n  onPress,\n  ...props\n}: ProductCardRootProps) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div'\n\n  const content = (\n    <Comp\n      className={cn(\n        productCardVariants({variant, touchable}),\n        'border-0',\n        className\n      )}\n      {...props}\n    />\n  )\n\n  if (touchable && onPress) {\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        {content}\n      </Touchable>\n    )\n  }\n\n  return content\n}\n\nfunction ProductCardImageContainer({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & {\n  variant?: 'default' | 'priceOverlay' | 'compact'\n}) {\n  return (\n    <div\n      data-slot=\"product-card-image-container\"\n      className={cn(\n        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)\n        'flex justify-stretch items-stretch',\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'w-full  aspect-square',\n        variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProductCardImage({\n  className,\n  src,\n  alt,\n  aspectRatio,\n  thumbhash,\n  ...props\n}: React.ComponentProps<'img'> & {\n  src?: string\n  alt?: string\n  aspectRatio?: number\n  thumbhash?: string\n}) {\n  const renderImageElement = useCallback(\n    (src: string) => {\n      if (thumbhash) {\n        return (\n          <ThumbhashImage\n            data-slot=\"product-card-image\"\n            src={src}\n            alt={alt}\n            aspectRatio={aspectRatio}\n            thumbhash={thumbhash}\n            className={cn('w-full h-full object-cover', className)}\n            {...props}\n          />\n        )\n      }\n\n      return (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('w-full h-full', className)}\n          {...props}\n        />\n      )\n    },\n    [alt, aspectRatio, className, props, thumbhash]\n  )\n\n  return (\n    <div className=\"bg-gray-100 flex items-center justify-center w-full h-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  children,\n  ...props\n}: React.ComponentProps<typeof Badge> & {\n  position?: 'top-left' | 'bottom-left'\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        className={cn('bg-black/50 text-white rounded', className)}\n        {...props}\n      >\n        {children}\n      </Badge>\n    </div>\n  )\n}\n\nfunction ProductCardFavoriteButton({\n  className,\n  onPress,\n  filled = false,\n  ...props\n}: React.ComponentProps<'div'> & {\n  onPress?: () => void\n  filled?: boolean\n}) {\n  return (\n    <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>\n      <FavoriteButton onClick={onPress} filled={filled} />\n    </div>\n  )\n}\n\nfunction ProductCardInfo({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & {\n  variant?: 'default' | 'priceOverlay' | 'compact'\n}) {\n  if (variant !== 'default') {\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"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  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}\n    </h3>\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?: 'default' | 'secondary' | 'destructive' | 'outline'\n  /** Callback fired when the favorite button is toggled */\n  onFavoriteToggled?: (isFavorited: boolean) => void\n  /** Optional ID for the section containing this card */\n  sectionId?: string\n}\n\n// Composed ProductCard component\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant = 'secondary',\n  onFavoriteToggled,\n}: ProductCardProps) {\n  const {navigateToProduct} = useShopNavigation()\n  const {saveProduct, unsaveProduct} = useSavedProductsActions()\n\n  const {\n    id,\n    title,\n    featuredImage,\n    price,\n    compareAtPrice,\n    isFavorited,\n    defaultVariantId,\n    shop,\n  } = product\n\n  // Use selected variant data if available\n  const displayImage = selectedProductVariant?.image || featuredImage\n  const displayPrice = selectedProductVariant?.price || price\n  const displayCompareAtPrice =\n    selectedProductVariant?.compareAtPrice || compareAtPrice\n\n  // Local state for optimistic UI updates\n  const [isFavoritedLocal, setIsFavoritedLocal] = React.useState(isFavorited)\n\n  const currencyCode = displayPrice?.currencyCode\n  const amount = displayPrice?.amount\n  const imageUrl = displayImage?.url\n  const imageAltText = displayImage?.altText || title\n  const compareAtPriceAmount = displayCompareAtPrice?.amount\n\n  const handlePress = React.useCallback(() => {\n    if (!touchable) return\n\n    navigateToProduct({\n      productId: id,\n    })\n  }, [navigateToProduct, id, touchable])\n\n  const handleFavoritePress = React.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: id,\n          shopId: shop.id,\n          productVariantId: selectedProductVariant?.id || defaultVariantId,\n        })\n      } else {\n        await saveProduct({\n          productId: id,\n          shopId: shop.id,\n          productVariantId: selectedProductVariant?.id || defaultVariantId,\n        })\n      }\n    } catch (error) {\n      // Revert optimistic update on error\n      setIsFavoritedLocal(previousState)\n      onFavoriteToggled?.(previousState)\n    }\n  }, [\n    isFavoritedLocal,\n    id,\n    shop.id,\n    selectedProductVariant?.id,\n    defaultVariantId,\n    saveProduct,\n    unsaveProduct,\n    onFavoriteToggled,\n  ])\n\n  return (\n    <ProductCardRoot\n      variant={variant}\n      touchable={touchable}\n      onPress={handlePress}\n    >\n      <ProductCardImageContainer variant={variant}>\n        <ProductCardImage\n          src={imageUrl}\n          alt={imageAltText}\n          aspectRatio={1}\n          thumbhash={featuredImage?.thumbhash ?? undefined}\n        />\n\n        {/* Price overlay badge for priceOverlay variant */}\n        {variant === 'priceOverlay' && currencyCode && amount && (\n          <ProductCardBadge position=\"top-left\">\n            {formatMoney(amount, currencyCode)}\n          </ProductCardBadge>\n        )}\n\n        {/* Custom badge */}\n        {badgeText && (\n          <ProductCardBadge position=\"bottom-left\" variant={badgeVariant}>\n            {badgeText}\n          </ProductCardBadge>\n        )}\n\n        {/* Favorite button */}\n        <ProductCardFavoriteButton\n          filled={isFavoritedLocal}\n          onPress={handleFavoritePress}\n        />\n      </ProductCardImageContainer>\n\n      {/* Product info for default variant */}\n      <ProductCardInfo variant={variant}>\n        <ProductCardTitle>{title}</ProductCardTitle>\n\n        <ProductVariantPrice\n          amount={amount}\n          currencyCode={currencyCode}\n          compareAtPriceAmount={compareAtPriceAmount}\n          compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}\n        />\n      </ProductCardInfo>\n    </ProductCardRoot>\n  )\n}\n\nexport {ProductCard}\n"],"names":["productCardVariants","cva","ProductCardRoot","className","variant","touchable","asChild","onPress","props","content","jsx","SlotPrimitive.Slot","cn","Touchable","ProductCardImageContainer","ProductCardImage","src","alt","aspectRatio","thumbhash","renderImageElement","useCallback","ThumbhashImage","ProductCardBadge","position","children","Badge","ProductCardFavoriteButton","filled","FavoriteButton","ProductCardInfo","ProductCardTitle","ProductCard","product","selectedProductVariant","badgeText","badgeVariant","onFavoriteToggled","navigateToProduct","useShopNavigation","saveProduct","unsaveProduct","useSavedProductsActions","id","title","featuredImage","price","compareAtPrice","isFavorited","defaultVariantId","shop","displayImage","displayPrice","displayCompareAtPrice","isFavoritedLocal","setIsFavoritedLocal","React","currencyCode","amount","imageUrl","imageAltText","compareAtPriceAmount","handlePress","handleFavoritePress","previousState","jsxs","formatMoney","ProductVariantPrice"],"mappings":"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"}
+{"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 {formatMoney} from '../../lib/formatMoney'\nimport {cn} from '../../lib/utils'\nimport {FavoriteButton} from '../atoms/favorite-button'\nimport {ProductVariantPrice} from '../atoms/product-variant-price'\nimport {ThumbhashImage} from '../atoms/thumbhash-image'\nimport {Touchable} from '../atoms/touchable'\nimport {Badge} from '../ui/badge'\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\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 w-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        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)\n        'flex justify-stretch items-stretch',\n        'relative overflow-hidden rounded-xl border border-gray-200',\n        'w-full  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        <ThumbhashImage\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          aspectRatio={1}\n          thumbhash={thumbhash}\n          className={cn('w-full h-full object-cover', className)}\n          {...props}\n        />\n      ) : (\n        <img\n          data-slot=\"product-card-image\"\n          src={src}\n          alt={alt}\n          className={cn('w-full h-full', 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 w-full h-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, onFavoriteToggle} = useProductCardContext()\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-slot=\"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 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}\n\nfunction ProductCard({\n  product,\n  selectedProductVariant,\n  variant = 'default',\n  touchable = true,\n  badgeText,\n  badgeVariant,\n  onProductClick,\n  onFavoriteToggled,\n  children,\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\n      // State\n      isFavorited: isFavoritedLocal,\n\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    ]\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              <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  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","ThumbhashImage","ProductCardBadge","position","children","badgeText","badgeVariant","Badge","ProductCardFavoriteButton","isFavorited","onFavoriteToggle","FavoriteButton","ProductCardInfo","ProductCardTitle","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/ui/badge.js

@@ -1,40 +1,42 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cva as o } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as n } from "../../lib/utils.js";
+import { jsx as n } from "react/jsx-runtime";
+import { cva as a } from "../../shop-minis-react/node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as i } from "../../lib/utils.js";
 import { Root as s } from "../../shop-minis-react/node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
-const d = o(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+const d = a(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+        primary: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white dark:bg-destructive/60",
+        outline: "bg-white text-foreground",
+        none: ""
+        // Allows custom classes
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "primary"
     }
   }
 );
-function b({
+function u({
   className: r,
-  variant: e,
-  asChild: t = !1,
-  ...i
+  variant: t,
+  asChild: e = !1,
+  ...o
 }) {
-  return /* @__PURE__ */ a(
-    t ? s : "span",
+  return /* @__PURE__ */ n(
+    e ? s : "span",
     {
       "data-slot": "badge",
-      className: n(d({ variant: e }), r),
-      ...i
+      className: i(d({ variant: t }), r),
+      ...o
     }
   );
 }
 export {
-  b as Badge,
+  u as Badge,
   d as badgeVariants
 };
 //# sourceMappingURL=badge.js.map

package/dist/components/ui/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {cn} from '../../lib/utils'\n\nconst badgeVariants = cva(\n  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {asChild?: boolean}) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'span'\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({variant}), className)}\n      {...props}\n    />\n  )\n}\n\nexport {Badge, badgeVariants}\n"],"names":["badgeVariants","cva","Badge","className","variant","asChild","props","jsx","SlotPrimitive.Slot","cn"],"mappings":";;;;AAOA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAEA,SAASC,EAAM;AAAA,EACb,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAC4D;AAIxD,SAAA,gBAAAC;AAAA,IAHWF,IAAUG,IAAqB;AAAA,IAGzC;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGT,EAAc,EAAC,SAAAI,EAAQ,CAAA,GAAGD,CAAS;AAAA,MAChD,GAAGG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {cva, type VariantProps} from 'class-variance-authority'\nimport {Slot as SlotPrimitive} from 'radix-ui'\n\nimport {cn} from '../../lib/utils'\n\nconst badgeVariants = cva(\n  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden',\n  {\n    variants: {\n      variant: {\n        primary: 'border-transparent bg-primary text-primary-foreground',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground',\n        destructive:\n          'border-transparent bg-destructive text-white dark:bg-destructive/60',\n        outline: 'bg-white text-foreground',\n        none: '', // Allows custom classes\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {asChild?: boolean}) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'span'\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({variant}), className)}\n      {...props}\n    />\n  )\n}\n\nexport {Badge, badgeVariants}\n"],"names":["badgeVariants","cva","Badge","className","variant","asChild","props","jsx","SlotPrimitive.Slot","cn"],"mappings":";;;;AAOA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aACE;AAAA,QACF,SAAS;AAAA,QACT,MAAM;AAAA;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAEA,SAASC,EAAM;AAAA,EACb,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAC4D;AAIxD,SAAA,gBAAAC;AAAA,IAHWF,IAAUG,IAAqB;AAAA,IAGzC;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAGT,EAAc,EAAC,SAAAI,EAAQ,CAAA,GAAGD,CAAS;AAAA,MAChD,GAAGG;AAAA,IAAA;AAAA,EACN;AAEJ;"}