@oxy.so/bloom 3.6.0 → 4.1.0

package/lib/commonjs/place-card/PlaceCard.js

@@ -0,0 +1,721 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlaceCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../badge/index.js");
+var _index2 = require("../chip/index.js");
+var _context = require("../image-resolver/context.js");
+var _FavoriteButton = require("../listing-card/FavoriteButton.js");
+var _parts = require("../listing-card/parts.js");
+var _shared = require("../listing-card/shared.js");
+var _index3 = require("../rating/index.js");
+var _index4 = require("../skeleton/index.js");
+var _breakpoints = require("../styles/breakpoints.js");
+var _interactiveWebCss = require("../styles/interactive-web-css.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _webData = require("../styles/web-data.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index5 = require("../typography/index.js");
+var _ChartHeader = require("../chart-cards/primitives/ChartHeader.js");
+var _constants = require("./constants.js");
+var _PlaceActions = require("./PlaceActions.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 place on the map — the result you scroll past, and the header of the sheet
+ * you open. ONE component, two densities.
+ *
+ *   row      a 112 square thumbnail (radius 12) with the heart over its corner,
+ *            12 right of it the text: the badge slot, the name (body-semibold)
+ *            with `Rating` beside it, the category, the open/closed `Badge`
+ *            with the hours line, the address with its pin and the facts row.
+ *            This is `listing-card`'s compact geometry, part for part.
+ *   detail   a 165 cover across the top of a hairline card (radius 24), then
+ *            the name (title-2-medium) with `Rating`, the category and the
+ *            open/closed `Badge`, the hours and the address; then the FIGURE
+ *            block — a quiet label over a tabular title-1 reading with a `Chip`
+ *            after it — the stat tiles, and the actions. This is
+ *            `ai-profile-card`'s register: cover, title-weight name, quiet
+ *            label over a figure, labelled secondary actions.
+ *
+ * WHAT THIS FAMILY DRAWS ITSELF: nothing that already exists. The stars are
+ * `Rating`, the open/closed pill is `Badge` on a tone, the distance chip is
+ * `Chip`, the address line and the facts row are `listing-card`'s own parts
+ * (`ListingLocationLine`, `ListingFacts`), the heart is `FavoriteButton`, the
+ * actions are `Button`s through `PlaceActions`, and every colour is read off
+ * the surface the card was dropped on. What is left is the arrangement.
+ *
+ * THE ROW IS A LINK AND THE CONTROLS ARE ITS SIBLINGS. The thumbnail and the
+ * text sit inside one pressable (a real `<a href>` on web); the heart and the
+ * actions are laid over and under it from OUTSIDE. A button inside an anchor is
+ * invalid HTML and makes the heart's press open the place.
+ *
+ * The REVIEWS are not here. `place-reviews` already draws the summary, the
+ * cards and the write-a-review prompt; a sheet renders `PlaceReviewSummary`
+ * under this header rather than this header growing a second one.
+ */
+
+const TEXT_GAP = 12;
+const G = _constants.PLACE_CARD_GEOMETRY;
+const PLACE_CARD_STYLE_ID = 'bloom-place-card-web-css';
+const PLACE_CARD_CSS = (0, _interactiveWebCss.interactiveWebCss)({
+  selector: '[data-bloom-place-card-link]',
+  varPrefix: 'bloom-place-card',
+  reset: 'none',
+  base: 'text-decoration: none; color: inherit;',
+  transition: 'none',
+  outlineOffset: 4,
+  disabled: {
+    opacity: null
+  },
+  extraRules: `[data-bloom-place-card-link]:focus-visible {
+  border-radius: ${_shared.COMPACT_PHOTO_RADIUS + 4}px;
+}`
+});
+
+// ---------------------------------------------------------------------------
+//  Parts both densities draw
+// ---------------------------------------------------------------------------
+
+/** The open/closed pill. `Badge` on the state's tone — no second pill exists. */
+function OpenStateBadge({
+  label,
+  state,
+  size,
+  testID
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+    content: label,
+    variant: "subtle",
+    color: _constants.PLACE_OPEN_TONE[state],
+    size: size,
+    testID: testID
+  });
+}
+
+/** The name and the rating on one line — the rating never pushes the name out. */
+function NameLine({
+  props,
+  paint,
+  variant,
+  ratingSize
+}) {
+  const {
+    name,
+    rating,
+    reviewCount,
+    newLabel,
+    testID
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+      variant: variant,
+      numberOfLines: 1,
+      style: {
+        flex: 1,
+        minWidth: 0,
+        color: paint.text
+      },
+      testID: testID ? `${testID}-name` : undefined,
+      children: name
+    }), rating !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Rating, {
+      size: ratingSize,
+      value: rating,
+      count: reviewCount,
+      newLabel: newLabel,
+      style: {
+        flexShrink: 0
+      },
+      testID: testID ? `${testID}-rating` : undefined
+    }) : null]
+  });
+}
+
+/**
+ * The category and the state pill on one line, the hours under it.
+ *
+ * The two are separate lines because the pill is a WORD ("Open") and the hours
+ * are a SENTENCE ("Open until 20:00"): pushed onto one line the sentence
+ * truncates first and leaves the pill saying half of what the app knows.
+ */
+function StateLines({
+  props,
+  paint,
+  categoryVariant,
+  hoursVariant,
+  badgeSize
+}) {
+  const {
+    category,
+    openState,
+    openLabel,
+    hours,
+    testID
+  } = props;
+  const state = (0, _shared2.openLabelFor)(openState, openLabel);
+  if (!category && !state && !hours) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [category || state ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        minWidth: 0
+      },
+      children: [category ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+        variant: categoryVariant,
+        numberOfLines: 1,
+        style: {
+          flexShrink: 1,
+          minWidth: 0,
+          color: paint.textSecondary
+        },
+        testID: testID ? `${testID}-category` : undefined,
+        children: category
+      }) : null, state && openState ?
+      /*#__PURE__*/
+      // The pill keeps its whole word and the CATEGORY is what yields:
+      // "Closing s…" beside "Coffee shop …" is two truncations for one
+      // line's worth of overflow, and the state is the shorter fact.
+      (0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexShrink: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenStateBadge, {
+          label: state,
+          state: openState,
+          size: badgeSize,
+          testID: testID ? `${testID}-state` : undefined
+        })
+      }) : null]
+    }) : null, hours ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+      variant: hoursVariant,
+      numberOfLines: 1,
+      style: {
+        color: paint.textSecondary
+      },
+      testID: testID ? `${testID}-hours` : undefined,
+      children: hours
+    }) : null]
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Skeleton
+// ---------------------------------------------------------------------------
+
+function PlaceCardSkeleton({
+  density,
+  style,
+  testID
+}) {
+  if (density === 'row') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      "aria-busy": true,
+      accessibilityLabel: "Loading",
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'flex-start'
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+        width: _shared.COMPACT_PHOTO_SIZE,
+        height: _shared.COMPACT_PHOTO_SIZE,
+        borderRadius: _shared.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)(_index4.Box, {
+          width: "60%",
+          height: 14,
+          borderRadius: 4
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+          width: "40%",
+          height: 12,
+          borderRadius: 4
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+          width: "50%",
+          height: 12,
+          borderRadius: 4
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+          width: "35%",
+          height: 12,
+          borderRadius: 4
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    "aria-busy": true,
+    accessibilityLabel: "Loading",
+    style: style,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+      width: "100%",
+      height: G.cover,
+      borderRadius: G.radius
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: 8,
+        paddingTop: G.padding
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+        width: "55%",
+        height: 20,
+        borderRadius: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+        width: "35%",
+        height: 14,
+        borderRadius: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+        width: "45%",
+        height: 26,
+        borderRadius: 4,
+        style: {
+          marginTop: 8
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Box, {
+        width: "100%",
+        height: 34,
+        borderRadius: G.tileRadius,
+        style: {
+          marginTop: 8
+        }
+      })]
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Row
+// ---------------------------------------------------------------------------
+
+function PlaceRow({
+  props,
+  paint
+}) {
+  const {
+    photo,
+    photoVariant,
+    badge,
+    address,
+    facts,
+    actions,
+    favorite = false,
+    onFavoriteChange,
+    saveLabel,
+    removeLabel,
+    onPress,
+    href,
+    accessibilityLabel,
+    style,
+    testID
+  } = props;
+  const resolver = (0, _context.useImageResolver)();
+  const uri = photo ? (0, _shared.resolvePhoto)(photo, resolver, photoVariant) : undefined;
+  const name = accessibilityLabel ?? (0, _shared2.composePlaceName)(props);
+  const handlePress = event => {
+    if (onPress) {
+      if (_shared.IS_WEB && href) event.preventDefault();
+      onPress();
+      return;
+    }
+    if (!_shared.IS_WEB && href) void _reactNative.Linking.openURL(href).catch(() => undefined);
+  };
+  const linkStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    '--bloom-place-card-ring': paint.ring
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      position: 'relative'
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      ...(0, _webData.webDataSet)({
+        bloomPlaceCardLink: ''
+      }),
+      ...(_shared.IS_WEB && href ? {
+        href
+      } : null),
+      role: href ? 'link' : onPress ? 'button' : undefined,
+      accessibilityLabel: name,
+      onPress: onPress || !_shared.IS_WEB && href ? handlePress : undefined,
+      style: linkStyle,
+      testID: testID ? `${testID}-link` : undefined,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: _shared.COMPACT_PHOTO_SIZE,
+          height: _shared.COMPACT_PHOTO_SIZE,
+          flexShrink: 0,
+          borderRadius: _shared.COMPACT_PHOTO_RADIUS,
+          overflow: 'hidden',
+          backgroundColor: paint.photoPlaceholder
+        },
+        testID: testID ? `${testID}-photo` : undefined,
+        children: uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri
+          },
+          resizeMode: "cover",
+          accessibilityIgnoresInvertColors: true,
+          style: _reactNative.StyleSheet.absoluteFill
+        }) : null
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          marginLeft: TEXT_GAP,
+          gap: 2
+        },
+        children: [badge != null && badge !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 4,
+            marginBottom: 4
+          },
+          testID: testID ? `${testID}-slot` : undefined,
+          children: typeof badge === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+            content: badge,
+            variant: "subtle",
+            color: "default",
+            size: "label-small"
+          }) : badge
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(NameLine, {
+          props: props,
+          paint: paint,
+          variant: "body-semibold",
+          ratingSize: "small"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StateLines, {
+          props: props,
+          paint: paint,
+          categoryVariant: "body-2-regular",
+          hoursVariant: "body-2-regular",
+          badgeSize: "label-small"
+        }), address ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingLocationLine, {
+          text: address,
+          size: "small",
+          color: paint.textSecondary,
+          testID: testID ? `${testID}-address` : undefined
+        }) : 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: _shared.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, actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlaceActions.PlaceActions, {
+      actions: actions,
+      accessibilityLabel: `${props.name} actions`,
+      style: {
+        marginTop: TEXT_GAP
+      },
+      testID: testID ? `${testID}-actions` : undefined
+    }) : null]
+  });
+}
+
+// ---------------------------------------------------------------------------
+//  Detail header
+// ---------------------------------------------------------------------------
+
+/** Two per row below `sm`, one row of equal tiles from there. */
+function tileRows(count, wide) {
+  if (wide) return [Array.from({
+    length: count
+  }, (_unused, index) => index)];
+  const rows = [];
+  for (let i = 0; i < count; i += 2) rows.push(i + 1 < count ? [i, i + 1] : [i]);
+  return rows;
+}
+function PlaceDetail({
+  props,
+  paint
+}) {
+  const {
+    photo,
+    photoVariant,
+    badge,
+    address,
+    facts,
+    figure,
+    figureLabel,
+    figureDetail,
+    stats,
+    actions,
+    favorite = false,
+    onFavoriteChange,
+    saveLabel,
+    removeLabel,
+    style,
+    testID
+  } = props;
+  const resolver = (0, _context.useImageResolver)();
+  const {
+    width: viewport
+  } = (0, _reactNative.useWindowDimensions)();
+  const wide = viewport >= _breakpoints.BREAKPOINTS.sm;
+  const uri = photo ? (0, _shared.resolvePhoto)(photo, resolver, photoVariant) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: testID,
+    style: [{
+      position: 'relative',
+      width: '100%',
+      minWidth: 0,
+      overflow: 'hidden',
+      borderRadius: G.radius,
+      borderWidth: 1,
+      borderColor: paint.border
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID ? `${testID}-photo` : undefined,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: G.cover,
+        overflow: 'hidden',
+        borderTopLeftRadius: G.radius - 1,
+        borderTopRightRadius: G.radius - 1,
+        backgroundColor: paint.photoPlaceholder
+      },
+      children: uri ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: {
+          uri
+        },
+        resizeMode: "cover",
+        accessibilityIgnoresInvertColors: true,
+        "aria-hidden": true,
+        style: _reactNative.StyleSheet.absoluteFill
+      }) : null
+    }), onFavoriteChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: 'absolute',
+        top: 8,
+        right: 8
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FavoriteButton.FavoriteButton, {
+        favorite: favorite,
+        onFavoriteChange: onFavoriteChange,
+        saveLabel: saveLabel,
+        removeLabel: removeLabel,
+        testID: testID ? `${testID}-favorite` : undefined
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: testID ? `${testID}-content` : undefined,
+      style: {
+        position: 'relative',
+        width: '100%',
+        gap: G.blockGap,
+        paddingTop: G.cover + G.padding,
+        paddingBottom: G.padding,
+        paddingLeft: G.padding,
+        paddingRight: G.padding
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          gap: 4
+        },
+        children: [badge != null && badge !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: 6,
+            marginBottom: 2
+          },
+          testID: testID ? `${testID}-slot` : undefined,
+          children: typeof badge === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+            content: badge,
+            variant: "subtle",
+            color: "default",
+            size: "label-medium"
+          }) : badge
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(NameLine, {
+          props: props,
+          paint: paint,
+          variant: "title-2-medium",
+          ratingSize: "medium"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StateLines, {
+          props: props,
+          paint: paint,
+          categoryVariant: "headline-medium",
+          hoursVariant: "body-regular",
+          badgeSize: "label-medium"
+        }), address ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingLocationLine, {
+          text: address,
+          size: "medium",
+          color: paint.textSecondary,
+          testID: testID ? `${testID}-address` : undefined
+        }) : null]
+      }), figure || stats && stats.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          width: '100%',
+          gap: 8
+        },
+        children: [figure ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            gap: 2
+          },
+          children: [figureLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+            variant: "body-medium",
+            numberOfLines: 1,
+            style: {
+              color: paint.textSecondary
+            },
+            testID: testID ? `${testID}-figure-label` : undefined,
+            children: figureLabel
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 8
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+              variant: "title-1-medium",
+              numberOfLines: 1,
+              style: [{
+                color: paint.text
+              }, _ChartHeader.TABULAR],
+              testID: testID ? `${testID}-figure` : undefined,
+              children: figure
+            }), figureDetail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Chip, {
+              size: "medium",
+              testID: testID ? `${testID}-figure-detail` : undefined,
+              children: figureDetail
+            }) : null]
+          })]
+        }) : null, stats && stats.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            gap: 8
+          },
+          testID: testID ? `${testID}-stats` : undefined,
+          children: tileRows(stats.length, wide).map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: {
+              flexDirection: 'row',
+              alignItems: 'stretch',
+              gap: 8
+            },
+            children: [row.map(index => {
+              const stat = stats[index];
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                testID: testID ? `${testID}-stat-${index}` : undefined,
+                style: [styles.tile, {
+                  backgroundColor: paint.tile
+                }],
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+                  variant: "body-medium",
+                  numberOfLines: 1,
+                  style: {
+                    width: '100%',
+                    color: paint.text
+                  },
+                  children: stat.value
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+                  variant: "body-2-medium",
+                  numberOfLines: 1,
+                  style: {
+                    width: '100%',
+                    color: paint.textSecondary
+                  },
+                  children: stat.label
+                })]
+              }, `${index}-${stat.label}`);
+            }), !wide && row.length === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.tileSpacer
+            }) : null]
+          }, row[0]))
+        }) : null]
+      }) : null, facts && facts.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.ListingFacts, {
+        facts: facts,
+        size: "medium",
+        color: paint.textSecondary,
+        testID: testID ? `${testID}-facts` : undefined
+      }) : null, actions && actions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlaceActions.PlaceActions, {
+        actions: actions,
+        accessibilityLabel: `${props.name} actions`,
+        testID: testID ? `${testID}-actions` : undefined
+      }) : null]
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+
+function PlaceCardComponent(props) {
+  const {
+    density = 'row',
+    loading = false,
+    style,
+    testID
+  } = props;
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared2.resolvePlaceCardPaint)(theme, surface), [theme, surface]);
+  (0, _interactiveWebCss.useInteractiveWebCss)(PLACE_CARD_STYLE_ID, PLACE_CARD_CSS);
+  if (loading) return /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceCardSkeleton, {
+    density: density,
+    style: style,
+    testID: testID
+  });
+  return density === 'detail' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceDetail, {
+    props: props,
+    paint: paint
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceRow, {
+    props: props,
+    paint: paint
+  });
+}
+const PlaceCard = exports.PlaceCard = /*#__PURE__*/(0, _react.memo)(PlaceCardComponent);
+PlaceCard.displayName = 'PlaceCard';
+const styles = _reactNative.StyleSheet.create({
+  tile: {
+    flex: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    alignItems: 'flex-start',
+    borderRadius: G.tileRadius,
+    padding: G.tilePadding
+  },
+  tileSpacer: {
+    flex: 1,
+    flexBasis: 0,
+    minWidth: 0
+  }
+});
+//# sourceMappingURL=PlaceCard.js.map