@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/commonjs/listing-card/ListingCard.js

@@ -15,14 +15,18 @@ var _index2 = require("../rating/index.js");
 var _index3 = require("../skeleton/index.js");
 var _tokens = require("../styles/tokens.js");
 var _interactiveWebCss = require("../styles/interactive-web-css.js");
+var _webData = require("../styles/web-data.js");
 var _useTheme = require("../theme/use-theme.js");
 var _index4 = require("../typography/index.js");
+var _OfferingBadge = require("../offering-badge/OfferingBadge.js");
+var _shared = require("../offering-badge/shared.js");
 var _FavoriteButton = require("./FavoriteButton.js");
-var _shared = require("./shared.js");
+var _parts = require("./parts.js");
+var _shared2 = require("./shared.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
- * A stay in a results grid.
+ * A home in a results grid — a stay, a rental, a home for sale or a swap.
  *
  *   vertical     photo 20:19, radius 16; 12 below it, the text block
  *   horizontal   photo 40% wide, square, radius 16; 12 right of it, the text
@@ -34,6 +38,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *                dates body-regular text-secondary; the price line — an
  *                optional struck original price, the price body-semibold and
  *                the unit body-regular; a total line under it
+ *   housing      the address line (pin, body-regular secondary); facts (body-2,
+ *                16px icons, one clipped row); stacked `priceLines`
+ *   top-left     one wrapping row, 6 apart: the status pill, the `badge`, then
+ *                the offerings as `onMedia` badges
+ *   status       not `available`: the photo washed 50% toward the page
+ *   compact      a list row: a 112 square thumbnail (radius 12), 12 right of it
+ *                the offerings/status row (small, tinted), title, address,
+ *                price lines, facts
  *
  * THE CARD IS A LINK AND THE CONTROLS ARE ITS SIBLINGS, NOT ITS CHILDREN. The
  * photo and the text sit inside one pressable (a real `<a href>` on web), and
@@ -55,13 +67,31 @@ const TEXT_GAP = 12;
 
 function photoBoxStyle(layout) {
   return layout === 'horizontal' ? {
-    width: _shared.HORIZONTAL_PHOTO_WIDTH,
+    width: _shared2.HORIZONTAL_PHOTO_WIDTH,
     aspectRatio: 1
   } : {
     width: '100%',
-    aspectRatio: _shared.PHOTO_ASPECT_RATIO
+    aspectRatio: _shared2.PHOTO_ASPECT_RATIO
   };
 }
+function StatusWash({
+  paint,
+  testID
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      backgroundColor: paint.statusWash,
+      opacity: _shared2.STATUS_WASH_OPACITY
+    },
+    testID: testID ? `${testID}-wash` : undefined
+  });
+}
 function PhotoTrack({
   photos,
   variant,
@@ -72,6 +102,7 @@ function PhotoTrack({
   onWidth,
   onIndex,
   mountedThrough,
+  washed,
   testID
 }) {
   const resolver = (0, _context.useImageResolver)();
@@ -79,18 +110,18 @@ function PhotoTrack({
     if (width <= 0) return;
     onIndex(Math.round(event.nativeEvent.contentOffset.x / width));
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     onLayout: event => onWidth(event.nativeEvent.layout.width),
     style: [photoBoxStyle(layout), {
       flexShrink: 0,
-      borderRadius: _shared.PHOTO_RADIUS,
+      borderRadius: _shared2.PHOTO_RADIUS,
       overflow: 'hidden',
       backgroundColor: paint.photoPlaceholder
     }],
     testID: testID ? `${testID}-photo` : undefined,
-    children: width > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    children: [width > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       ref: scrollRef,
-      ...(0, _shared.webData)({
+      ...(0, _webData.webDataSet)({
         bloomListingCardTrack: ''
       }),
       horizontal: true,
@@ -104,9 +135,9 @@ function PhotoTrack({
         height: '100%'
       },
       children: photos.map((photo, index) => {
-        const uri = index <= mountedThrough ? (0, _shared.resolvePhoto)(photo, resolver, variant) : undefined;
+        const uri = index <= mountedThrough ? (0, _shared2.resolvePhoto)(photo, resolver, variant) : undefined;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...(0, _shared.webData)({
+          ...(0, _webData.webDataSet)({
             bloomListingCardSlide: ''
           }),
           style: {
@@ -126,7 +157,10 @@ function PhotoTrack({
           }) : null
         }, `${index}-${photo}`);
       })
-    }) : null
+    }) : null, washed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusWash, {
+      paint: paint,
+      testID: testID
+    }) : null]
   });
 }
 
@@ -139,7 +173,7 @@ function Dots({
   active,
   paint
 }) {
-  const slots = (0, _shared.dotWindow)(count, active);
+  const slots = (0, _shared2.dotWindow)(count, active);
   if (slots.length === 0) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     pointerEvents: "none",
@@ -149,14 +183,14 @@ function Dots({
       left: 0,
       right: 0,
       bottom: 10,
-      height: _shared.DOT_SIZE,
+      height: _shared2.DOT_SIZE,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       gap: 5
     },
     children: slots.map(slot => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      ...(0, _shared.webData)({
+      ...(0, _webData.webDataSet)({
         bloomListingCardDot: slot.active ? 'active' : ''
       }),
       style: {
@@ -164,7 +198,7 @@ function Dots({
         height: slot.size,
         borderRadius: _tokens.borderRadius.full,
         backgroundColor: paint.onMedia,
-        opacity: slot.active ? 1 : _shared.DOT_INACTIVE_OPACITY
+        opacity: slot.active ? 1 : _shared2.DOT_INACTIVE_OPACITY
       }
     }, slot.index))
   });
@@ -202,7 +236,12 @@ function BadgePill({
 
 function composeName(props) {
   const parts = [props.title];
+  const status = (0, _shared2.statusLabelFor)(props.status, props.statusLabel);
+  if (status) parts.push(status);
   if (typeof props.badge === 'string' && props.badge) parts.push(props.badge);
+  for (const offering of (0, _shared2.uniqueOfferings)(props.offerings)) {
+    parts.push(props.offeringLabels?.[offering] ?? _shared.OFFERING_LABELS[offering]);
+  }
   if (props.rating !== undefined) {
     const rated = props.rating !== null && props.rating !== '';
     if (rated) {
@@ -213,13 +252,13 @@ function composeName(props) {
     }
   }
   if (props.subtitle) parts.push(props.subtitle);
+  const location = (0, _shared2.locationText)(props.address, props.approximateLocation, props.approximateLocationLabel);
+  if (location) parts.push(location);
   if (props.dates) parts.push(props.dates);
-  if (props.price) {
-    const unit = props.priceUnit ? ` ${props.priceUnit}` : '';
-    const original = props.originalPrice ? `, originally ${props.originalPrice}` : '';
-    parts.push(`${props.price}${unit}${original}`);
-  }
+  for (const line of (0, _shared2.resolvePriceLines)(props)) parts.push((0, _shared2.describePriceLine)(line));
   if (props.total) parts.push(props.total);
+  const facts = (0, _shared2.describeFacts)(props.facts);
+  if (facts) parts.push(facts);
   return parts.join(', ');
 }
 function Details(props) {
@@ -230,15 +269,16 @@ function Details(props) {
     rating,
     reviewCount,
     newLabel,
-    price,
-    priceUnit,
-    originalPrice,
     total,
+    facts,
     paint
   } = props;
   const secondary = {
     color: paint.textSecondary
   };
+  const lines = (0, _shared2.resolvePriceLines)(props);
+  const location = (0, _shared2.locationText)(props.address, props.approximateLocation, props.approximateLocationLabel);
+  const testID = props.testID;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: {
       flex: props.horizontal ? 1 : undefined,
@@ -276,36 +316,37 @@ function Details(props) {
       numberOfLines: 1,
       style: secondary,
       children: subtitle
+    }) : null, location ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingLocationLine, {
+      text: location,
+      size: "medium",
+      color: paint.textSecondary,
+      testID: testID ? `${testID}-location` : undefined
     }) : null, dates ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
       variant: "body-regular",
       numberOfLines: 1,
       style: secondary,
       children: dates
-    }) : null, price ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index4.Text, {
-      variant: "body-regular",
-      numberOfLines: 1,
+    }) : null, facts && facts.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingFacts, {
+      facts: facts,
+      size: "medium",
+      color: paint.textSecondary,
       style: {
-        marginTop: 4,
-        color: paint.text
+        marginTop: 2
       },
-      children: [originalPrice ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
-        variant: "body-regular",
-        style: {
-          ...secondary,
-          textDecorationLine: 'line-through'
-        },
-        children: originalPrice
-      }) : null, originalPrice ? ' ' : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
-        variant: "body-semibold",
-        style: {
-          color: paint.text
-        },
-        children: price
-      }), priceUnit ? ` ${priceUnit}` : null]
-    }) : null, total ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
-      variant: price ? 'body-regular' : 'body-semibold',
+      testID: testID ? `${testID}-facts` : undefined
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingPriceLines, {
+      lines: lines,
+      size: "medium",
+      color: paint.text,
+      secondaryColor: paint.textSecondary,
+      style: {
+        marginTop: 4
+      },
+      testID: testID ? `${testID}-price` : undefined
+    }), total ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+      variant: lines.length > 0 ? 'body-regular' : 'body-semibold',
       numberOfLines: 1,
