@oxy.so/bloom 2.8.0 → 2.10.0

package/lib/commonjs/listing-actions/ExchangeProposalCard.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExchangeProposalCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _ActionCard = require("../booking/ActionCard.js");
+var _BookingFieldCell = require("../booking/BookingFieldCell.js");
+var _shared = require("../booking/shared.js");
+var _button = require("../button");
+var _index = require("../chip/index.js");
+var _RiArrowLeftRightLine = require("../icons/remix/RiArrowLeftRightLine.js");
+var _tokens = require("../styles/tokens.js");
+var _constants = require("./constants.js");
+var _parts = require("./parts.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); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const SWAP_GLYPH = 36;
+const HOMES_GAP = 10;
+/** A tile's caption-2 label line (15) and the gap under it (8). */
+const TILE_LABEL = 23;
+const ALL_MODES = ['swap', 'host', 'both'];
+
+/**
+ * A home-swap proposal: your home and theirs, when, how many, and how.
+ *
+ *   homes      two `HomeTile`s — label caption-2-bold uppercase, a 4:3 photo
+ *              radius 12, title body-2-medium, location and size
+ *              caption-1-regular text-secondary — with a 36 round swap glyph
+ *              between them (1px hairline, surface fill). Below 360 wide
+ *              (`layout="auto"`) they stack as 72-square rows and the glyph
+ *              turns 90°
+ *   box        20 below; DATES | GUESTS cells, `BookingCard`'s box
+ *   modes      16 below; `Chip`s (medium, `selected` for the chosen mode)
+ *   button     16 below; "Propose a swap" primary large, full width
+ *   note       12 below; centred
+ */
+function ExchangeProposalCardComponent({
+  yourHome,
+  theirHome,
+  yourHomeLabel = 'Your home',
+  theirHomeLabel = 'Their home',
+  dates,
+  onPressDates,
+  guests,
+  onPressGuests,
+  datesLabel = 'Dates',
+  guestsLabel = 'Guests',
+  datesPlaceholder = 'Add dates',
+  guestsPlaceholder = 'Add guests',
+  mode,
+  onModeChange,
+  modes = ALL_MODES,
+  modeLabels,
+  proposeLabel = 'Propose a swap',
+  onPropose,
+  proposeDisabled = false,
+  loading = false,
+  note,
+  footer,
+  layout = 'auto',
+  style,
+  testID
+}) {
+  const palette = (0, _parts.useActionPalette)();
+  (0, _parts.useFocusSheet)();
+  const [width, setWidth] = (0, _react.useState)(null);
+  const onLayout = (0, _react.useCallback)(e => {
+    setWidth(Math.round(e.nativeEvent.layout.width));
+  }, []);
+  const [rowWidth, setRowWidth] = (0, _react.useState)(null);
+  const onRowLayout = (0, _react.useCallback)(e => {
+    setRowWidth(Math.round(e.nativeEvent.layout.width));
+  }, []);
+  const stacked = layout === 'vertical' || layout === 'auto' && width != null && width < _constants.EXCHANGE_STACK_BELOW;
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const labels = (0, _react.useMemo)(() => ({
+    ..._constants.EXCHANGE_MODE_LABELS,
+    ...modeLabels
+  }), [modeLabels]);
+
+  // Side by side, the glyph sits on the photos' centre line: the label (15 +
+  // 8 gap) plus half a 4:3 photo as wide as one tile.
+  const tileWidth = rowWidth != null ? (rowWidth - SWAP_GLYPH - HOMES_GAP * 2) / 2 : 0;
+  const arrowTop = rowWidth != null ? Math.round(TILE_LABEL + tileWidth * 3 / 4 / 2 - SWAP_GLYPH / 2) : 0;
+  const arrow = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: id('swap-glyph'),
+    importantForAccessibility: "no-hide-descendants",
+    accessibilityElementsHidden: true,
+    ...(IS_WEB ? {
+      'aria-hidden': true
+    } : null),
+    style: {
+      width: SWAP_GLYPH,
+      height: SWAP_GLYPH,
+      borderRadius: _tokens.borderRadius.full,
+      borderWidth: 1,
+      borderColor: palette.border,
+      backgroundColor: palette.surface,
+      alignItems: 'center',
+      justifyContent: 'center',
+      alignSelf: stacked ? 'center' : 'flex-start',
+      marginTop: stacked ? 0 : arrowTop,
+      transform: stacked ? [{
+        rotate: '90deg'
+      }] : undefined
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiArrowLeftRightLine.RiArrowLeftRightLine, {
+      width: 18,
+      height: 18,
+      fill: palette.text
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ActionCard.ActionCardShell, {
+    testID: testID,
+    onLayout: onLayout,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: id('homes'),
+      onLayout: onRowLayout,
+      style: {
+        flexDirection: stacked ? 'column' : 'row',
+        alignItems: stacked ? 'stretch' : 'flex-start',
+        gap: stacked ? 8 : HOMES_GAP
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.HomeTile, {
+        home: yourHome,
+        label: yourHomeLabel,
+        orientation: stacked ? 'horizontal' : 'vertical',
+        style: stacked ? undefined : {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('your-home')
+      }), arrow, /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.HomeTile, {
+        home: theirHome,
+        label: theirHomeLabel,
+        orientation: stacked ? 'horizontal' : 'vertical',
+        style: stacked ? undefined : {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('their-home')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      testID: id('fields'),
+      style: {
+        marginTop: 20,
+        flexDirection: 'row',
+        borderWidth: 1,
+        borderColor: palette.fieldBorder,
+        borderRadius: _shared.BOOKING_FIELD_RADIUS
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BookingFieldCell.BookingFieldCell, {
+        label: datesLabel,
+        value: dates,
+        placeholder: datesPlaceholder,
+        active: false,
+        palette: palette,
+        onPress: onPressDates ? () => onPressDates() : undefined,
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('dates')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: 1,
+          backgroundColor: palette.fieldBorder
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BookingFieldCell.BookingFieldCell, {
+        label: guestsLabel,
+        value: guests,
+        placeholder: guestsPlaceholder,
+        active: false,
+        palette: palette,
+        onPress: onPressGuests ? () => onPressGuests() : undefined,
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        testID: id('guests')
+      })]
+    }), mode !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: id('modes'),
+      style: {
+        marginTop: 16,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8
+      },
+      children: modes.map(value => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Chip, {
+        size: "medium",
+        variant: "outlined",
+        selected: mode === value,
+        onPress: onModeChange ? () => onModeChange(value) : undefined,
+        testID: id(`mode-${value}`),
+        children: labels[value]
+      }, value))
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+      variant: "primary",
+      size: "large",
+      fullWidth: true,
+      onPress: onPropose,
+      disabled: proposeDisabled,
+      loading: loading,
+      style: {
+        marginTop: 16,
+        alignSelf: 'stretch'
+      },
+      testID: id('propose'),
+      children: proposeLabel
+    }), note != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionCard.ActionCardNote, {
+      style: {
+        marginTop: 12
+      },
+      children: note
+    }) : null, footer != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        marginTop: 24,
+        alignItems: 'center'
+      },
+      children: footer
+    }) : null]
+  });
+}
+const ExchangeProposalCard = exports.ExchangeProposalCard = /*#__PURE__*/(0, _react.memo)(ExchangeProposalCardComponent);
+ExchangeProposalCard.displayName = 'ExchangeProposalCard';
+//# sourceMappingURL=ExchangeProposalCard.js.map

