@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/property-insights/NeighbourhoodScores.js

@@ -0,0 +1,200 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { useContainerWidth } from "../hooks/use-container-width.js";
+import { Meter, MeterRing } from "../stat-bar/index.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { NEIGHBOURHOOD_SCORES_TWO_COLUMN_MIN_WIDTH } from "./constants.js";
+import { resolveInsightPalette } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * How the area around a home scores — transport, schools, shops, green areas,
+ * quiet, safety (the labels are props).
+ *
+ *   columns   `auto`: 1 below 560 wide, 2 from 560; 32 apart, rows 24 apart
+ *   bars      icon 20 + label (body-medium) + score right (body-semibold,
+ *             tabular); 8 below, a 6-tall `Meter` — the shared neutral-200
+ *             (dark neutral-700) track, radius 3, filled with the accent to
+ *             `value / max`; the description (body-2-regular, text-secondary)
+ *             8 below
+ *   rings     a 56 `MeterRing` (5 stroke, same track and fill, starting at 12
+ *             o'clock) with the score centred (body-semibold); the label
+ *             (body-medium) and description beside it, 16 apart
+ *
+ * Each bar or ring is a `progressbar` named by its label, with flat
+ * `aria-valuemin/max/now` and `aria-valuetext` ("8.4 out of 10").
+ */
+
+const RING = 56;
+const RING_STROKE = 5;
+function formatScore(value) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+function BarItem({
+  item,
+  max,
+  palette,
+  valueText,
+  display,
+  testID
+}) {
+  const Icon = item.icon;
+  const clamped = Math.min(max, Math.max(0, item.value));
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 8
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8
+      },
+      children: [Icon ? /*#__PURE__*/_jsx(Icon, {
+        width: 20,
+        height: 20,
+        fill: palette.text
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        numberOfLines: 1,
+        style: {
+          flex: 1,
+          minWidth: 0,
+          color: palette.text
+        },
+        children: item.label
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body-semibold",
+        importantForAccessibility: "no",
+        accessibilityElementsHidden: true,
+        style: {
+          color: palette.text,
+          fontVariant: ['tabular-nums']
+        },
+        children: display
+      })]
+    }), /*#__PURE__*/_jsx(Meter, {
+      value: clamped,
+      max: max,
+      height: 6,
+      accessibilityLabel: item.label,
+      valueText: valueText,
+      testID: testID ? `${testID}-bar` : undefined,
+      fillTestID: testID ? `${testID}-fill` : undefined
+    }), item.description ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-regular",
+      style: {
+        color: palette.textSecondary
+      },
+      children: item.description
+    }) : null]
+  });
+}
+function RingItem({
+  item,
+  max,
+  palette,
+  valueText,
+  display,
+  testID
+}) {
+  const clamped = Math.min(max, Math.max(0, item.value));
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 16
+    },
+    children: [/*#__PURE__*/_jsx(MeterRing, {
+      value: clamped,
+      max: max,
+      size: RING,
+      thickness: RING_STROKE,
+      accessibilityLabel: item.label,
+      valueText: valueText,
+      testID: testID ? `${testID}-ring` : undefined,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "body-semibold",
+        style: {
+          color: palette.text,
+          fontVariant: ['tabular-nums']
+        },
+        children: display
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        style: {
+          color: palette.text
+        },
+        children: item.label
+      }), item.description ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-regular",
+        style: {
+          color: palette.textSecondary
+        },
+        children: item.description
+      }) : null]
+    })]
+  });
+}
+function NeighbourhoodScoresComponent({
+  items,
+  max: maxProp = 10,
+  variant = 'bars',
+  columns = 'auto',
+  formatValueText = (display, max) => `${display} out of ${max}`,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveInsightPalette(theme), [theme]);
+  const {
+    width,
+    onLayout
+  } = useContainerWidth();
+  const max = maxProp > 0 ? maxProp : 10;
+  const count = columns === 'auto' ? width != null && width >= NEIGHBOURHOOD_SCORES_TWO_COLUMN_MIN_WIDTH ? 2 : 1 : columns;
+  const Item = variant === 'rings' ? RingItem : BarItem;
+  return /*#__PURE__*/_jsx(View, {
+    onLayout: onLayout,
+    role: "list",
+    style: [{
+      width: '100%',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      rowGap: 24
+    }, style],
+    testID: testID,
+    children: items.map((item, index) => {
+      const display = item.display ?? formatScore(item.value);
+      return /*#__PURE__*/_jsx(View, {
+        role: "listitem",
+        testID: testID ? `${testID}-item-${index}` : undefined,
+        style: {
+          width: `${100 / count}%`,
+          paddingRight: count > 1 && index % 2 === 0 ? 16 : 0,
+          paddingLeft: count > 1 && index % 2 === 1 ? 16 : 0
+        },
+        children: /*#__PURE__*/_jsx(Item, {
+          item: item,
+          max: max,
+          palette: palette,
+          display: display,
+          valueText: formatValueText(display, max),
+          testID: testID ? `${testID}-item-${index}` : undefined
+        })
+      }, `${item.label}-${index}`);
+    })
+  });
+}
+export const NeighbourhoodScores = /*#__PURE__*/memo(NeighbourhoodScoresComponent);
+NeighbourhoodScores.displayName = 'NeighbourhoodScores';
+//# sourceMappingURL=NeighbourhoodScores.js.map