-      style: price ? secondary : {
+      style: lines.length > 0 ? secondary : {
         marginTop: 4,
         color: paint.text
       },
@@ -320,10 +361,53 @@ function Details(props) {
 
 function ListingCardSkeleton({
   layout,
+  compact,
   style,
   testID
 }) {
   const horizontal = layout === 'horizontal';
+  if (compact) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      "aria-busy": true,
+      accessibilityLabel: "Loading",
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'center'
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Box, {
+        width: _shared2.COMPACT_PHOTO_SIZE,
+        height: _shared2.COMPACT_PHOTO_SIZE,
+        borderRadius: _shared2.COMPACT_PHOTO_RADIUS,
+        style: {
+          flexShrink: 0
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          marginLeft: TEXT_GAP,
+          gap: 8
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Box, {
+          width: "65%",
+          height: 14,
+          borderRadius: 4
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Box, {
+          width: "45%",
+          height: 12,
+          borderRadius: 4
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Box, {
+          width: "35%",
+          height: 14,
+          borderRadius: 4
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Box, {
+          width: "55%",
+          height: 12,
+          borderRadius: 4
+        })]
+      })]
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     "aria-busy": true,
     accessibilityLabel: "Loading",
@@ -333,7 +417,7 @@ function ListingCardSkeleton({
     }, style],
     testID: testID,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Box, {
-      borderRadius: _shared.PHOTO_RADIUS,
+      borderRadius: _shared2.PHOTO_RADIUS,
       style: [photoBoxStyle(layout), {
         flexShrink: 0
       }]
@@ -380,6 +464,195 @@ function ListingCardSkeleton({
   });
 }
 
+// ---------------------------------------------------------------------------
+//  Compact row
+// ---------------------------------------------------------------------------
+
+/**
+ * The dense list row: one static thumbnail (no paging, no dots, no arrows),
+ * the heart over its top-right corner, and the text beside it. Offerings and
+ * the status sit in a small tinted row ABOVE the title — a 112 thumbnail has no
+ * room for pills over it.
+ */
+function CompactRow(props) {
+  const {
+    photos,
+    photoVariant,
+    title,
+    subtitle,
+    dates,
+    rating,
+    reviewCount,
+    newLabel,
+    total,
+    facts,
+    offerings,
+    offeringLabels,
+    favorite = false,
+    onFavoriteChange,
+    saveLabel,
+    removeLabel,
+    paint,
+    linkProps,
+    linkStyle,
+    statusText,
+    style,
+    testID
+  } = props;
+  const resolver = (0, _context.useImageResolver)();
+  const cover = photos[0] ? (0, _shared2.resolvePhoto)(photos[0], resolver, photoVariant) : undefined;
+  const lines = (0, _shared2.resolvePriceLines)(props);
+  const location = (0, _shared2.locationText)(props.address, props.approximateLocation, props.approximateLocationLabel);
+  const offeringList = (0, _shared2.uniqueOfferings)(offerings);
+  const secondary = {
+    color: paint.textSecondary
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ...(0, _webData.webDataSet)({
+      bloomListingCard: 'compact'
+    }),
+    style: [{
+      position: 'relative'
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      ...linkProps,
+      style: linkStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          width: _shared2.COMPACT_PHOTO_SIZE,
+          height: _shared2.COMPACT_PHOTO_SIZE,
+          flexShrink: 0,
+          borderRadius: _shared2.COMPACT_PHOTO_RADIUS,
+          overflow: 'hidden',
+          backgroundColor: paint.photoPlaceholder
+        },
+        testID: testID ? `${testID}-photo` : undefined,
+        children: [cover ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri: cover
+          },
+          resizeMode: "cover",
+          accessibilityIgnoresInvertColors: true,
+          style: {
+            width: '100%',
+            height: '100%'
+          }
+        }) : null, statusText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusWash, {
+          paint: paint,
+          testID: testID
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          marginLeft: TEXT_GAP,
+          gap: 2
+        },
+        children: [statusText || offeringList.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 4,
+            marginBottom: 4
+          },
+          testID: testID ? `${testID}-slot` : undefined,
+          children: [statusText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingStatusPill, {
+            label: statusText,
+            fill: paint.statusFill,
+            text: paint.statusText,
+            size: "small",
+            testID: testID ? `${testID}-status` : undefined
+          }) : null, offeringList.map(offering => /*#__PURE__*/(0, _jsxRuntime.jsx)(_OfferingBadge.OfferingBadge, {
+            offering: offering,
+            label: offeringLabels?.[offering],
+            size: "small",
+            testID: testID ? `${testID}-offering-${offering}` : undefined
+          }, offering))]
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+            variant: "body-semibold",
+            numberOfLines: 1,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              color: paint.text
+            },
+            children: title
+          }), rating !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Rating, {
+            size: "small",
+            value: rating,
+            count: reviewCount,
+            newLabel: newLabel,
+            style: {
+              flexShrink: 0
+            }
+          }) : null]
+        }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+          variant: "body-2-regular",
+          numberOfLines: 1,
+          style: secondary,
+          children: subtitle
+        }) : null, location ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingLocationLine, {
+          text: location,
+          size: "small",
+          color: paint.textSecondary,
+          testID: testID ? `${testID}-location` : undefined
+        }) : null, dates ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+          variant: "body-2-regular",
+          numberOfLines: 1,
+          style: secondary,
+          children: dates
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingPriceLines, {
+          lines: lines,
+          size: "small",
+          color: paint.text,
+          secondaryColor: paint.textSecondary,
+          style: {
+            marginTop: 2
+          },
+          testID: testID ? `${testID}-price` : undefined
+        }), total ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Text, {
+          variant: lines.length > 0 ? 'body-2-regular' : 'body-2-semibold',
+          numberOfLines: 1,
+          style: lines.length > 0 ? secondary : {
+            marginTop: 2,
+            color: paint.text
+          },
+          children: total
+        }) : null, facts && facts.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingFacts, {
+          facts: facts,
+          size: "small",
+          color: paint.textSecondary,
+          style: {
+            marginTop: 2
+          },
+          testID: testID ? `${testID}-facts` : undefined
+        }) : null]
+      })]
+    }), onFavoriteChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: 'absolute',
+        top: 2,
+        left: _shared2.COMPACT_PHOTO_SIZE - 34
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FavoriteButton.FavoriteButton, {
+        favorite: favorite,
+        size: 20,
+        onFavoriteChange: onFavoriteChange,
+        saveLabel: saveLabel,
+        removeLabel: removeLabel,
+        testID: testID ? `${testID}-favorite` : undefined
+      })
+    }) : null]
+  });
+}
+
 // ---------------------------------------------------------------------------
 //  Card
 // ---------------------------------------------------------------------------