package/lib/commonjs/listing-actions/ExchangeProposalCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_ActionCard","_BookingFieldCell","_shared","_button","_index","_RiArrowLeftRightLine","_tokens","_constants","_parts","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","IS_WEB","Platform","OS","SWAP_GLYPH","HOMES_GAP","TILE_LABEL","ALL_MODES","ExchangeProposalCardComponent","yourHome","theirHome","yourHomeLabel","theirHomeLabel","dates","onPressDates","guests","onPressGuests","datesLabel","guestsLabel","datesPlaceholder","guestsPlaceholder","mode","onModeChange","modes","modeLabels","proposeLabel","onPropose","proposeDisabled","loading","note","footer","layout","style","testID","palette","useActionPalette","useFocusSheet","width","setWidth","useState","onLayout","useCallback","Math","round","nativeEvent","rowWidth","setRowWidth","onRowLayout","stacked","EXCHANGE_STACK_BELOW","id","part","undefined","labels","useMemo","EXCHANGE_MODE_LABELS","tileWidth","arrowTop","arrow","jsx","View","importantForAccessibility","accessibilityElementsHidden","height","borderRadius","full","borderWidth","borderColor","border","backgroundColor","surface","alignItems","justifyContent","alignSelf","marginTop","transform","rotate","children","RiArrowLeftRightLine","fill","text","jsxs","ActionCardShell","flexDirection","gap","HomeTile","home","label","orientation","flex","minWidth","fieldBorder","BOOKING_FIELD_RADIUS","BookingFieldCell","value","placeholder","active","onPress","flexWrap","map","Chip","size","variant","selected","Button","fullWidth","disabled","ActionCardNote","ExchangeProposalCard","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["listing-actions/ExchangeProposalCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/listing-actions/MortgageCalculator.js

@@ -0,0 +1,393 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MortgageCalculator = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _ActionCard = require("../booking/ActionCard.js");
+var _useControllableState = require("../hooks/use-controllable-state.js");
+var _index = require("../slider/index.js");
+var _index2 = require("../text-field/index.js");
+var _index3 = require("../typography/index.js");
+var _constants = require("./constants.js");
+var _mortgage = require("./mortgage.js");
+var _parts = require("./parts.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 mortgage estimate from four inputs. The ONE component in this family that
+ * computes: `computeMortgage` (exported, pure) turns price, down payment, term
+ * and rate into the instalment and totals; `formatCurrency` turns numbers into
+ * text.
+ *
+ *   inputs     price field; down payment amount + percent fields in sync, a
+ *              `Slider` (0–100%) under them; term as radio chips (10…30
+ *              years); interest rate field with a "%" suffix
+ *   result     "Monthly payment" body-2-medium text-secondary over the amount
+ *              title-1-semibold; a 136 donut of principal (chart-6) and
+ *              interest (chart-2) with a legend; loan amount, total interest
+ *              and total cost rows; the disclaimer caption-1-regular
+ *   layout     stacked, or inputs | result side by side from 640 wide
+ *              (`layout="auto"`), 32 apart
+ */
+
+function NumberField({
+  label,
+  caption,
+  value,
+  format,
+  parse,
+  onChange,
+  suffix,
+  testID
+}) {
+  const [text, setText] = (0, _react.useState)(() => format(value));
+  // Follow the value from outside (slider, chips, parent), but leave the
+  // text alone while it already says that number — "3." stays "3." mid-typing.
+  (0, _react.useEffect)(() => {
+    setText(current => parse(current) === value ? current : format(value));
+  }, [value, format, parse]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flex: 1,
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.TextFieldLabel, {
+      children: caption ?? label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.TextField, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.TextFieldInput, {
+        label: label,
+        value: text,
+        inputMode: "decimal",
+        keyboardType: "decimal-pad",
+        onChangeText: next => {
+          setText(next);
+          onChange(parse(next));
+        },
+        onBlur: () => setText(format(value)),
+        testID: testID
+      }), suffix ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.TextFieldSuffix, {
+        label: suffix,
+        children: suffix
+      }) : null]
+    })]
+  });
+}
+const formatPercent = value => String(Math.round(value * 10) / 10);
+const formatRate = value => String(Math.round(value * 100) / 100);
+function MortgageCalculatorComponent({
+  price: priceProp,
+  defaultPrice = 350000,
+  onPriceChange,
+  downPayment: downProp,
+  defaultDownPayment,
+  onDownPaymentChange,
+  years: yearsProp,
+  defaultYears = 25,
+  onYearsChange,
+  annualRate: rateProp,
+  defaultAnnualRate = 3.5,
+  onAnnualRateChange,
+  termOptions = _constants.MORTGAGE_TERM_OPTIONS,
+  formatCurrency = _mortgage.formatPlainAmount,
+  labels: labelsProp,
+  disclaimer,
+  layout = 'auto',
+  maxWidth = null,
+  style,
+  testID
+}) {
+  const palette = (0, _parts.useActionPalette)();
+  const labels = (0, _react.useMemo)(() => ({
+    ..._constants.MORTGAGE_LABELS,
+    ...labelsProp
+  }), [labelsProp]);
+  const tones = (0, _react.useMemo)(() => (0, _parts.resolveDonutTones)(palette.theme), [palette.theme]);
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const [price, setPrice] = (0, _useControllableState.useControllableState)({
+    value: priceProp,
+    defaultValue: defaultPrice,
+    onChange: onPriceChange
+  });
+  const [down, setDown] = (0, _useControllableState.useControllableState)({
+    value: downProp,
+    defaultValue: defaultDownPayment ?? Math.round(defaultPrice * 0.2),
+    onChange: onDownPaymentChange
+  });
+  const [years, setYears] = (0, _useControllableState.useControllableState)({
+    value: yearsProp,
+    defaultValue: defaultYears,
+    onChange: onYearsChange
+  });
+  const [rate, setRate] = (0, _useControllableState.useControllableState)({
+    value: rateProp,
+    defaultValue: defaultAnnualRate,
+    onChange: onAnnualRateChange
+  });
+  const [width, setWidth] = (0, _react.useState)(null);
+  const onLayout = (0, _react.useCallback)(e => {
+    setWidth(Math.round(e.nativeEvent.layout.width));
+  }, []);
+  const split = layout === 'split' || layout === 'auto' && width != null && width >= _constants.MORTGAGE_SPLIT_FROM;
+  const result = (0, _react.useMemo)(() => (0, _mortgage.computeMortgage)({
+    price,
+    downPayment: down,
+    years,
+    annualRate: rate
+  }), [price, down, years, rate]);
+  const percent = price > 0 ? Math.min(down, price) / price * 100 : 0;
+  const setPercent = pct => setDown(Math.round(price * Math.min(100, Math.max(0, pct)) / 100));
+  const shownDisclaimer = disclaimer === undefined ? 'An estimate, not an offer. It leaves out fees, taxes and insurance, and assumes a fixed rate for the whole term.' : disclaimer;
+  const inputs = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: 16,
+      flex: split ? 1 : undefined,
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumberField, {
+      label: labels.price,
+      value: price,
+      format: _mortgage.formatPlainAmount,
+      parse: _mortgage.parseAmount,
+      onChange: next => {
+        setPrice(next);
+        if (down > next) setDown(next);
+      },
+      testID: id('price')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: 12
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          gap: 8
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumberField, {
+          label: labels.downPayment,
+          value: Math.min(down, price),
+          format: _mortgage.formatPlainAmount,
+          parse: _mortgage.parseAmount,
+          onChange: next => setDown(Math.min(next, price)),
+          testID: id('down-payment')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: 96
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberField, {
+            label: labels.downPaymentPercent,
+            caption: labels.percent,
+            value: Math.round(percent * 10) / 10,
+            format: formatPercent,
+            parse: _mortgage.parseRate,
+            onChange: setPercent,
+            suffix: "%",
+            testID: id('down-payment-percent')
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Slider, {
+        value: Math.round(percent),
+        onValueChange: setPercent,
+        min: 0,
+        max: 100,
+        step: 1,
+        showTooltip: false,
+        accessibilityLabel: labels.downPaymentPercent,
+        testID: id('down-payment-slider')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.TextFieldLabel, {
+        children: `${labels.term} (${labels.years})`
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        accessibilityLabel: labels.term,
+        role: "radiogroup",
+        testID: id('terms'),
+        style: {
+          flexDirection: 'row',
+          gap: 8
+        },
+        children: termOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.SelectChip, {
+          shape: "slot",
+          selected: years === option,
+          onPress: () => setYears(option),
+          accessibilityLabel: `${option} ${labels.years}`,
+          style: {
+            flex: 1,
+            minWidth: 0,
+            paddingLeft: 4,
+            paddingRight: 4
+          },
+          testID: id(`term-${option}`),
+          children: ink => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+            variant: "body-2-medium",
+            style: {
+              color: ink,
+              fontVariant: ['tabular-nums']
+            },
+            children: String(option)
+          })
+        }, option))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberField, {
+      label: labels.rate,
+      value: rate,
+      format: formatRate,
+      parse: _mortgage.parseRate,
+      onChange: setRate,
+      suffix: "%",
+      testID: id('rate')
+    })]
+  });
+  const rows = [['loan', labels.loanAmount, formatCurrency(result.loanAmount)], ['interest', labels.totalInterest, formatCurrency(result.totalInterest)], ['total', labels.totalCost, formatCurrency(result.totalCost)]];
+  const legend = (color, label, amount) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      gap: 2
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: 2,
+          backgroundColor: color
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+        variant: "caption-1-regular",
+        style: {
+          color: palette.textSecondary
+        },
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+      variant: "body-2-semibold",
+      style: {
+        color: palette.text,
+        fontVariant: ['tabular-nums']
+      },
+      children: formatCurrency(amount)
+    })]
+  });
+  const output = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    testID: id('result'),
+    style: [{
+      gap: 16,
+      minWidth: 0
+    }, split ? {
+      flex: 1
+    } : {
+      borderTopWidth: 1,
+      borderTopColor: palette.border,
+      paddingTop: 20
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        gap: 2
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+        variant: "body-2-medium",
+        style: {
+          color: palette.textSecondary
+        },
+        children: labels.monthlyPayment
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+        variant: "title-1-semibold",
+        accessibilityLiveRegion: "polite",
+        "aria-live": "polite",
+        testID: id('monthly'),
+        style: {
+          color: palette.text,
+          fontVariant: ['tabular-nums']
+        },
+        children: formatCurrency(result.monthlyPayment)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 20
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_parts.PrincipalDonut, {
+        principal: result.loanAmount,
+        interest: result.totalInterest,
+        accessibilityLabel: `${labels.principal} ${formatCurrency(result.loanAmount)}, ${labels.interest} ${formatCurrency(result.totalInterest)}`,
+        testID: id('donut')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          gap: 12,
+          flex: 1,
+          minWidth: 0
+        },
+        children: [legend(tones.principal, labels.principal, result.loanAmount), legend(tones.interest, labels.interest, result.totalInterest)]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: rows.map(([key, label, value], index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        testID: id(`row-${key}`),
+        style: {
+          flexDirection: 'row',
+          alignItems: 'baseline',
+          gap: 12,
+          paddingTop: 10,
+          paddingBottom: 10,
+          borderTopWidth: index === 0 ? 0 : 1,
+          borderTopColor: palette.border
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+          variant: "body-2-regular",
+          style: {
+            flex: 1,
+            color: palette.textSecondary
+          },
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+          variant: index === rows.length - 1 ? 'body-2-semibold' : 'body-2-medium',
+          style: {
+            color: palette.text,
+            fontVariant: ['tabular-nums']
+          },
+          children: value
+        })]
+      }, key))
+    }), shownDisclaimer != null ? typeof shownDisclaimer === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+      variant: "caption-1-regular",
+      testID: id('disclaimer'),
+      style: {
+        color: palette.textSecondary
+      },
+      children: shownDisclaimer
+    }) : shownDisclaimer : null]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ActionCard.ActionCardShell, {
+    testID: testID,
+    maxWidth: maxWidth,
+    onLayout: onLayout,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+      variant: "headline-semibold",
+      accessibilityRole: "header",
+      style: {
+        color: palette.text,
+        marginBottom: 20
+      },
+      children: labels.title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: split ? {
+        flexDirection: 'row',
+        gap: 32,
+        alignItems: 'flex-start'
+      } : {
+        gap: 24
+      },
+      children: [inputs, output]
+    })]
+  });
+}
+const MortgageCalculator = exports.MortgageCalculator = /*#__PURE__*/(0, _react.memo)(MortgageCalculatorComponent);
+MortgageCalculator.displayName = 'MortgageCalculator';
+//# sourceMappingURL=MortgageCalculator.js.map