package/lib/module/property-insights/NeighbourhoodScores.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","useContainerWidth","Meter","MeterRing","useTheme","Text","NEIGHBOURHOOD_SCORES_TWO_COLUMN_MIN_WIDTH","resolveInsightPalette","jsx","_jsx","jsxs","_jsxs","RING","RING_STROKE","formatScore","value","Number","isInteger","String","toFixed","BarItem","item","max","palette","valueText","display","testID","Icon","icon","clamped","Math","min","style","gap","children","flexDirection","alignItems","width","height","fill","text","variant","numberOfLines","flex","minWidth","color","label","importantForAccessibility","accessibilityElementsHidden","fontVariant","accessibilityLabel","undefined","fillTestID","description","textSecondary","RingItem","size","thickness","NeighbourhoodScoresComponent","items","maxProp","columns","formatValueText","theme","onLayout","count","Item","role","flexWrap","rowGap","map","index","paddingRight","paddingLeft","NeighbourhoodScores","displayName"],"sourceRoot":"../../../src","sources":["property-insights/NeighbourhoodScores.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/property-insights/PriceEstimate.js

@@ -0,0 +1,488 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { Chip } from "../chip/index.js";
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { RiArrowDownSLine, RiArrowUpSLine } from "../icons/remix/index.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
+import { useInteractiveWebCss } from "../styles/interactive-web-css.js";
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { PROPERTY_INSIGHTS_CSS, PROPERTY_INSIGHTS_STYLE_ID, formatEuros, resolveInsightPalette } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * An explainable price estimate: the range, where the asking price sits in it,
+ * how sure the estimate is, and why.
+ *
+ *   card        radius 20, card surface (dark neutral-900), 1px neutral-200
+ *               (dark neutral-800) border, padding
+ *               20 (longhands), gap 20
+ *   heading     `title` body-medium text-secondary; the range "€360,000 –
+ *               €395,000" title-2-semibold
+ *   bar         an 8-tall neutral-100 (dark neutral-800) track, radius 4; the
+ *               estimate band low → high in accent-200 (dark accent-800); the
+ *               point `estimate` a 2×16 text-primary tick; the asking price a
+ *               2×24 text-primary marker with "Asking €385,000"
+ *               (caption-1-semibold) above it; low and high under the band
+ *               (caption-1-regular, text-secondary). Labels are clamped inside
+ *               the bar's width.
+ *   verdict     a subtle `Chip`: "Fair price" success, "Below estimate by 6%"
+ *               success, "Above estimate by 8%" warning up to
+ *               `highAboveRatio` (10%) above the high end, error beyond
+ *   confidence  a 3-segment meter (16×6 each, radius 3, 3 apart; filled
+ *               segments text-primary, empty neutral-100 / dark neutral-800)
+ *               + "Medium confidence" body-2-semibold + the note
+ *   reasons     a "Why this estimate" toggle (body-semibold + chevron) that
+ *               expands the bullets (body-regular) and the comparables line
+ *   footer      method · version · updated, caption-1-regular text-tertiary
+ *
+ * CONFIDENCE CHANGES WHAT IS DRAWN, not just a label. The band is widened
+ * by a share of the range on each side, painted accent-100 (dark accent-900):
+ * nothing at `high`, 25% at `medium`, 50% at `low` — and at `low` the core
+ * band is painted in that same soft colour, so the bar shows no firm edges,
+ * the point-estimate tick is hidden, and the verdict is REPLACED by
+ * "Not enough data for a verdict". A low-confidence estimate must not look
+ * like a precise one.
+ */
+
+const TRACK_HEIGHT = 8;
+const MARKER_HEIGHT = 24;
+const LABEL_SLOT = 140;
+const WIDEN = {
+  high: 0,
+  medium: 0.25,
+  low: 0.5
+};
+const FILLED = {
+  low: 1,
+  medium: 2,
+  high: 3
+};
+const DEFAULT_CONFIDENCE_LABELS = {
+  low: 'Low confidence',
+  medium: 'Medium confidence',
+  high: 'High confidence'
+};
+
+/** Where `asking` sits against `[low, high]`, as a share of the nearest edge. */
+export function computePriceVerdict(low, high, asking) {
+  const lo = Math.min(low, high);
+  const hi = Math.max(low, high);
+  if (asking > hi) return {
+    position: 'above',
+    ratio: hi > 0 ? (asking - hi) / hi : 0
+  };
+  if (asking < lo) return {
+    position: 'below',
+    ratio: lo > 0 ? (lo - asking) / lo : 0
+  };
+  return {
+    position: 'within',
+    ratio: 0
+  };
+}
+const percent = ratio => `${Math.max(1, Math.round(ratio * 100))}%`;
+export function defaultFormatVerdict(verdict) {
+  if (verdict.position === 'above') return `Above estimate by ${percent(verdict.ratio)}`;
+  if (verdict.position === 'below') return `Below estimate by ${percent(verdict.ratio)}`;
+  return 'Fair price';
+}
+export function priceVerdictTone(verdict, highAboveRatio = 0.1) {
+  if (verdict.position !== 'above') return 'success';
+  return verdict.ratio > highAboveRatio ? 'error' : 'warning';
+}
+
+/** The drawn band and the bar's domain, in currency units. */
+export function estimateGeometry(low, high, confidence, extra) {
+  const lo = Math.min(low, high);
+  const hi = Math.max(low, high);
+  const span = Math.max(hi - lo, hi * 0.01, 1);
+  const widen = span * WIDEN[confidence];
+  const soft = [lo - widen, hi + widen];
+  const all = [soft[0], soft[1], ...extra.filter(v => v != null)];
+  const min = Math.min(...all);
+  const max = Math.max(...all);
+  const pad = (max - min) * 0.12;
+  return {
+    band: [lo, hi],
+    soft,
+    domain: [min - pad, max + pad]
+  };
+}
+function PriceEstimateComponent({
+  low,
+  high,
+  estimate,
+  asking,
+  confidence,
+  confidenceNote,
+  format = formatEuros,
+  title = 'Estimated price',
+  askingLabel = 'Asking',
+  formatVerdict = defaultFormatVerdict,
+  highAboveRatio = 0.1,
+  confidenceLabels,
+  lowConfidenceVerdictLabel = 'Not enough data for a verdict',
+  reasons,
+  reasonsLabel = 'Why this estimate',
+  expanded: expandedProp,
+  onExpandedChange,
+  comparables,
+  comparablesLabel = n => `Based on ${n} comparable homes`,
+  method,
+  version,
+  updated,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useInteractiveWebCss(PROPERTY_INSIGHTS_STYLE_ID, PROPERTY_INSIGHTS_CSS);
+  const palette = useMemo(() => resolveInsightPalette(theme), [theme]);
+  const {
+    width,
+    onLayout
+  } = useContainerWidth();
+  const [expanded, setExpanded] = useControllableState({
+    value: expandedProp,
+    defaultValue: false,
+    onChange: onExpandedChange
+  });
+  const lowConfidence = confidence === 'low';
+  const geometry = estimateGeometry(low, high, confidence, [asking, estimate]);
+  const [dMin, dMax] = geometry.domain;
+  const px = v => width == null || dMax === dMin ? 0 : (v - dMin) / (dMax - dMin) * width;
+  const pct = v => dMax === dMin ? 0 : (v - dMin) / (dMax - dMin) * 100;
+  const verdict = asking != null ? computePriceVerdict(low, high, asking) : undefined;
+  const confidenceLabel = confidenceLabels?.[confidence] ?? DEFAULT_CONFIDENCE_LABELS[confidence];
+  const rangeText = `${format(Math.min(low, high))} – ${format(Math.max(low, high))}`;
+  const footer = [method, version, updated].filter(Boolean).join(' · ');
+  const hasReasons = reasons && reasons.length > 0 || comparables != null;
+
+  /** A label centred on `x`, clamped inside the bar. */
+  const placed = x => {
+    if (width == null) return {
+      position: 'absolute',
+      left: 0,
+      width: LABEL_SLOT,
+      opacity: 0
+    };
+    const slot = Math.min(LABEL_SLOT, width);
+    const left = Math.min(Math.max(0, x - slot / 2), width - slot);
+    const align = x - slot / 2 < 0 ? 'flex-start' : x + slot / 2 > width ? 'flex-end' : 'center';
+    return {
+      position: 'absolute',
+      left,
+      width: slot,
+      alignItems: align
+    };
+  };
+  const ring = {
+    '--bloom-insight-ring': palette.ring
+  };
+  const barName = [`${title} ${rangeText}`, asking != null ? `${askingLabel} ${format(asking)}` : undefined, confidenceLabel].filter(Boolean).join(', ');
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: [{
+      width: '100%',
+      gap: 20,
+      paddingTop: 20,
+      paddingBottom: 20,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 20,
+      borderWidth: 1,
+      borderColor: palette.hairline,
+      backgroundColor: palette.card
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        style: {
+          color: palette.textSecondary
+        },
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "title-2-semibold",
+        style: {
+          color: palette.text,
+          fontVariant: ['tabular-nums']
+        },
+        testID: testID ? `${testID}-range` : undefined,
+        children: rangeText
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      accessible: true,
+      accessibilityRole: "image",
+      accessibilityLabel: barName,
+      onLayout: onLayout,
+      testID: testID ? `${testID}-bar` : undefined,
+      style: {
+        width: '100%',
+        height: asking != null ? 72 : 44
+      },
+      children: [asking != null ? /*#__PURE__*/_jsx(View, {
+        style: [placed(px(asking)), {
+          top: 0
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-semibold",
+          numberOfLines: 1,
+          style: {
+            color: palette.text,
+            fontVariant: ['tabular-nums']
+          },
+          children: `${askingLabel} ${format(asking)}`
+        })
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-track` : undefined,
+        style: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: asking != null ? 28 : 0,
+          height: TRACK_HEIGHT,
+          borderRadius: TRACK_HEIGHT / 2,
+          backgroundColor: palette.track,
+          overflow: 'hidden'
+        },
+        children: [geometry.soft[0] < geometry.band[0] ? /*#__PURE__*/_jsx(View, {
+          testID: testID ? `${testID}-soft-band` : undefined,
+          style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: `${pct(geometry.soft[0])}%`,
+            width: `${pct(geometry.soft[1]) - pct(geometry.soft[0])}%`,
+            borderRadius: TRACK_HEIGHT / 2,
+            backgroundColor: palette.bandSoft
+          }
+        }) : null, /*#__PURE__*/_jsx(View, {
+          testID: testID ? `${testID}-band` : undefined,
+          style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: `${pct(geometry.band[0])}%`,
+            width: `${pct(geometry.band[1]) - pct(geometry.band[0])}%`,
+            borderRadius: TRACK_HEIGHT / 2,
+            backgroundColor: lowConfidence ? palette.bandSoft : palette.band
+          }
+        })]
+      }), estimate != null && !lowConfidence ? /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-estimate` : undefined,
+        style: {
+          position: 'absolute',
+          left: `${pct(estimate)}%`,
+          marginLeft: -1,
+          top: (asking != null ? 28 : 0) + TRACK_HEIGHT / 2 - 8,
+          width: 2,
+          height: 16,
+          borderRadius: 1,
+          backgroundColor: palette.muted
+        }
+      }) : null, asking != null ? /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-asking` : undefined,
+        style: {
+          position: 'absolute',
+          left: `${pct(asking)}%`,
+          marginLeft: -1,
+          top: 28 + TRACK_HEIGHT / 2 - MARKER_HEIGHT / 2,
+          width: 2,
+          height: MARKER_HEIGHT,
+          borderRadius: 1,
+          backgroundColor: palette.text
+        }
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: [placed(px(geometry.band[0])), {
+          top: asking != null ? 50 : 20
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: palette.textSecondary,
+            fontVariant: ['tabular-nums']
+          },
+          children: format(geometry.band[0])
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: [placed(px(geometry.band[1])), {
+          top: asking != null ? 50 : 20
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: "caption-1-regular",
+          numberOfLines: 1,
+          style: {
+            color: palette.textSecondary,
+            fontVariant: ['tabular-nums']
+          },
+          children: format(geometry.band[1])
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 12
+      },
+      children: [verdict ? lowConfidence ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-medium",
+        style: {
+          color: palette.textSecondary
+        },
+        testID: testID ? `${testID}-verdict` : undefined,
+        children: lowConfidenceVerdictLabel
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row'
+        },
+        children: /*#__PURE__*/_jsx(Chip, {
+          variant: "subtle",
+          size: "large",
+          color: priceVerdictTone(verdict, highAboveRatio),
+          testID: testID ? `${testID}-verdict` : undefined,
+          children: formatVerdict(verdict)
+        })
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          columnGap: 10,
+          rowGap: 4
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          accessibilityRole: "progressbar",
+          accessibilityLabel: confidenceLabel,
+          "aria-valuemin": 1,
+          "aria-valuemax": 3,
+          "aria-valuenow": FILLED[confidence],
+          "aria-valuetext": confidenceLabel,
+          testID: testID ? `${testID}-meter` : undefined,
+          style: {
+            flexDirection: 'row',
+            gap: 3
+          },
+          children: [0, 1, 2].map(i => /*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-meter-${i}` : undefined,
+            style: {
+              width: 16,
+              height: 6,
+              borderRadius: 3,
+              backgroundColor: i < FILLED[confidence] ? palette.text : palette.track
+            }
+          }, i))
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-semibold",
+          importantForAccessibility: "no",
+          accessibilityElementsHidden: true,
+          style: {
+            color: palette.text
+          },
+          children: confidenceLabel
+        }), confidenceNote ? /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: palette.textSecondary,
+            flexShrink: 1
+          },
+          children: confidenceNote
+        }) : null]
+      })]
+    }), hasReasons ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: 10
+      },
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        ...webDataSet({
+          bloomInsightPress: ''
+        }),
+        accessibilityRole: "button",
+        accessibilityLabel: reasonsLabel,
+        "aria-expanded": expanded,
+        accessibilityState: {
+          expanded
+        },
+        onPress: () => setExpanded(!expanded),
+        style: [{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 4,
+          alignSelf: 'flex-start',
+          borderRadius: 4
+        }, ring],
+        testID: testID ? `${testID}-reasons-toggle` : undefined,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "body-semibold",
+          style: {
+            color: palette.text
+          },
+          children: reasonsLabel
+        }), expanded ? /*#__PURE__*/_jsx(RiArrowUpSLine, {
+          width: 18,
+          height: 18,
+          fill: palette.text
+        }) : /*#__PURE__*/_jsx(RiArrowDownSLine, {
+          width: 18,
+          height: 18,
+          fill: palette.text
+        })]
+      }), expanded ? /*#__PURE__*/_jsxs(View, {
+        style: {
+          gap: 8
+        },
+        testID: testID ? `${testID}-reasons` : undefined,
+        children: [reasons && reasons.length > 0 ? /*#__PURE__*/_jsx(View, {
+          role: "list",
+          style: {
+            gap: 6
+          },
+          children: reasons.map((reason, i) => /*#__PURE__*/_jsxs(View, {
+            role: "listitem",
+            style: {
+              flexDirection: 'row',
+              gap: 8
+            },
+            children: [/*#__PURE__*/_jsx(View, {
+              style: {
+                width: 4,
+                height: 4,
+                borderRadius: 2,
+                marginTop: 8,
+                backgroundColor: palette.textSecondary
+              }
+            }), /*#__PURE__*/_jsx(Text, {
+              variant: "body-regular",
+              style: {
+                flex: 1,
+                minWidth: 0,
+                color: palette.text
+              },
+              children: reason
+            })]
+          }, `${reason}-${i}`))
+        }) : null, comparables != null ? /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: palette.textSecondary
+          },
+          testID: testID ? `${testID}-comparables` : undefined,
+          children: comparablesLabel(comparables)
+        }) : null]
+      }) : null]
+    }) : null, footer ? /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      style: {
+        color: palette.muted
+      },
+      testID: testID ? `${testID}-footer` : undefined,
+      children: footer
+    }) : null]
+  });
+}
+export const PriceEstimate = /*#__PURE__*/memo(PriceEstimateComponent);
+PriceEstimate.displayName = 'PriceEstimate';
+//# sourceMappingURL=PriceEstimate.js.map