@@ -395,6 +668,11 @@ function ListingCardComponent(props) {
     href,
     loading = false,
     layout = 'vertical',
+    density = 'comfortable',
+    offerings,
+    offeringLabels,
+    status,
+    statusLabel,
     accessibilityLabel,
     previousPhotoLabel = 'Previous photo',
     nextPhotoLabel = 'Next photo',
@@ -405,8 +683,8 @@ function ListingCardComponent(props) {
     testID
   } = props;
   const theme = (0, _useTheme.useTheme)();
-  (0, _interactiveWebCss.useInteractiveWebCss)(_shared.LISTING_CARD_STYLE_ID, _shared.LISTING_CARD_CSS);
-  const paint = (0, _react.useMemo)(() => (0, _shared.resolveListingCardPaint)(theme), [theme]);
+  (0, _interactiveWebCss.useInteractiveWebCss)(_shared2.LISTING_CARD_STYLE_ID, _shared2.LISTING_CARD_CSS);
+  const paint = (0, _react.useMemo)(() => (0, _shared2.resolveListingCardPaint)(theme), [theme]);
   const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
   const scrollRef = (0, _react.useRef)(null);
   const [width, setWidth] = (0, _react.useState)(0);
@@ -454,13 +732,18 @@ function ListingCardComponent(props) {
       animated: !reducedMotion
     });
   };
+  const compact = density === 'compact';
   if (loading) return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListingCardSkeleton, {
     layout: layout,
+    compact: compact,
     style: style,
     testID: testID
   });
   const horizontal = layout === 'horizontal';
   const name = accessibilityLabel ?? composeName(props);
+  const shownStatus = (0, _shared2.statusLabelFor)(status, statusLabel);
+  const hasBadge = badge != null && badge !== '';
+  const offeringList = (0, _shared2.uniqueOfferings)(offerings);
   const linkStyle = {
     flexDirection: horizontal ? 'row' : 'column',
     alignItems: 'flex-start',
@@ -468,12 +751,37 @@ function ListingCardComponent(props) {
   };
   const handlePress = event => {
     if (onPress) {
-      if (_shared.IS_WEB && href) event.preventDefault();
+      if (_shared2.IS_WEB && href) event.preventDefault();
       onPress();
       return;
     }
-    if (!_shared.IS_WEB && href) void _reactNative.Linking.openURL(href).catch(() => undefined);
+    if (!_shared2.IS_WEB && href) void _reactNative.Linking.openURL(href).catch(() => undefined);
+  };
+  const linkProps = {
+    ...(0, _webData.webDataSet)({
+      bloomListingCardLink: ''
+    }),
+    ...(_shared2.IS_WEB && href ? {
+      href
+    } : null),
+    role: href ? 'link' : onPress ? 'button' : undefined,
+    accessibilityLabel: name,
+    onPress: onPress || !_shared2.IS_WEB && href ? handlePress : undefined,
+    testID: testID ? `${testID}-link` : undefined
   };
+  if (compact) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CompactRow, {
+      ...props,
+      paint: paint,
+      linkProps: linkProps,
+      linkStyle: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        '--bloom-listing-card-ring': paint.ring
+      },
+      statusText: shownStatus
+    });
+  }
   const overlayStyle = {
     position: 'absolute',
     top: 0,
@@ -484,7 +792,7 @@ function ListingCardComponent(props) {
     ...photoBoxStyle(layout)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ...(0, _shared.webData)({
+    ...(0, _webData.webDataSet)({
       bloomListingCard: layout
     }),
     style: [{
@@ -492,17 +800,8 @@ function ListingCardComponent(props) {
     }, style],
     testID: testID,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      ...(0, _shared.webData)({
-        bloomListingCardLink: ''
-      }),
-      ...(_shared.IS_WEB && href ? {
-        href
-      } : null),
-      role: href ? 'link' : onPress ? 'button' : undefined,
-      accessibilityLabel: name,
-      onPress: onPress || !_shared.IS_WEB && href ? handlePress : undefined,
+      ...linkProps,
       style: linkStyle,
-      testID: testID ? `${testID}-link` : undefined,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoTrack, {
         photos: photos,
         variant: photoVariant,
@@ -513,6 +812,7 @@ function ListingCardComponent(props) {
         onWidth: setWidth,
         onIndex: onScrollIndex,
         mountedThrough: mountedThrough,
+        washed: shownStatus != null,
         testID: testID
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Details, {
         ...props,
@@ -526,19 +826,40 @@ function ListingCardComponent(props) {
         count: count,
         active: active,
         paint: paint
-      }), badge != null && badge !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), shownStatus || hasBadge || offeringList.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         pointerEvents: "none",
         style: {
           position: 'absolute',
           top: 12,
           left: 12,
-          right: 56
+          right: 56,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+          gap: 6
         },
-        testID: testID ? `${testID}-badge` : undefined,
-        children: typeof badge === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgePill, {
-          label: badge,
-          paint: paint
-        }) : badge
+        testID: testID ? `${testID}-slot` : undefined,
+        children: [shownStatus ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingStatusPill, {
+          label: shownStatus,
+          fill: paint.statusFill,
+          text: paint.statusText,
+          size: "medium",
+          testID: testID ? `${testID}-status` : undefined
+        }) : null, hasBadge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            maxWidth: '100%'
+          },
+          testID: testID ? `${testID}-badge` : undefined,
+          children: typeof badge === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgePill, {
+            label: badge,
+            paint: paint
+          }) : badge
+        }) : null, offeringList.map(offering => /*#__PURE__*/(0, _jsxRuntime.jsx)(_OfferingBadge.OfferingBadge, {
+          offering: offering,
+          label: offeringLabels?.[offering],
+          variant: "onMedia",
+          testID: testID ? `${testID}-offering-${offering}` : undefined
+        }, offering))]
       }) : null, onFavoriteChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: {
           position: 'absolute',
@@ -552,9 +873,9 @@ function ListingCardComponent(props) {
           removeLabel: removeLabel,
           testID: testID ? `${testID}-favorite` : undefined
         })
-      }) : null, _shared.IS_WEB && count > 1 && width > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }) : null, _shared2.IS_WEB && count > 1 && width > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [active > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...(0, _shared.webData)({
+          ...(0, _webData.webDataSet)({
             bloomListingCardArrow: 'previous'
           }),
           style: {
@@ -573,7 +894,7 @@ function ListingCardComponent(props) {
             testID: testID ? `${testID}-previous` : undefined
           })
         }) : null, active < count - 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...(0, _shared.webData)({
+          ...(0, _webData.webDataSet)({
             bloomListingCardArrow: 'next'
           }),
           style: {